Merge branch 'yyw' of gitee.com:hzchunfen/erp into fix-release-1.0.0/yjc-migrate

This commit is contained in:
杨建炊 2024-08-19 16:43:52 +08:00
commit a70945dc33
20 changed files with 1552 additions and 610 deletions

View File

@ -31,3 +31,11 @@ export function getGmvCount(params) {
params
})
}
export function getLossStatistics(params) {
return http({
url: "/api/data_center/loss_record_statistics",
method: "get",
params
})
}

View File

@ -186,4 +186,12 @@ export function delGoodsCombination(id) {
url: "/api/goods_combination/" + id,
method: "delete",
});
}
}
export function updateSaleStock(data) {
return http({
url: `/api/batch/goods_skus`,
method: "patch",
data
})
}

View File

@ -33,3 +33,10 @@ export function jurisdictionEdit(id, data) {
data,
});
}
export function getRoleInfo() {
return http({
url: "/api/user/user_roles",
method: "get"
})
}

View File

@ -47,6 +47,14 @@ export function addPurchaseLog(data) {
})
}
export function batchAddPurchaseLog(data) {
return http({
url: "/api/purchase_record/purchase_batch_store",
method: "post",
data
})
}
export function updatePurchaseLog(id, data) {
return http({
url: `/api/supplier/purchase_record/${id}`,
@ -71,6 +79,14 @@ export function addLossLog(data) {
})
}
export function batchAddLossLog(data) {
return http({
url: "/api/loss_record/loss_batch_store",
method: "post",
data
})
}
export function updateLossLog(id, data) {
return http({
url: `/api/supplier/loss_record/${id}`,
@ -95,3 +111,11 @@ export function addDailyStock(data) {
})
}
export function batchAddDailyStock(data) {
return http({
url: "/api/daily_stock_record/inventory_batch_store",
method: "post",
data
})
}

View File

@ -122,14 +122,19 @@ const list = [
},
{
path: "spu_sale_statistics",
name: "spu销售统计",
name: "品种销售统计",
component: () => import("../views/dataCenter/spuStatistics.vue"),
},
{
path: "gmv_statistics",
name: "spu销售统计",
name: "交易趋势",
component: () => import("../views/dataCenter/gmvStatistics.vue"),
},
{
path: "loss_record_statistics",
name: "报损统计",
component: () => import("../views/dataCenter/lossStatistics.vue"),
},
{
path: "SUPPLIER_MANAGE",
name: "供应商管理",

View File

@ -1,201 +1,206 @@
<template>
<div class="backimg">
<div class="sign">
<span class="title">Hi 欢迎使用</span>
<p class="manage">
<img src="../css/img/养花人2_画板 1 副本 15.png" alt="" /><span>ERP管理系统</span>
</p>
<p class="title-1">登录</p>
<input type="text" placeholder="请输入用户名" v-model="form.name" />
<br />
<input type="password" placeholder="请输入密码" v-model="form.password" />
<br />
<el-checkbox v-model="checked">记住密码</el-checkbox>
<br />
<el-button type="primary" @click="Login()" @keyup.enter="Login()">登录</el-button>
</div>
<div class="backimg">
<div class="sign">
<span class="title">Hi 欢迎使用</span>
<p class="manage">
<img src="../css/img/养花人2_画板 1 副本 15.png" alt="" /><span>ERP管理系统</span>
</p>
<p class="title-1">登录</p>
<div class="row">
<el-input placeholder="请输入用户名" v-model="form.name" size="large" />
</div>
<div class="row">
<el-input show-password placeholder="请输入密码" v-model="form.password" size="large" />
</div>
<el-checkbox v-model="checked">记住密码</el-checkbox>
<br />
<el-button type="primary" @click="Login()" @keyup.enter="Login()" :loading="loading"> </el-button>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
import axios from 'axios'
import { getRoleInfo } from '@/api/role.js'
export default {
data() {
return {
checked: false, //
form: {
//
name: "",
password: "",
},
};
return {
loading: false,
checked: false, //
form: {
//
name: '',
password: ''
}
}
},
mounted() {
this.getCookie();
window.addEventListener('keydown', this.keyDown);
this.getCookie()
window.addEventListener('keydown', this.keyDown)
},
methods: {
Login() {
// cookie
if (this.checked === true) {
this.setCookie(this.form.name, this.form.password, true, 7);
} else {
this.clearCookie();
}
//
if (this.form.name === "" || this.form.password === "") {
this.$message({
message: "账号或密码不能为空",
type: "error",
});
} else {
axios.post("/api/auth/login", this.form).then((res) => {
let data = res.data;
if (data.error) {
this.$message({
message: "账号或密码错误,请重新输入",
type: "error",
});
this.form.name = "";
this.form.password = "";
this.checked = false;
}
if (data.token) {
localStorage.setItem("userName", this.form.name);
this.form = {};
localStorage.setItem("token", data.token);
this.$message({
message: "成功登录,欢迎来到后台管理系统",
type: "success",
});
this.$router.push("/GOODS_LIST");
}
});
}
},
// cookie
setCookie(c_name, c_pwd, c_state, exdays) {
const exdate = new Date();
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //
window.document.cookie =
"name" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
window.document.cookie =
"password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
window.document.cookie =
"state" + "=" + c_state + ";path=/;expires=" + exdate.toGMTString();
},
// cookie
getCookie() {
if (document.cookie.length > 0) {
const arr = document.cookie.split("; ");
for (let i = 0; i < arr.length; i++) {
const arr2 = arr[i].split("=");
if (arr2[0] === "name") {
this.form.name = arr2[1];
} else if (arr2[0] === "password") {
this.form.password = arr2[1];
} else if (arr2[0] === "state") {
this.checked = Boolean(arr2[1]);
}
}
}
},
// cookie
clearCookie: function () {
this.setCookie("", "", false, -1);
},
keyDown(e) {
if (13 === e.keyCode) {
this.Login();
}
Login() {
// cookie
if (this.checked === true) {
this.setCookie(this.form.name, this.form.password, true, 7)
} else {
this.clearCookie()
}
//
if (this.form.name === "" || this.form.password === "") {
this.$message({
message: "账号或密码不能为空",
type: "error"
})
} else {
this.loading = true
axios.post("/api/auth/login", this.form).then((res) => {
let data = res.data
if (data.error) {
this.$message({
message: "账号或密码错误,请重新输入",
type: "error"
})
this.form.name = ''
this.form.password = ''
this.checked = false
this.loading = false
}
if(data.token) {
localStorage.setItem("userName", this.form.name)
this.form = {}
localStorage.setItem("token", data.token)
getRoleInfo().then((res) => {
console.log(res.data.roles)
if(res.data.roles && res.data.roles[0]) {
localStorage.setItem("roleName", res.data.roles[0].name)
this.$message({
message: "成功登录,欢迎来到后台管理系统",
type: "success"
})
this.$router.push("/GOODS_LIST")
}
this.loading = false
}).catch(() => {
this.loading = false
})
}
})
}
},
// cookie
setCookie(c_name, c_pwd, c_state, exdays) {
const exdate = new Date()
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) //
window.document.cookie = "name" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString()
window.document.cookie = "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString()
window.document.cookie = "state" + "=" + c_state + ";path=/;expires=" + exdate.toGMTString()
},
// cookie
getCookie() {
if (document.cookie.length > 0) {
const arr = document.cookie.split("; ")
for (let i = 0; i < arr.length; i++) {
const arr2 = arr[i].split("=")
if (arr2[0] === "name") {
this.form.name = arr2[1]
} else if (arr2[0] === "password") {
this.form.password = arr2[1]
} else if (arr2[0] === "state") {
this.checked = Boolean(arr2[1])
}
}
}
},
// cookie
clearCookie: function () {
this.setCookie("", "", false, -1)
},
keyDown(e) {
if (13 === e.keyCode) {
this.Login()
}
}
},
destroyed() {
window.removeEventListener('keydown', this.keyDown, false);
window.removeEventListener('keydown', this.keyDown, false)
}
};
}
</script>
<style lang="scss" scoped>
.backimg {
.backimg {
width: 100%;
height: 1080px;
background-image: url("./../css/img/组 32.png");
background-repeat: no-repeat;
background-size: 100%;
position: relative;
}
}
.sign {
.sign {
width: 400px;
height: 500px;
position: absolute;
top: 270px;
right: 300px;
input {
width: 400px;
height: 51px;
border: 2px solid #bcbcbc;
opacity: 1;
border-radius: 5px;
margin-bottom: 25px;
.row{
margin-bottom: 20px;
}
.title {
width: 125px;
height: 23px;
font-size: 22px;
font-family: "BigruixianBlackGBV1.0";
font-weight: 400;
line-height: 23px;
color: #2b53ec;
opacity: 1;
width: 125px;
height: 23px;
font-size: 22px;
font-family: "BigruixianBlackGBV1.0";
font-weight: 400;
line-height: 23px;
color: #2b53ec;
opacity: 1;
}
.manage {
margin-top: 19px;
margin-bottom: 50px;
img {
margin-right: 20px;
}
span {
width: 340px;
height: 57px;
font-size: 54px;
font-family: "BigruixianBlackGBV1.0";
font-weight: 400;
line-height: 57px;
color: #2b53ec;
opacity: 1;
}
margin-top: 19px;
margin-bottom: 50px;
img {
margin-right: 20px;
}
span {
width: 340px;
height: 57px;
font-size: 54px;
font-family: "BigruixianBlackGBV1.0";
font-weight: 400;
line-height: 57px;
color: #2b53ec;
opacity: 1;
}
}
.title-1 {
width: 70px;
height: 35px;
font-size: 35px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 60px;
color: #393939;
opacity: 1;
margin-bottom: 35px;
width: 70px;
height: 35px;
font-size: 35px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 60px;
color: #393939;
opacity: 1;
margin-bottom: 35px;
}
.el-button {
width: 400px;
height: 58px;
background: rgba(43, 83, 236);
border-radius: 5px;
margin-top: 40px;
width: 400px;
height: 45px;
background: rgba(43, 83, 236);
border-radius: 5px;
margin-top: 40px;
}
.el-checkbox {
color: rgba(43, 83, 236);
color: rgba(43, 83, 236);
}
}
}
</style>

View File

@ -2,14 +2,14 @@
<div>
<div class="cardBox">
<div class="searchBox">
<div class="row">
<div class="row" style="width: 100%;">
<span>统计时间</span>
<el-select v-model="time_type" style="width: 100px;margin-right: 5px;" @change="changeTimeType">
<el-option v-for="item in timeTypeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-date-picker
v-if="time_type == 'day' || time_type == 'week' || time_type == 'seven' || time_type == 'thirty'"
v-if="time_type == 'week' || time_type == 'seven' || time_type == 'thirty'"
v-model="dayValue"
:clearable="false"
type="date"
@ -43,6 +43,21 @@
style="width: 250px;"
@change="changeCustomTime">
</el-date-picker>
<el-time-picker
v-else-if="time_type == 'day'"
is-range
value-format="HH:mm:ss"
style="width: 200px;"
format="HH:mm:ss"
v-model="dayTimeList"
range-separator="至"
:clearable="false"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
@change="changeTimePicker">
</el-time-picker>
<div class="time">
<span>当前统计时间</span>
@ -50,6 +65,16 @@
<span v-else>{{ startTime }}~{{ endTime }}</span>
</div>
</div>
<div class="row">
<span>规格</span>
<el-select v-model="sku_id" filterable remote clearable reserve-keyword placeholder="请选择具体规格" :remote-method="remoteMethod"
:loading="remoteLoading">
<el-option v-for="it in skusList" :key="it.id" :label="it.title" :value="it.id"></el-option>
</el-select>
</div>
<div class="row">
<el-button type="primary" @click="handleSearch()" icon="el-icon-search">筛选</el-button>
</div>
</div>
</div>
@ -61,6 +86,7 @@
<script>
import { getGmvCount } from "@/api/dataCenter.js"
import { getGoodsFilter } from "@/api/goods.js"
import dayjs from 'dayjs'
import * as echarts from 'echarts'
@ -70,7 +96,7 @@ export default {
loading: false,
time_type: 'thirty',
timeTypeList: [
{ label: '自然日', value: 'day' },
{ label: '日', value: 'day' },
{ label: '自然周', value: 'week' },
{ label: '自然月', value: 'month' },
{ label: '近7天', value: 'seven' },
@ -85,7 +111,11 @@ export default {
dateList: [],
Sales: [],
SaleCount: [],
myChart: null
myChart: null,
dayTimeList: [],
sku_id: '',
skusList: [],
remoteLoading: false
}
},
mounted() {
@ -105,7 +135,9 @@ export default {
changeTimeType() {
if(this.time_type == 'day') {
let time = this.getDayTime()
this.dayValue = this.startTime = this.endTime = time
this.startTime = time + ' 00:00:00'
this.endTime = time + ' 23:59:59'
this.dayTimeList = ['00:00:00', '23:59:59']
} else if(this.time_type == 'week') {
this.dayValue = this.endTime = dayjs().format('YYYY-MM-DD')
this.startTime = dayjs(this.getFirstDay(this.dayValue)).format('YYYY-MM-DD')
@ -127,19 +159,47 @@ export default {
},
fetchData() {
this.loading = true
let params = {
type: this.time_type == 'day' ? 1 : 2,
start_day: this.startTime,
end_day: this.endTime
}
let params = {}
if(this.time_type == 'day') {
params.interval = 60
params = {
type: 1,
interval: 60,
start_time: this.startTime,
end_time: this.endTime,
sku_id: this.sku_id || 0
}
} else {
params = {
type: 2,
start_day: this.startTime,
end_day: this.endTime,
sku_id: this.sku_id || 0
}
}
getGmvCount(params).then((res) => {
this.dateList = []
this.Sales = []
this.SaleCount = []
res.data.data.forEach((it) => {
let List = res.data.data
if(this.time_type == 'day') {
List = []
for (let index = 0; index < 24; index++) {
let obj = {
goods_total: 0, goods_total_amount: 0, day: index
}
for (let i = 0; i < res.data.data.length; i++) {
let row = res.data.data[i]
if(index == row.sort_key) {
obj.goods_total = row.goods_total
obj.goods_total_amount = row.goods_total_amount
}
}
obj.day += ':00'
List.push(obj)
}
}
List.forEach((it) => {
this.dateList.push(it.day)
this.Sales.push(it.goods_total)
this.SaleCount.push(it.goods_total_amount)
@ -215,10 +275,10 @@ export default {
this.startTime = dayjs(this.getFirstDay(this.dayValue)).format('YYYY-MM-DD')
} else if(this.time_type == 'seven') {
this.endTime = this.dayValue
this.startTime = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
this.startTime = dayjs(this.dayValue).subtract(7, 'day').format('YYYY-MM-DD')
} else if(this.time_type == 'thirty') {
this.endTime = this.dayValue
this.startTime = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
this.startTime = dayjs(this.dayValue).subtract(30, 'day').format('YYYY-MM-DD')
}
this.fetchData()
},
@ -231,6 +291,26 @@ export default {
this.startTime = this.customValue[0]
this.endTime = this.customValue[1]
this.fetchData()
},
changeTimePicker() {
let time = this.getDayTime()
this.startTime = time + ' ' + this.dayTimeList[0]
this.endTime = time + ' ' + this.dayTimeList[1]
this.fetchData()
},
handleSearch() {
this.fetchData()
},
remoteMethod(query) {
if(query) {
this.remoteLoading = true
getGoodsFilter(query).then((res) => {
this.skusList = res.data.data
this.remoteLoading = false
})
} else {
this.skusList = []
}
}
},
beforeDestroy() {

View File

@ -0,0 +1,312 @@
<template>
<div>
<div class="cardBox">
<div class="searchBox">
<div class="row" style="width: 100%;">
<span>统计时间</span>
<el-select v-model="time_type" style="width: 100px;margin-right: 5px;" @change="changeTimeType">
<el-option v-for="item in timeTypeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-date-picker
v-if="time_type == 'week' || time_type == 'seven' || time_type == 'thirty'"
v-model="dayValue"
:clearable="false"
type="date"
placeholder="选择日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
@change="changeDayTime">
</el-date-picker>
<el-date-picker
v-else-if="time_type == 'month'"
v-model="monthValue"
type="month"
:clearable="false"
format="yyyy-MM"
value-format="yyyy-MM"
placeholder="选择月"
@change="changeMonthTime">
</el-date-picker>
<el-date-picker
v-else-if="time_type == 'custom'"
v-model="customValue"
type="datetimerange"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:clearable="false"
style="width: 250px;"
@change="changeCustomTime">
</el-date-picker>
<el-time-picker
v-else-if="time_type == 'day'"
is-range
value-format="HH:mm:ss"
style="width: 200px;"
format="HH:mm:ss"
v-model="dayTimeList"
range-separator="至"
:clearable="false"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
@change="changeTimePicker">
</el-time-picker>
<div class="time">
<span>当前统计时间</span>
<span v-if="startTime == endTime">{{ startTime }}</span>
<span v-else>{{ startTime }}~{{ endTime }}</span>
</div>
</div>
<div class="row">
<span>规格</span>
<el-select v-model="sku_id" filterable remote clearable reserve-keyword placeholder="请选择具体规格" :remote-method="remoteMethod"
:loading="remoteLoading">
<el-option v-for="it in skusList" :key="it.id" :label="it.title" :value="it.id"></el-option>
</el-select>
</div>
<div class="row">
<el-button type="primary" @click="handleSearch()" icon="el-icon-search">筛选</el-button>
</div>
</div>
</div>
<el-card>
<div class="echartBox" id="myEchart"></div>
</el-card>
</div>
</template>
<script>
import { getLossStatistics } from "@/api/dataCenter.js"
import { getGoodsFilter } from "@/api/goods.js"
import dayjs from 'dayjs'
import * as echarts from 'echarts'
export default {
data() {
return {
loading: false,
time_type: 'thirty',
timeTypeList: [
{ label: '自然周', value: 'week' },
{ label: '自然月', value: 'month' },
{ label: '近7天', value: 'seven' },
{ label: '近30天', value: 'thirty' },
{ label: '自定义', value: 'custom' }
],
dayValue: '',
monthValue: '',
customValue: [],
startTime: '',
endTime: '',
dateList: [],
totalNum: [],
totalAmount: [],
myChart: null,
dayTimeList: [],
sku_id: '',
skusList: [],
remoteLoading: false
}
},
mounted() {
this.getInitList()
window.onresize = () => {
if(this.myChart) {
this.myChart.resize()
}
}
},
methods: {
getInitList() {
this.dayValue = this.endTime = dayjs().format('YYYY-MM-DD')
this.startTime = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
this.fetchData()
},
changeTimeType() {
if(this.time_type == 'week') {
this.dayValue = this.endTime = dayjs().format('YYYY-MM-DD')
this.startTime = dayjs(this.getFirstDay(this.dayValue)).format('YYYY-MM-DD')
} else if(this.time_type == 'month') {
this.monthValue = dayjs().format('YYYY-MM')
this.startTime = this.monthValue + '-01'
this.endTime = this.monthValue + '-' + this.getDaysInMonth(this.monthValue)
} else if(this.time_type == 'seven') {
this.dayValue = this.endTime = dayjs().format('YYYY-MM-DD')
this.startTime = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
} else if(this.time_type == 'thirty') {
this.dayValue = this.endTime = dayjs().format('YYYY-MM-DD')
this.startTime = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
} else if(this.time_type == 'custom') {
this.startTime = this.endTime = dayjs().format('YYYY-MM-DD')
this.customValue = [this.startTime, this.startTime]
}
this.fetchData()
},
fetchData() {
this.loading = true
let params = {
start_time: this.startTime + ' 00:00:00',
end_time: this.endTime + ' 23:59:59',
sku_id: this.sku_id || 0
}
getLossStatistics(params).then((res) => {
this.dateList = []
this.totalNum = []
this.totalAmount = []
res.data.data.forEach((it) => {
this.dateList.push(it.date)
this.totalNum.push(it.total_num)
this.totalAmount.push(it.total_loss_amount)
})
this.renderChart()
}).catch(() => {
this.loading = false
})
},
renderChart() {
this.myChart = echarts.init(document.getElementById('myEchart'))
this.myChart.setOption({
grid: {
left: '1%',
bottom: '2%',
containLabel: true
},
color: ['#3cd08f', '#f89f34'],
tooltip: {
trigger: 'axis'
},
legend: {
icon: 'rect',
left: 30,
data: ['报损数', '报损金额']
},
xAxis: {
type: 'category',
data: this.dateList
},
yAxis: {
type: 'value'
},
series: [
{
name: '报损数',
type: 'line',
smooth: true,
data: this.totalNum,
},
{
name: '报损金额',
type: 'line',
smooth: true,
data: this.totalAmount
}
]
})
this.loading = false
},
//
getDayTime() {
let time = dayjs().format('YYYY-MM-DD')
return time
},
//
getFirstDay(date) {
let day = new Date(date).getDay() || 7
return new Date(new Date(date).getFullYear(), new Date(date).getMonth(), new Date(date).getDate() + 1 - day)
},
getDaysInMonth(date) {
let year = date.split('-')[0] * 1
let month = date.split('-')[1] * 1
const startOfMonth = dayjs(new Date(year, month - 1, 1))
const endOfMonth = startOfMonth.endOf('month')
return endOfMonth.date()
},
changeDayTime() {
if(this.time_type == 'day') {
this.startTime = this.endTime = this.dayValue
} else if(this.time_type == 'week') {
this.endTime = this.dayValue
this.startTime = dayjs(this.getFirstDay(this.dayValue)).format('YYYY-MM-DD')
} else if(this.time_type == 'seven') {
this.endTime = this.dayValue
this.startTime = dayjs(this.dayValue).subtract(7, 'day').format('YYYY-MM-DD')
} else if(this.time_type == 'thirty') {
this.endTime = this.dayValue
this.startTime = dayjs(this.dayValue).subtract(30, 'day').format('YYYY-MM-DD')
}
this.fetchData()
},
changeMonthTime() {
this.startTime = this.monthValue + '-01'
this.endTime = this.monthValue + '-' + this.getDaysInMonth(this.monthValue)
this.fetchData()
},
changeCustomTime() {
this.startTime = this.customValue[0]
this.endTime = this.customValue[1]
this.fetchData()
},
changeTimePicker() {
let time = this.getDayTime()
this.startTime = time + ' ' + this.dayTimeList[0]
this.endTime = time + ' ' + this.dayTimeList[1]
this.fetchData()
},
handleSearch() {
this.fetchData()
},
remoteMethod(query) {
if(query) {
this.remoteLoading = true
getGoodsFilter(query).then((res) => {
this.skusList = res.data.data
this.remoteLoading = false
})
} else {
this.skusList = []
}
}
},
beforeDestroy() {
if (!this.myChart) {
return
}
this.myChart.dispose()
this.myChart = null
}
}
</script>
<style scoped lang="scss">
.searchBox{
display: flex;
align-items: center;
flex-wrap: wrap;
white-space: nowrap;
.row{
font-size: 14px;
margin-bottom: 20px;
margin-right: 15px;
display: flex;
align-items: center;
}
.time{
margin-left: 20px;
color: #999;
font-size: 12px;
}
}
.echartBox{
width: 100%;
height: 480px;
}
</style>

View File

@ -2,14 +2,14 @@
<div>
<div class="cardBox">
<div class="searchBox">
<div class="row">
<div class="row" style="width: 100%;">
<span>统计时间</span>
<el-select v-model="time_type" style="width: 100px;margin-right: 5px;" @change="changeTimeType">
<el-option v-for="item in timeTypeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-date-picker
v-if="time_type == 'day' || time_type == 'week' || time_type == 'seven' || time_type == 'thirty'"
v-if="time_type == 'week' || time_type == 'seven' || time_type == 'thirty'"
v-model="dayValue"
:clearable="false"
type="date"
@ -43,6 +43,21 @@
style="width: 250px;"
@change="changeCustomTime">
</el-date-picker>
<el-time-picker
v-else-if="time_type == 'day'"
is-range
value-format="HH:mm:ss"
style="width: 200px;"
format="HH:mm:ss"
v-model="dayTimeList"
range-separator="至"
:clearable="false"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
@change="changeTimePicker">
</el-time-picker>
<div class="time">
<span>当前统计时间</span>
@ -50,6 +65,16 @@
<span v-else>{{ startTime }}~{{ endTime }}</span>
</div>
</div>
<div class="row">
<span>规格</span>
<el-select v-model="sku_id" filterable remote clearable reserve-keyword placeholder="请选择具体规格" :remote-method="remoteMethod"
:loading="remoteLoading">
<el-option v-for="it in skusList" :key="it.id" :label="it.title" :value="it.id"></el-option>
</el-select>
</div>
<div class="row">
<el-button type="primary" @click="handleSearch()" icon="el-icon-search">筛选</el-button>
</div>
</div>
</div>
@ -59,8 +84,7 @@
</div>
<el-table v-loading="loading" border :data="saleList">
<el-table-column label="商品名称" prop="name"></el-table-column>
<el-table-column label="sku规格" prop="title"></el-table-column>
<el-table-column label="规格编码" prop="external_sku_id"></el-table-column>
<el-table-column label="商品编码" prop="external_sku_id"></el-table-column>
<el-table-column label="销量" prop="goods_total"></el-table-column>
<el-table-column label="销售额" prop="goods_total_amount"></el-table-column>
@ -91,6 +115,7 @@
<script>
import { getSkuSalesCount } from "@/api/dataCenter.js"
import { getGoodsFilter } from "@/api/goods.js"
import dayjs from 'dayjs'
export default {
@ -99,7 +124,7 @@ export default {
loading: false,
time_type: 'day',
timeTypeList: [
{ label: '自然日', value: 'day' },
{ label: '日', value: 'day' },
{ label: '自然周', value: 'week' },
{ label: '自然月', value: 'month' },
{ label: '近7天', value: 'seven' },
@ -107,7 +132,7 @@ export default {
{ label: '自定义', value: 'custom' }
],
TIMETYPE: {
'day': '自然日',
'day': '日',
'week': '自然周',
'month': '自然月',
'seven': '近7天',
@ -125,7 +150,11 @@ export default {
saleList: [],
downloadLoading: false,
autoWidth: true,
bookType: 'xlsx'
bookType: 'xlsx',
dayTimeList: [],
sku_id: '',
skusList: [],
remoteLoading: false
}
},
mounted() {
@ -134,13 +163,17 @@ export default {
methods: {
getInitList() {
let time = this.getDayTime()
this.dayValue = this.startTime = this.endTime = time
this.startTime = time + ' 00:00:00'
this.endTime = time + ' 23:59:59'
this.dayTimeList = ['00:00:00', '23:59:59']
this.fetchData()
},
changeTimeType() {
if(this.time_type == 'day') {
let time = this.getDayTime()
this.dayValue = this.startTime = this.endTime = time
this.startTime = time + ' 00:00:00'
this.endTime = time + ' 23:59:59'
this.dayTimeList = ['00:00:00', '23:59:59']
} else if(this.time_type == 'week') {
this.dayValue = this.endTime = dayjs().format('YYYY-MM-DD')
this.startTime = dayjs(this.getFirstDay(this.dayValue)).format('YYYY-MM-DD')
@ -165,10 +198,16 @@ export default {
this.loading = true
let params = {
type: this.time_type == 'day' ? 1 : 2,
start_day: this.startTime,
end_day: this.endTime,
page: this.page,
per_page: this.pageSize
per_page: this.pageSize,
sku_id: this.sku_id
}
if(params.type == 1) {
params.start_time = this.startTime
params.end_time = this.endTime
} else {
params.start_day = this.startTime
params.end_day = this.endTime
}
getSkuSalesCount(params).then((res) => {
this.saleList = res.data.data.data
@ -203,10 +242,10 @@ export default {
this.startTime = dayjs(this.getFirstDay(this.dayValue)).format('YYYY-MM-DD')
} else if(this.time_type == 'seven') {
this.endTime = this.dayValue
this.startTime = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
this.startTime = dayjs(this.dayValue).subtract(7, 'day').format('YYYY-MM-DD')
} else if(this.time_type == 'thirty') {
this.endTime = this.dayValue
this.startTime = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
this.startTime = dayjs(this.dayValue).subtract(30, 'day').format('YYYY-MM-DD')
}
this.page = 1
this.fetchData()
@ -223,6 +262,13 @@ export default {
this.page = 1
this.fetchData()
},
changeTimePicker() {
let time = this.getDayTime()
this.startTime = time + ' ' + this.dayTimeList[0]
this.endTime = time + ' ' + this.dayTimeList[1]
this.page = 1
this.fetchData()
},
handleSizeChange(val) {
this.page = 1
this.pageSize = val
@ -232,6 +278,10 @@ export default {
this.page = val
this.fetchData()
},
handleSearch() {
this.page = 1
this.fetchData()
},
handleExport() {
this.downloadLoading = true
let params = {
@ -251,11 +301,11 @@ export default {
return
}
import('@/util/Export2Excel').then(excel => {
const tHeader = ['商品名称', 'sku规格', '规格编码', '销量', '销售额', '库存', '可售库存', '状态']
const filterVal = ['name', 'title', 'external_sku_id', 'goods_total', 'goods_total_amount', 'stock', 'sale_stock', 'status']
const tHeader = ['商品名称', '商品编码', '销量', '销售额', '库存', '可售库存', '状态']
const filterVal = ['name', 'external_sku_id', 'goods_total', 'goods_total_amount', 'stock', 'sale_stock', 'status']
if(this.time_type == 'day') {
tHeader.splice(5, 0, '昨日销量', '3日内销量', '7日内销量', '已发货数', '未发货数')
filterVal.splice(5, 0, 'yesterday_avg_num', 'three_day_avg_num', 'seven_day_avg_num', 'shipping_num', 'unshipping_num')
tHeader.splice(4, 0, '昨日销量', '3日内销量', '7日内销量', '已发货数', '未发货数')
filterVal.splice(4, 0, 'yesterday_avg_num', 'three_day_avg_num', 'seven_day_avg_num', 'shipping_num', 'unshipping_num')
}
const list = res.data.data.data
const data = this.formatJson(filterVal, list)
@ -279,6 +329,17 @@ export default {
return jsonData.map(v => filterVal.map(j => {
return v[j]
}))
},
remoteMethod(query) {
if(query) {
this.remoteLoading = true
getGoodsFilter(query).then((res) => {
this.skusList = res.data.data
this.remoteLoading = false
})
} else {
this.skusList = []
}
}
}
}

View File

@ -2,14 +2,14 @@
<div>
<div class="cardBox">
<div class="searchBox">
<div class="row">
<div class="row" style="width: 100%;">
<span>统计时间</span>
<el-select v-model="time_type" style="width: 100px;margin-right: 5px;" @change="changeTimeType">
<el-option v-for="item in timeTypeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-date-picker
v-if="time_type == 'day' || time_type == 'week' || time_type == 'seven' || time_type == 'thirty'"
v-if="time_type == 'week' || time_type == 'seven' || time_type == 'thirty'"
v-model="dayValue"
:clearable="false"
type="date"
@ -43,6 +43,21 @@
style="width: 250px;"
@change="changeCustomTime">
</el-date-picker>
<el-time-picker
v-else-if="time_type == 'day'"
is-range
value-format="HH:mm:ss"
style="width: 200px;"
format="HH:mm:ss"
v-model="dayTimeList"
range-separator="至"
:clearable="false"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
@change="changeTimePicker">
</el-time-picker>
<div class="time">
<span>当前统计时间</span>
@ -50,6 +65,16 @@
<span v-else>{{ startTime }}~{{ endTime }}</span>
</div>
</div>
<div class="row">
<span>规格</span>
<el-select v-model="sku_id" filterable remote clearable reserve-keyword placeholder="请选择具体规格" :remote-method="remoteMethod"
:loading="remoteLoading">
<el-option v-for="it in skusList" :key="it.id" :label="it.title" :value="it.id"></el-option>
</el-select>
</div>
<div class="row">
<el-button type="primary" @click="handleSearch()" icon="el-icon-search">筛选</el-button>
</div>
</div>
</div>
@ -74,6 +99,7 @@
<script>
import { getSpuSalesCount } from "@/api/dataCenter.js"
import { getGoodsFilter } from "@/api/goods.js"
import dayjs from 'dayjs'
export default {
@ -82,7 +108,7 @@ export default {
loading: false,
time_type: 'day',
timeTypeList: [
{ label: '自然日', value: 'day' },
{ label: '日', value: 'day' },
{ label: '自然周', value: 'week' },
{ label: '自然月', value: 'month' },
{ label: '近7天', value: 'seven' },
@ -90,7 +116,7 @@ export default {
{ label: '自定义', value: 'custom' }
],
TIMETYPE: {
'day': '自然日',
'day': '日',
'week': '自然周',
'month': '自然月',
'seven': '近7天',
@ -105,7 +131,11 @@ export default {
saleList: [],
downloadLoading: false,
autoWidth: true,
bookType: 'xlsx'
bookType: 'xlsx',
dayTimeList: [],
sku_id: '',
skusList: [],
remoteLoading: false
}
},
mounted() {
@ -114,13 +144,17 @@ export default {
methods: {
getInitList() {
let time = this.getDayTime()
this.dayValue = this.startTime = this.endTime = time
this.startTime = time + ' 00:00:00'
this.endTime = time + ' 23:59:59'
this.dayTimeList = ['00:00:00', '23:59:59']
this.fetchData()
},
changeTimeType() {
if(this.time_type == 'day') {
let time = this.getDayTime()
this.dayValue = this.startTime = this.endTime = time
this.startTime = time + ' 00:00:00'
this.endTime = time + ' 23:59:59'
this.dayTimeList = ['00:00:00', '23:59:59']
} else if(this.time_type == 'week') {
this.dayValue = this.endTime = dayjs().format('YYYY-MM-DD')
this.startTime = dayjs(this.getFirstDay(this.dayValue)).format('YYYY-MM-DD')
@ -144,8 +178,14 @@ export default {
this.loading = true
let params = {
type: this.time_type == 'day' ? 1 : 2,
start_day: this.startTime,
end_day: this.endTime
sku_id: this.sku_id
}
if(params.type == 1) {
params.start_time = this.startTime
params.end_time = this.endTime
} else {
params.start_day = this.startTime
params.end_day = this.endTime
}
getSpuSalesCount(params).then((res) => {
this.saleList = res.data.data
@ -173,16 +213,19 @@ export default {
},
changeDayTime() {
if(this.time_type == 'day') {
this.startTime = this.endTime = this.dayValue
let time = this.getDayTime()
this.startTime = time + ' 00:00:00'
this.endTime = time + ' 23:59:59'
this.dayTimeList = ['00:00:00', '23:59:59']
} else if(this.time_type == 'week') {
this.endTime = this.dayValue
this.startTime = dayjs(this.getFirstDay(this.dayValue)).format('YYYY-MM-DD')
} else if(this.time_type == 'seven') {
this.endTime = this.dayValue
this.startTime = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
this.startTime = dayjs(this.dayValue).subtract(7, 'day').format('YYYY-MM-DD')
} else if(this.time_type == 'thirty') {
this.endTime = this.dayValue
this.startTime = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
this.startTime = dayjs(this.dayValue).subtract(30, 'day').format('YYYY-MM-DD')
}
this.fetchData()
},
@ -196,6 +239,15 @@ export default {
this.endTime = this.customValue[1]
this.fetchData()
},
changeTimePicker() {
let time = this.getDayTime()
this.startTime = time + ' ' + this.dayTimeList[0]
this.endTime = time + ' ' + this.dayTimeList[1]
this.fetchData()
},
handleSearch() {
this.fetchData()
},
handleExport() {
if(!this.saleList.length) {
this.$message({
@ -232,6 +284,17 @@ export default {
return jsonData.map(v => filterVal.map(j => {
return v[j]
}))
},
remoteMethod(query) {
if(query) {
this.remoteLoading = true
getGoodsFilter(query).then((res) => {
this.skusList = res.data.data
this.remoteLoading = false
})
} else {
this.skusList = []
}
}
}
}

View File

@ -1,307 +1,309 @@
<template>
<div>
<el-card class="box-card">
<!-- 新增商品进入显示 -->
<el-form ref="form" :inline="true" :model="form">
<div>
<el-form-item label="商品列表:">
<el-select v-model="lid" placeholder="选择商品" @change="onchange" filterable>
<el-option v-for="item in goodschoose" :key="item.id" :label="item.title" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</div>
<div>
<el-form-item label="商品图片:">
<el-image v-if="disabled" style="width: 148px; height: 148px" :src="form.img_url" fit="cover">
</el-image>
<el-upload v-else class="avatar-uploader" action="#" :limit="1" :auto-upload="false"
:show-file-list="false" list-type="picture-card" :on-change="handleAvatarSuccess">
<img v-if="form.img_url" :src="form.img_url" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</div>
<div>
<el-form-item label="商品名称:">
<el-input placeholder="商品名称" v-model="form.title" :disabled="disabled"></el-input>
</el-form-item>
<el-form-item label="商品编码:">
<el-input placeholder="商品编码" v-model="form.goods_code" :disabled="disabled"></el-input>
</el-form-item>
<el-form-item label="商品种类:">
<!-- <el-select v-model="form.type_id" placeholder="商品种类" filterable :disabled="disabled">
<el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select> -->
<treeselect
:options="treeList"
placeholder="请选择分类"
style="width: 250px;"
v-model="form.type_id" />
</el-form-item>
<!-- <el-form-item label="商品品牌:">
<el-select v-model="form.brand_id" placeholder="商品品牌" filterable :disabled="disabled">
<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item> -->
</div>
<div v-for="(item, i) in skus" :key="i" class="skuBox">
<div class="tit">规格{{ i + 1 }}</div>
<el-form-item label="商品规格:">
<el-input placeholder="商品规格" v-model="skus[i].title"></el-input>
</el-form-item>
<el-form-item label="规格编码:">
<el-input v-model="skus[i].sku_code" placeholder="商品编码">
</el-input>
</el-form-item>
<el-form-item label="商品状态:">
<el-select v-model="skus[i].reserve" placeholder="下架(默认)">
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<div>
<el-form-item label="商品数量:">
<el-input v-model="skus[i].num" placeholder="商品数量">
</el-input>
</el-form-item>
<el-form-item label="商品成本:">
<el-input v-model="skus[i].cost" placeholder="商品成本">
</el-input>
</el-form-item>
<el-form-item label="在售库存:">
<el-input v-model="skus[i].sale_stock" placeholder="在售库存">
</el-input>
</el-form-item>
<el-button type="danger" @click="handleDelete(i)">删除</el-button>
</div>
</div>
<el-card class="box-card">
<!-- 新增商品进入显示 -->
<el-form ref="form" :inline="true" :model="form">
<!-- <div>
<el-form-item label="商品列表:">
<el-select v-model="lid" placeholder="选择商品" @change="onchange" filterable>
<el-option v-for="item in goodschoose" :key="item.id" :label="item.title" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</div>
<div>
<el-form-item label="商品图片:">
<el-image v-if="disabled" style="width: 148px; height: 148px" :src="form.img_url" fit="cover">
</el-image>
<el-upload v-else class="avatar-uploader" action="#" :limit="1" :auto-upload="false"
:show-file-list="false" list-type="picture-card" :on-change="handleAvatarSuccess">
<img v-if="form.img_url" :src="form.img_url" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</div> -->
<div>
<!-- <el-form-item label="商品名称:">
<el-input placeholder="商品名称" v-model="form.title" :disabled="disabled"></el-input>
</el-form-item>
<el-form-item label="商品编码:">
<el-input placeholder="商品编码" v-model="form.goods_code" :disabled="disabled"></el-input>
</el-form-item> -->
<el-form-item label="商品品种:">
<treeselect
:options="treeList"
style="width: 200px;"
:disable-branch-nodes="true"
:show-count="true"
:normalizer="normalizer"
placeholder="请选择品种"
v-model="form.type_id" />
</el-form-item>
<!-- <el-form-item label="商品品牌:">
<el-select v-model="form.brand_id" placeholder="商品品牌" filterable :disabled="disabled">
<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item> -->
</div>
<div v-for="(item, i) in skus" :key="i" class="skuBox">
<div class="tit">规格{{ i + 1 }}</div>
<el-form-item label="商品规格:">
<el-input placeholder="商品规格" v-model="item.title"></el-input>
</el-form-item>
<el-form-item label="规格编码:">
<el-input v-model="item.sku_code" placeholder="商品编码"></el-input>
</el-form-item>
<el-form-item label="商品状态:">
<el-select v-model="item.reserve" placeholder="下架(默认)">
<el-option v-for="it in options" :key="it.id" :label="it.label" :value="it.id">
</el-option>
</el-select>
</el-form-item>
<div>
<!-- <el-form-item label="商品数量:">
<el-input v-model="item.num" placeholder="商品数量">
</el-input>
</el-form-item> -->
<el-form-item label="商品成本:">
<el-input v-model="item.cost" placeholder="商品成本">
</el-input>
</el-form-item>
<el-form-item label="在售库存:">
<el-input v-model="item.sale_stock" placeholder="在售库存">
</el-input>
</el-form-item>
<el-button type="danger" @click="handleDelete(i)" icon="el-icon-delete">删除</el-button>
</div>
</div>
<el-form-item>
<el-button type="success" @click="handleAdd()">增加规格</el-button>
</el-form-item>
<div style="margin-top: 30px;">
<el-form-item>
<el-button type="primary" @click="handleSave()">保存</el-button>
<el-button plain @click="cancel()">取消</el-button>
</el-form-item>
</div>
</el-form>
</el-card>
</div>
<el-form-item>
<el-button type="success" @click="handleAdd()" icon="el-icon-plus">增加规格</el-button>
</el-form-item>
<div style="margin-top: 30px;">
<el-form-item>
<el-button type="primary" @click="handleSave()">保存</el-button>
<el-button plain @click="cancel()">取消</el-button>
</el-form-item>
</div>
</el-form>
</el-card>
</template>
<script>
import { addGoods, goodsList, imgUpload } from '@/api/goods.js'
import { goods_types, Brand_goods_types } from '@/api/rankingData.js'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { addGoods, goodsList, imgUpload } from '@/api/goods.js'
import { goods_types, Brand_goods_types } from '@/api/rankingData.js'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
export default {
components: { Treeselect },
data() {
return {
lid: "",
gid: "",
brandList: [],
treeList: [],
goodschoose: [],
//
skus: [],
//
form: {
goods_id: "",
title: "",
img_url: "",
type_id: null, // Treeselectnull
brand_id: "",
goods_code: "",
},
//
options: [
{
id: "0",
label: "下架",
},
{
id: "1",
label: "在售",
},
{
id: "2",
label: "预警",
},
],
file: [],
disabled: false
}
return {
lid: "",
gid: "",
brandList: [],
treeList: [],
goodschoose: [],
//
skus: [],
//
form: {
goods_id: "",
title: "",
img_url: "",
type_id: null, // Treeselectnull
brand_id: "",
goods_code: "",
},
//
options: [
{
id: "0",
label: "下架",
},
{
id: "1",
label: "在售",
},
{
id: "2",
label: "预警",
},
],
file: [],
disabled: false
}
},
mounted() {
this.getGoods_types()
this.getGoodsBrand()
this.handleList()
this.handleAdd()
this.getGoods_types()
this.getGoodsBrand()
this.handleList()
this.handleAdd()
},
watch: {
lid: {
handler(newVal, oldVal) {
if (newVal) {
this.goodschoose.forEach((item) => {
if (item.id == newVal) {
this.form = { ...item };
}
});
}
},
deep: true, //
immediate: true, //
lid: {
handler(newVal, oldVal) {
if (newVal) {
this.goodschoose.forEach((item) => {
if (item.id == newVal) {
this.form = { ...item };
}
});
}
},
deep: true, //
immediate: true, //
},
},
methods: {
getGoods_types() {
let params = {
parent_id: 0
}
goods_types(params).then((res) => {
this.treeList = JSON.parse(JSON.stringify(res.data.data).replace(/name/g, "label"))
})
},
getGoodsBrand() {
Brand_goods_types({per_page: 999}).then((res) => {
this.brandList = res.data.data
})
},
//
handleAvatarSuccess(res, files) {
let formData = new FormData();
files.forEach((file) => {
formData.append("uploadFile", file.raw); //
getGoods_types() {
let params = {
parent_id: 0
}
goods_types(params).then((res) => {
this.treeList = JSON.parse(JSON.stringify(res.data.data).replace(/name/g, "label"))
})
},
getGoodsBrand() {
Brand_goods_types({per_page: 999}).then((res) => {
this.brandList = res.data.data
})
},
//
handleAvatarSuccess(res, files) {
let formData = new FormData();
files.forEach((file) => {
formData.append("uploadFile", file.raw); //
});
let requestConfig = {
headers: {
"Content-Type": "multipart/form-data",
},
};
imgUpload(formData, requestConfig).then((res) => {
this.form.img_url = res.data.resource;
});
},
//
handleList() {
goodsList().then((res) => {
this.goodschoose = res.data.data;
this.goodschoose = [
{
title: "",
id: "",
},
...this.goodschoose,
];
});
},
//
handleSave() {
const goods = this.form;
const skus = this.skus;
const updata = {
...goods,
goods_id: this.lid,
skus: skus
}
updata.type_id = updata.type_id || ''
addGoods(updata).then((res) => {
if (res.statusText === "OK") {
this.$message({
message: "商品添加成功!",
type: "success",
});
let requestConfig = {
headers: {
"Content-Type": "multipart/form-data",
},
};
imgUpload(formData, requestConfig).then((res) => {
this.form.img_url = res.data.resource;
});
},
//
handleList() {
goodsList().then((res) => {
this.goodschoose = res.data.data;
this.goodschoose = [
{
title: "",
id: "",
},
...this.goodschoose,
];
});
},
//
handleSave() {
const goods = this.form;
const skus = this.skus;
const updata = {
...goods,
goods_id: this.lid,
skus: skus
}
updata.type_id = updata.type_id || ''
addGoods(updata).then((res) => {
if (res.statusText === "OK") {
this.$message({
message: "商品添加成功!",
type: "success",
});
this.$router.push("/GOODS_LIST");
}
})
},
//
handleAdd() {
let sku = {
title: "",
sku_code: "",
status: "0",
num: "0",
cost: "0",
sale_stock: 0,
reserve: "0",
};
this.skus.push(sku);
},
//
handleDelete(index) {
this.skus.splice(index, 1);
},
//
cancel() {
this.$router.push("/GOODS_LIST");
},
onchange(value) {
this.disabled = value !== "";
if (!this.disabled) {
this.disabled = false;
this.form = {};
}
},
}
})
},
//
handleAdd() {
let sku = {
title: "",
sku_code: "",
status: "0",
num: "0",
cost: "0",
sale_stock: 0,
reserve: "0",
};
this.skus.push(sku);
},
//
handleDelete(index) {
this.skus.splice(index, 1);
},
//
cancel() {
this.$router.push("/GOODS_LIST");
},
onchange(value) {
this.disabled = value !== "";
if (!this.disabled) {
this.disabled = false;
this.form = {};
}
},
normalizer(node) {
if ((!node.children || (node.children && node.children.length == 0)) && node.level == 1) {
node.isDisabled = true
}
return node
}
},
};
};
</script>
<style scoped lang="scss">
.skuBox{
.skuBox{
border: 1px solid #e5e5e5;
border-radius: 5px;
padding: 15px 0;
margin-bottom: 15px;
background-color: #f3f3f3;
.tit{
padding-left: 40px;
font-weight: 600;
font-size: 15px;
margin-bottom: 15px;
padding-left: 40px;
font-weight: 600;
font-size: 15px;
margin-bottom: 15px;
}
}
.el-upload--picture-card {
}
.el-upload--picture-card {
width: 50px;
height: 50px;
}
}
.el-form-item {
.el-form-item {
margin-left: 40px;
}
}
/* 分割 */
.avatar-uploader .el-upload {
/* 分割 */
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
}
.avatar-uploader .el-upload:hover {
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
}
.avatar-uploader-icon {
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 148px;
height: 148px;
line-height: 148px;
text-align: center;
}
}
.avatar {
.avatar {
width: 148px;
height: 148px;
display: block;
}
}
</style>

View File

@ -89,9 +89,7 @@
]">
<el-input v-model="dynamicValidateForm.title"></el-input>
</el-form-item>
<el-form-item label="商品编码" prop="external_sku_id" :rules="[
{ required: true, message: '请输入商品编码', trigger: 'blur' },
]">
<el-form-item label="商品编码" prop="external_sku_id">
<el-input v-model="dynamicValidateForm.external_sku_id"></el-input>
</el-form-item>
<el-form-item v-for="(item, index) in dynamicValidateForm.combination_goods" :label="'子商品' + index"

View File

@ -29,8 +29,9 @@
<el-form-item label="商品种类:">
<treeselect
:options="treeList"
placeholder="请选择分类"
style="width: 216px;"
style="width: 200px;"
:disable-branch-nodes="true"
placeholder="请选择品种"
v-model="goodsData.goods.type_id" />
</el-form-item>
<!-- <el-form-item label="商品品牌:">
@ -55,10 +56,10 @@
</el-select>
</el-form-item>
<div>
<el-form-item label="商品数量:">
<!-- <el-form-item label="商品数量:">
<el-input v-model="goodsData.num" placeholder="商品数量">
</el-input>
</el-form-item>
</el-form-item> -->
<el-form-item label="商品成本:">
<el-input v-model="goodsData.cost" placeholder="商品成本">
</el-input>

View File

@ -8,11 +8,14 @@
<el-input v-model="form.goods_title" placeholder="商品名称" clearable></el-input>
</div>
<div class="row">
<span>商品</span>
<span>商品</span>
<treeselect
:options="treeList"
placeholder="请选择分类"
style="width: 220px;"
style="width: 200px;"
:disable-branch-nodes="true"
:show-count="true"
:normalizer="normalizer"
placeholder="请选择品种"
v-model="form.type_id" />
</div>
<!-- <div class="row">
@ -58,7 +61,7 @@
<span>&nbsp;玫瑰合计: {{ rose_num }}</span>
<span>&nbsp;其它合计: {{ other_num }}</span>
<div class="btn">
<el-button @click="resetOrderCount" icon="el-icon-refresh">订单重置</el-button>
<!-- <el-button @click="resetOrderCount" icon="el-icon-refresh">订单重置</el-button> -->
<!-- <el-button type="primary" plain @click="update">上新</el-button> -->
<!-- <el-upload ref="newset" action="/api/new/set/goods_skus" :multiple="false" name="newSetFile"
:show-file-list="false" :on-success="inventorySuccess" :before-upload="beforeInventory"
@ -71,8 +74,9 @@
style="display:inline-block;margin: 0 10px 0 10px;">
<el-button type="primary" plain>盘点导入</el-button>
</el-upload> -->
<el-button type="primary" @click="addNewgoods" icon="el-icon-plus">新增商品</el-button>
<el-button type="primary" plain @click="handleImport" icon="el-icon-upload2">导入商品</el-button>
<el-button type="primary" @click="petchEditStock" icon="el-icon-edit" :disabled="!chooseList.length">批量更新在售库存</el-button>
<el-button type="primary" v-if="is_admin" @click="addNewgoods" icon="el-icon-plus">新增商品</el-button>
<el-button type="primary" v-if="is_admin" plain @click="handleImport" icon="el-icon-upload2">导入商品</el-button>
<el-button type="warning" @click="handleExport" icon="el-icon-download">表格导出</el-button>
<!-- <el-button type="primary" plain @click="onCount">库存盘点</el-button> -->
</div>
@ -95,12 +99,12 @@
</div>
</template>
</el-table-column>
<el-table-column label="品类">
<el-table-column label="品类" align="center">
<template slot-scope="scope">
<div>{{ scope.row.goods && scope.row.goods.type && scope.row.goods.type.name || '' }}</div>
</template>
</el-table-column>
<el-table-column label="规格" prop="title"></el-table-column>
<!-- <el-table-column label="规格" prop="title"></el-table-column> -->
<!-- <el-table-column label="品牌">
<template slot-scope="scope">
<div>{{ scope.row.goods && scope.row.goods.brand && scope.row.goods.brand.name || '' }}</div>
@ -119,7 +123,7 @@
</template>
</el-table-column> -->
<el-table-column prop="cost" sortable label="成本">
<el-table-column prop="cost" sortable label="成本" align="center">
<template slot-scope="scope">
<div class="flex">
<div v-if="isShow">
@ -148,7 +152,7 @@
</el-table-column> -->
<!-- <el-table-column prop="num" sortable label="总量">
</el-table-column> -->
<el-table-column prop="goal_rate" sortable label="目标去化率">
<!-- <el-table-column prop="goal_rate" sortable label="目标去化率">
<template slot-scope="scope">
<div class="flex">
<div v-if="scope.row.id === editGoalId">
@ -159,7 +163,7 @@
<i class="el-icon-edit" @click="onGoal(scope.row)" style="padding-left: 5px;"></i>
</div>
</template>
</el-table-column>
</el-table-column> -->
<!-- <el-table-column prop="reserve" sortable label="预留">
<template slot-scope="scope">
@ -172,7 +176,7 @@
</template>
</el-table-column> -->
<el-table-column sortable label="销量">
<el-table-column sortable label="销量" align="center">
<template slot-scope="scope">
<span>{{ scope.row.order_goods_num }}</span>
<el-popover placement="right-start" trigger="hover"
@ -220,8 +224,34 @@
</template>
</el-table-column> -->
<el-table-column prop="stock" sortable label="库存"></el-table-column>
<el-table-column prop="sale_stock" label="在售库存"></el-table-column>
<el-table-column prop="stock" sortable label="库存" align="center"></el-table-column>
<el-table-column prop="sale_stock" label="在售库存">
<template slot-scope="scope">
<div class="titBox" v-if="scope.row.edit">
<el-input v-model="scope.row.sale_stock" placeholder="在售库存" size="mini" style="width: 100%;"></el-input>
<span @click="cancelEdit(scope.row, scope.$index)" style="color: #666;cursor: pointer;font-size: 18px;margin-left: 5px;"><i class="el-icon-close"></i></span>
<span @click="confirmEdit(scope.row, scope.$index)" style="color: #409eff;cursor: pointer;font-size: 18px;margin-left: 5px;"><i class="el-icon-check"></i></span>
</div>
<div v-else>{{scope.row.sale_stock}}
<span style="color: #409eff;margin-left: 5px;cursor: pointer;font-size: 15px;"
@click="showEdit(scope.row, scope.$index)">
<i class="el-icon-edit"></i>
</span>
</div>
</template>
</el-table-column>
<el-table-column align="center">
<template slot="header" slot-scope="scope">
<span>销存比例</span>
<el-tooltip class="item" effect="dark" content="当前库存/当天7点盘点的库存" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</template>
<template slot-scope="scope">
<span :class="scope.row.sale_ratio * 1 < 20 ? 'red' : ''">{{ scope.row.sale_ratio }}%</span>
</template>
</el-table-column>
<!-- <el-table-column prop="address" sortable label="盘点">
<template slot-scope="scope">
@ -236,12 +266,12 @@
</template>
</el-table-column> -->
<el-table-column prop="status" label="状态"> </el-table-column>
<el-table-column prop="status" label="状态" align="center"></el-table-column>
<el-table-column label="操作" align="center" width="120">
<template slot-scope="scope">
<div style="text-align: center;width: 100%;">
<!-- <el-button type="text" @click="ejectstock(scope.row)">库存</el-button> -->
<el-button type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
<el-button type="text" v-if="is_admin" @click="handleEdit(scope.row.id)">编辑</el-button>
<el-button type="text" @click="goodslog(scope.row)">记录</el-button>
<!-- <el-button type="text" @click="deleteSku(scope.row)">删除</el-button> -->
</div>
@ -257,9 +287,9 @@
</div>
<!-- 分页功能 -->
<div class="page">
<div class="page-pagination">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="current_page" :page-sizes="[100, 150, 200]" :page-size="per_page"
:current-page="current_page" :page-sizes="[10, 30, 50, 100, 200]" :page-size="per_page"
layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
</el-pagination>
</div>
@ -267,8 +297,7 @@
<!-- 点击库存按钮弹出框 -->
<el-dialog title="库存修改" :visible.sync="ejectstock1" width="30%" :close-on-click-modal="false">
<el-table :data="ommodityInventory" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table :data="ommodityInventory" tooltip-effect="dark" style="width: 100%">
<el-table-column prop="two_days_ago_num" label="2天前库存">
<template slot-scope="scope">
<div>
@ -372,13 +401,41 @@
</el-button>
</div>
</el-dialog>
<el-dialog title="在售库存" :visible.sync="showUpdate" width="600px">
<div class="">
<el-table :data="chooseList" border style="width: 100%">
<el-table-column label="商品信息">
<template slot-scope="scope">
<div class="goodBox flex">
<img v-if="scope.row.goods && scope.row.goods.img_url" :src="scope.row.goods.img_url" class="Img" />
<div>
<div class="tit">{{ scope.row.name }}</div>
<p>{{ scope.row.external_sku_id }}</p>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="在售库存" width="200">
<template slot-scope="scope">
<el-input v-model="scope.row.sale_stock"></el-input>
</template>
</el-table-column>
</el-table>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="showUpdate = false"> </el-button>
<el-button type="primary" @click="commitPetchStock()" :loading="commitLoading"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios'
import { goods_types, Brand_goods_types } from '@/api/rankingData.js'
import { goods, update, singleUpdate, getStockNum } from '@/api/goods'
import { goods, update, singleUpdate, getStockNum, updateSaleStock } from '@/api/goods'
import { orderRest } from "@/api/shop"
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
@ -431,8 +488,7 @@
},
Paginationdata: {}, //
current_page: 1, //
per_page: 100, //
multipleSelection: [], //id
per_page: 10, //
updateType: '', //newest-, inventory-, stock-
stock: false, //
isShow: false, //
@ -477,7 +533,11 @@
lastVal: 0,
nowVal: 0,
loadingModule: '',
noRow: {}
noRow: {},
chooseList: [],
showUpdate: false,
commitLoading: false,
is_admin: localStorage.getItem('roleName') == '超级管理员' || localStorage.getItem('roleName') == '系统管理员'
}
},
methods: {
@ -607,7 +667,8 @@
},
//
handleSelectionChange(val) {
this.multipleSelection = val.map((item) => item.id)
this.chooseList = JSON.parse(JSON.stringify(val))
console.log(this.chooseList)
},
//
addNewgoods() {
@ -997,6 +1058,59 @@
type: "error"
})
this.loadingModule.close()
},
petchEditStock() {
this.showUpdate = true
},
commitPetchStock() {
this.commitLoading = true
let skus = []
this.chooseList.forEach((item) => {
skus.push({
id: item.id,
sale_stock: item.sale_stock
})
})
let params = {
updateType: 'saleStock',
skus: skus
}
updateSaleStock(params).then((res) => {
this.commitLoading = false
this.$refs.multipleTable.clearSelection()
this.$message({ message: '更新成功', type: "success" })
this.getList()
this.showUpdate = false
}).catch(() => {
this.commitLoading = false
})
},
showEdit(row, index) {
this.$set(this.tableData[index], 'edit', true)
this.$set(this.tableData[index], 'sale_stock_old', row.sale_stock)
},
cancelEdit(row, index) {
this.$set(this.tableData[index], 'sale_stock', row.sale_stock_old)
this.$set(this.tableData[index], 'edit', false)
},
confirmEdit(row, index) {
let params = {
updateType: 'saleStock',
skus: [{
id: row.id,
sale_stock: row.sale_stock
}]
}
updateSaleStock(params).then((res) => {
this.$message({ message: '更新成功', type: "success" })
this.$set(this.tableData[index], 'edit', false)
})
},
normalizer(node) {
if ((!node.children || (node.children && node.children.length == 0)) && node.level == 1) {
node.isDisabled = true
}
return node
}
},
watch: {
@ -1080,4 +1194,11 @@
align-items: center;
}
}
.titBox{
display: flex;
align-items: center;
}
.red{
color: #f00
}
</style>

View File

@ -2,18 +2,18 @@
<div class="pageBox">
<el-card>
<div class="opaBox">
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增品类</el-button>
</div>
<el-table :data="tableData" border v-loading="loading" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width: 100%">
<el-table-column prop="name" label="商品种类"></el-table-column>
<el-table-column prop="" label="是否显示">
<!-- <el-table-column prop="" label="是否显示">
<template slot-scope="scope">
<el-switch v-model="scope.row.show" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0" disabled></el-switch>
</template>
</el-table-column>
</el-table-column> -->
<el-table-column prop="" label="操作">
<template slot-scope="scope">
<el-button icon="el-icon-plus" @click="addSubType(scope.row)">添加子分类</el-button>
<el-button icon="el-icon-plus" v-if="scope.row.level == 1" @click="addSubType(scope.row)">新增品种</el-button>
<el-button type="primary" @click="handleEdit(scope.row.id, scope.row)">编辑</el-button>
<el-button type="danger" @click="handleDel(scope.row.id)">删除</el-button>
</template>
@ -22,37 +22,26 @@
</el-card>
<!-- 编辑 -->
<el-dialog :title="curId ? '编辑' : '新增'" :visible.sync="dialogVisible" width="500px">
<el-dialog :title="curInfo.id ? '编辑' : openType == 'pinLei' ? '新增品类' : '新增品种'" :visible.sync="dialogVisible" width="500px">
<el-form label-width="100px">
<!-- <el-form-item label="父级分类:">
<el-select v-model="curInfo.parent_name" placeholder="请选择父级分类" clearable @change="changeSelect">
<el-option style="height: auto;" :value="curInfo.parent_id">
<el-tree
:data="tableData"
:props="defaultProps"
@node-click="handleNodeClick">
</el-tree>
<el-form-item label="品类:" v-if="openType == 'pinZhong'">
<el-select v-model="curInfo.parent_id" disabled>
<el-option v-for="item in tableData" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item> -->
<el-form-item label="父级分类:">
<!-- <select-tree
:value="curInfo.parent_id"
:options="tableData"
:props="defaultProps"
@getValue="getValue">
</select-tree> -->
</el-form-item>
<!-- <el-form-item label="品类:">
<treeselect
:options="treeList"
placeholder="请选择类"
placeholder="请选择品类"
v-model="curInfo.parent_id" />
</el-form-item>
<el-form-item label="分类名称:">
</el-form-item> -->
<el-form-item :label="openType == 'pinZhong' ? '品种名称:' : '品类名称:'">
<el-input v-model="curInfo.name" clearable style="width: 300px;"></el-input>
</el-form-item>
<el-form-item label="是否显示:">
<!-- <el-form-item label="是否显示:">
<el-switch v-model="curInfo.show" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
</el-form-item> -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
@ -79,15 +68,16 @@ export default {
curInfo: {
parent_id: null,
name: '',
show: 1
show: 1,
id: 0
},
curId: 0,
defaultProps: {
value: 'id',
label: 'name',
children: 'children'
},
treeList: []
treeList: [],
openType: ''
}
},
mounted() {
@ -102,6 +92,7 @@ export default {
name: '',
show: 1
}
this.openType = 'pinLei'
this.dialogVisible = true
},
addSubType(row) {
@ -111,13 +102,16 @@ export default {
name: '',
show: 1
}
this.openType = 'pinZhong'
this.dialogVisible = true
},
//
handleEdit(id, item) {
this.id = id
this.curInfo = JSON.parse(JSON.stringify(item))
this.openType = 'edit'
if(item.parent_id) {
this.openType = 'pinZhong'
goods_types_detail(item.parent_id).then((res) => {
this.dialogVisible = true
})

View File

@ -163,7 +163,9 @@ export default {
},
hanleLogout() {
removeToken();
this.$router.push({ path: "/Login" });
localStorage.removeItem('token')
localStorage.removeItem('userName')
this.$router.push({ path: "/Login" })
},
handlerclick(e) {
if (this.$route.path !== e) {

View File

@ -3,11 +3,11 @@
<div class="cardBox">
<div class="searchBox">
<div class="row">
<span>sku标题</span>
<span>商品名称</span>
<el-input v-model="filter.title" clearable></el-input>
</div>
<div class="row">
<span>规格编码</span>
<span>商品编码</span>
<el-input v-model="filter.external_sku_id" clearable></el-input>
</div>
<div class="row">
@ -34,8 +34,8 @@
</div>
<el-table v-loading="loading" :data="supplierList" style="width: 100%" border>
<el-table-column prop="id" label="ID" width="80" align="center" />
<el-table-column prop="goods_sku.name" label="商品标题" />
<el-table-column prop="goods_sku.external_sku_id" label="规格编码" />
<el-table-column prop="goods_sku.name" label="商品名称" />
<el-table-column prop="goods_sku.external_sku_id" label="商品编码" />
<!-- <el-table-column prop="sku_id" label="skuID" /> -->
<el-table-column prop="day" label="日期" />
<el-table-column prop="inventory" label="盘点库存" />
@ -55,14 +55,18 @@
</el-card>
<el-dialog title="新增" :visible.sync="dialogVisible" width="500px">
<el-form label-width="90px">
<el-form-item label="规格编码:">
<el-input v-model="curInfo.external_sku_id" clearable></el-input>
</el-form-item>
<el-form-item label="盘点库存:">
<el-input v-model="curInfo.inventory" clearable></el-input>
</el-form-item>
</el-form>
<div v-for="(item, index) in inventoryOrders" :key="index" class="bgBox">
<div class="close" @click="delItem(index)"><i class="el-icon-delete-solid"></i></div>
<el-form label-width="90px">
<el-form-item label="商品编码:">
<el-input v-model="item.external_sku_id" clearable></el-input>
</el-form-item>
<el-form-item label="盘点库存:">
<el-input v-model="item.inventory" clearable></el-input>
</el-form-item>
</el-form>
</div>
<div class="btn" @click="addItem()"><i class="el-icon-plus"></i>添加标签</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="commitSupplier" :loading="commitloading"> </el-button>
@ -87,7 +91,7 @@
</template>
<script>
import { getDailyStock, addDailyStock } from "@/api/supplyChain"
import { getDailyStock, batchAddDailyStock } from "@/api/supplyChain"
import axios from "axios"
export default {
@ -99,7 +103,7 @@ export default {
total: 0,
supplierList: [],
dialogVisible: false,
curInfo: {},
inventoryOrders: [],
commitloading: false,
filter: {
title: '',
@ -143,12 +147,24 @@ export default {
},
//
handleAdd() {
this.curInfo = {}
this.inventoryOrders = [{
external_sku_id: '',
inventory: ''
}]
this.dialogVisible = true
},
delItem(i) {
this.inventoryOrders.splice(i, 1)
},
addItem() {
this.inventoryOrders.push({
external_sku_id: '',
inventory: ''
})
},
commitSupplier() {
this.commitloading = true
addDailyStock(this.curInfo).then((res) => {
batchAddDailyStock({inventoryOrders: this.inventoryOrders}).then((res) => {
this.page = 1
this.fetchList()
this.$message({ type: "success", message: "新增成功!" })
@ -220,4 +236,27 @@ export default {
.opaBox{
margin-bottom: 15px;
}
.bgBox{
position: relative;
border-radius: 5px;
background-color: #f5f2f2;
margin-bottom: 15px;
padding: 15px 30px 1px 0;
.close{
color: #f00;
position: absolute;
right: 5px;
top: 5px;
font-size: 20px;
cursor: pointer;
}
}
.btn{
display: flex;
align-items: center;
font-size: 14px;
color: #409eff;
cursor: pointer;
width: fit-content;
}
</style>

View File

@ -3,11 +3,11 @@
<div class="cardBox">
<div class="searchBox">
<div class="row">
<span>sku标题</span>
<span>商品名称</span>
<el-input v-model="filter.title" clearable></el-input>
</div>
<div class="row">
<span>规格编码</span>
<span>商品编码</span>
<el-input v-model="filter.external_sku_id" clearable></el-input>
</div>
<div class="row">
@ -34,13 +34,14 @@
</div>
<el-table v-loading="loading" :data="supplierList" style="width: 100%" border>
<el-table-column prop="id" label="ID" width="80" align="center" />
<el-table-column prop="goods_sku.name" label="商品标题" />
<el-table-column prop="external_sku_id" label="规格编码" />
<el-table-column prop="goods_sku.name" label="商品名称" />
<el-table-column prop="external_sku_id" label="商品编码" />
<!-- <el-table-column prop="sku_id" label="skuID" /> -->
<el-table-column prop="num" label="数量" />
<el-table-column prop="cost" label="成本" />
<el-table-column prop="buyer_name" label="采购人姓名" />
<el-table-column prop="reason" label="报损原因" />
<el-table-column prop="phenomenon" label="报损现象" />
<el-table-column prop="created_at" label="创建时间" align="center" />
<el-table-column label="操作" width="120" align="center">
<template slot-scope="scope">
@ -61,19 +62,55 @@
</div>
</el-card>
<el-dialog :title="curInfo.id ? '编辑' : '新增'" :visible.sync="dialogVisible" width="500px">
<el-dialog title="新增" :visible.sync="dialogVisible" width="500px">
<el-form label-width="90px">
<el-form-item label="规格编码">
<el-form-item label="采购人">
<el-select v-model="curInfo.buyer_id" clearable filterable ref="userBatchRef">
<el-option v-for="item in usersList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div v-for="(item, index) in lossOrders" :key="index" class="bgBox">
<div class="close" @click="delItem(index)"><i class="el-icon-delete-solid"></i></div>
<el-form label-width="90px">
<el-form-item label="商品编码">
<el-input v-model="item.external_sku_id" clearable></el-input>
</el-form-item>
<el-form-item label="数量">
<el-input v-model="item.num" clearable></el-input>
</el-form-item>
<el-form-item label="成本">
<el-input v-model="item.cost" clearable></el-input>
</el-form-item>
<el-form-item label="报损原因">
<el-input v-model="item.reason" clearable></el-input>
</el-form-item>
<el-form-item label="报损现象">
<el-input v-model="item.phenomenon" clearable></el-input>
</el-form-item>
</el-form>
</div>
<div class="btn" @click="addItem()"><i class="el-icon-plus"></i>添加标签</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="commitBatchLoss" :loading="commitloading"> </el-button>
</span>
</el-dialog>
<el-dialog title="编辑" :visible.sync="editDialog" width="500px">
<el-form label-width="90px">
<el-form-item label="商品编码">
<el-input v-model="curInfo.external_sku_id" clearable></el-input>
</el-form-item>
<el-form-item label="数量">
<el-input v-model="curInfo.num" clearable :disabled="curInfo.id ? true : false"></el-input>
<el-input v-model="curInfo.num" disabled></el-input>
</el-form-item>
<el-form-item label="成本">
<el-input v-model="curInfo.cost" clearable></el-input>
</el-form-item>
<el-form-item label="采购人">
<el-select v-model="curInfo.buyer_user_id" clearable filterable ref="userRef">
<el-select v-model="curInfo.buyer_id" clearable filterable ref="userRef">
<el-option v-for="item in usersList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
@ -81,10 +118,13 @@
<el-form-item label="报损原因">
<el-input v-model="curInfo.reason" clearable></el-input>
</el-form-item>
<el-form-item label="报损现象">
<el-input v-model="curInfo.phenomenon" clearable></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="commitSupplier" :loading="commitloading"> </el-button>
<el-button type="primary" @click="commitEditLoss" :loading="commitloading"> </el-button>
</span>
</el-dialog>
@ -106,7 +146,7 @@
</template>
<script>
import { getLossLog, addLossLog, updateLossLog } from "@/api/supplyChain"
import { getLossLog, batchAddLossLog, updateLossLog } from "@/api/supplyChain"
import axios from "axios"
import { userList } from "@/api/user"
@ -128,7 +168,9 @@ export default {
addTime: [],
showImport: false,
fileList: [],
usersList: []
usersList: [],
lossOrders: [],
editDialog: false
}
},
methods: {
@ -164,42 +206,78 @@ export default {
},
//
handleAdd() {
this.curInfo = {}
this.curInfo = {
buyer_id: ''
}
this.lossOrders = [{
external_sku_id: '',
num: '',
cost: '',
reason: '',
phenomenon: ''
}]
this.dialogVisible = true
},
delItem(i) {
this.lossOrders.splice(i, 1)
},
addItem() {
this.lossOrders.push({
external_sku_id: '',
num: '',
cost: '',
reason: '',
phenomenon: ''
})
},
handleEdit(row) {
this.curInfo = JSON.parse(JSON.stringify(row))
this.dialogVisible = true
},
commitSupplier() {
commitBatchLoss() {
this.commitloading = true
let list = []
let params = {
...this.curInfo
}
params.buyer_name = ''
if(params.buyer_id) {
params.buyer_name = this.$refs.userBatchRef.selectedLabel
}
this.lossOrders.forEach((item) => {
list.push({
...item,
buyer_name: params.buyer_name,
buyer_id: params.buyer_id
})
})
batchAddLossLog({lossOrders: list}).then((res) => {
this.page = 1
this.fetchList()
this.$message({ type: "success", message: "新增成功!" })
this.dialogVisible = false
this.commitloading = false
}).catch(() => {
this.commitloading = false
})
},
commitEditLoss() {
this.commitloading = true
let params = {
...this.curInfo
}
params.buyer_name = ''
if(params.buyer_user_id) {
if(params.buyer_id) {
params.buyer_name = this.$refs.userRef.selectedLabel
}
if(this.curInfo.id) {
updateLossLog(this.curInfo.id, params).then((res) => {
this.fetchList()
this.$message({ type: "success", message: "更新成功!" })
this.dialogVisible = false
this.commitloading = false
}).catch(() => {
this.commitloading = false
})
} else {
addLossLog(params).then((res) => {
this.page = 1
this.fetchList()
this.$message({ type: "success", message: "新增成功!" })
this.dialogVisible = false
this.commitloading = false
}).catch(() => {
this.commitloading = false
})
}
updateLossLog(this.curInfo.id, params).then((res) => {
this.fetchList()
this.$message({ type: "success", message: "更新成功!" })
this.editDialog = false
this.commitloading = false
}).catch(() => {
this.commitloading = false
})
},
handleImport() {
this.fileList = []
@ -273,4 +351,27 @@ export default {
.opaBox{
margin-bottom: 15px;
}
.bgBox{
position: relative;
border-radius: 5px;
background-color: #f5f2f2;
margin-bottom: 15px;
padding: 15px 30px 15px 0;
.close{
color: #f00;
position: absolute;
right: 5px;
top: 5px;
font-size: 20px;
cursor: pointer;
}
}
.btn{
display: flex;
align-items: center;
font-size: 14px;
color: #409eff;
cursor: pointer;
width: fit-content;
}
</style>

View File

@ -3,11 +3,11 @@
<div class="cardBox">
<div class="searchBox">
<div class="row">
<span>sku标题</span>
<span>商品名称</span>
<el-input v-model="filter.title" clearable></el-input>
</div>
<div class="row">
<span>规格编码</span>
<span>商品编码</span>
<el-input v-model="filter.external_sku_id" clearable></el-input>
</div>
<div class="row">
@ -33,9 +33,9 @@
<el-button type="warning" icon="el-icon-upload2" @click="handleImport">导入</el-button>
</div>
<el-table v-loading="loading" :data="procureList" style="width: 100%" border>
<el-table-column prop="sku_id" label="商品id" width="80" align="center" />
<el-table-column prop="goods_sku.name" label="商品标题" />
<el-table-column prop="external_sku_id" label="规格编码" />
<el-table-column prop="goods_sku.id" label="商品id" width="80" align="center" />
<el-table-column prop="goods_sku.name" label="商品名称" />
<el-table-column prop="external_sku_id" label="商品编码" />
<el-table-column prop="num" label="采购数量" />
<el-table-column prop="cost" label="采购成本" />
<el-table-column prop="buyer_name" label="采购人名称" />
@ -46,7 +46,7 @@
<span v-if="scope.row.supplier_name">{{ scope.row.supplier_name }}{{scope.row.supplier_id}}</span>
</template>
</el-table-column>
<el-table-column prop="created_at" label="创建时间" align="center" />
<el-table-column prop="date" label="采购时间" align="center" />
<el-table-column label="操作" width="120" align="center">
<template slot-scope="scope">
<el-button type="primary" @click="handleEdit(scope.row)" icon="el-icon-edit" size="mini">编辑</el-button>
@ -66,16 +66,61 @@
</div>
</el-card>
<el-dialog :title="curInfo.id ? '编辑' : '新增'" :visible.sync="dialogVisible" width="500px">
<el-dialog title="新增" :visible.sync="dialogVisible" width="500px">
<el-form label-width="90px">
<el-form-item label="规格编码">
<el-input v-model="curInfo.external_sku_id" clearable></el-input>
<el-form-item label="采购人">
<el-select v-model="curInfo.buyer_user_id" clearable filterable ref="userBatchRef">
<el-option v-for="item in usersList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="供应商">
<el-select v-model="curInfo.supplier_id" clearable filterable ref="supplierBatchRef">
<el-option v-for="item in supplierList" :key="item.id" :label="item.supplier_name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div v-for="(item, index) in purchaseOrders" :key="index" class="bgBox">
<div class="close" @click="delItem(index)"><i class="el-icon-delete-solid"></i></div>
<el-form label-width="90px">
<el-form-item label="商品编码">
<el-input v-model="item.external_sku_id" clearable></el-input>
</el-form-item>
<el-form-item label="数量">
<el-input v-model="item.num" clearable></el-input>
</el-form-item>
<el-form-item label="成本">
<el-input v-model="item.cost" clearable></el-input>
</el-form-item>
<el-form-item label="采购日期">
<el-date-picker
v-model="item.date"
type="date"
placeholder="选择日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-form>
</div>
<div class="btn" @click="addItem()"><i class="el-icon-plus"></i>添加标签</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="commitAddPurchase" :loading="commitloading"> </el-button>
</span>
</el-dialog>
<el-dialog title="编辑" :visible.sync="editDialog" width="600px">
<el-form label-width="90px">
<el-form-item label="商品编码">
<el-input v-model="curInfo.external_sku_id" disabled></el-input>
</el-form-item>
<el-form-item label="数量">
<el-input v-model="curInfo.num" clearable></el-input>
<el-input v-model="curInfo.num" disabled></el-input>
</el-form-item>
<el-form-item label="成本">
<el-input v-model="curInfo.cost" clearable></el-input>
<el-input v-model="curInfo.cost" disabled></el-input>
</el-form-item>
<el-form-item label="采购人">
<el-select v-model="curInfo.buyer_user_id" clearable filterable ref="userRef">
@ -89,9 +134,9 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="过期时间">
<el-form-item label="采购时间">
<el-date-picker
v-model="curInfo.expire_time"
v-model="curInfo.date"
type="date"
placeholder="选择日期"
format="yyyy-MM-dd"
@ -100,8 +145,8 @@
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="commitSupplier" :loading="commitloading"> </el-button>
<el-button @click="editDialog = false"> </el-button>
<el-button type="primary" @click="commitEdit" :loading="commitloading"> </el-button>
</span>
</el-dialog>
@ -124,7 +169,7 @@
</template>
<script>
import { getPurchaseLog, addPurchaseLog, updatePurchaseLog, getSupplier } from "@/api/supplyChain"
import { getPurchaseLog, updatePurchaseLog, getSupplier, batchAddPurchaseLog } from "@/api/supplyChain"
import axios from "axios"
import { userList } from "@/api/user"
@ -147,7 +192,9 @@ export default {
showImport: false,
fileList: [],
usersList: [],
supplierList: []
supplierList: [],
purchaseOrders: [],
editDialog: false
}
},
methods: {
@ -183,14 +230,67 @@ export default {
},
//
handleAdd() {
this.curInfo = {}
this.curInfo = {
buyer_user_id: '',
supplier_id: ''
}
this.purchaseOrders = [{
external_sku_id: '',
num: '',
cost: '',
date: ''
}]
this.dialogVisible = true
},
delItem(i) {
this.purchaseOrders.splice(i, 1)
},
addItem() {
this.purchaseOrders.push({
external_sku_id: '',
num: '',
cost: '',
date: ''
})
},
handleEdit(row) {
this.curInfo = JSON.parse(JSON.stringify(row))
this.dialogVisible = true
this.editDialog = true
},
commitSupplier() {
commitAddPurchase() {
this.commitloading = true
let list = []
let params = {
...this.curInfo
}
params.buyer_name = ''
params.supplier_name = ''
if(params.buyer_user_id) {
params.buyer_name = this.$refs.userBatchRef.selectedLabel
}
if(params.supplier_id) {
params.supplier_name = this.$refs.supplierBatchRef.selectedLabel
}
this.purchaseOrders.forEach((item) => {
list.push({
...item,
buyer_name: params.buyer_name,
buyer_user_id: params.buyer_user_id,
supplier_id: params.supplier_id,
supplier_name: params.supplier_name
})
})
batchAddPurchaseLog({purchaseOrders: list}).then((res) => {
this.page = 1
this.fetchList()
this.$message({ type: "success", message: "新增成功!" })
this.dialogVisible = false
this.commitloading = false
}).catch(() => {
this.commitloading = false
})
},
commitEdit() {
this.commitloading = true
let params = {
...this.curInfo
@ -203,26 +303,14 @@ export default {
if(params.supplier_id) {
params.supplier_name = this.$refs.supplierRef.selectedLabel
}
if(this.curInfo.id) {
updatePurchaseLog(this.curInfo.id, params).then((res) => {
this.fetchList()
this.$message({ type: "success", message: "更新成功!" })
this.dialogVisible = false
this.commitloading = false
}).catch(() => {
this.commitloading = false
})
} else {
addPurchaseLog(params).then((res) => {
this.page = 1
this.fetchList()
this.$message({ type: "success", message: "新增成功!" })
this.dialogVisible = false
this.commitloading = false
}).catch(() => {
this.commitloading = false
})
}
updatePurchaseLog(this.curInfo.id, params).then((res) => {
this.fetchList()
this.$message({ type: "success", message: "更新成功!" })
this.editDialog = false
this.commitloading = false
}).catch(() => {
this.commitloading = false
})
},
handleImport() {
this.fileList = []
@ -306,4 +394,27 @@ export default {
.opaBox{
margin-bottom: 15px;
}
.bgBox{
position: relative;
border-radius: 5px;
background-color: #f5f2f2;
margin-bottom: 15px;
padding: 15px 30px 15px 0;
.close{
color: #f00;
position: absolute;
right: 5px;
top: 5px;
font-size: 20px;
cursor: pointer;
}
}
.btn{
display: flex;
align-items: center;
font-size: 14px;
color: #409eff;
cursor: pointer;
width: fit-content;
}
</style>

View File

@ -2,7 +2,7 @@ module.exports = {
lintOnSave: false,
publicPath: "./", // 配置打包之后的相对路径
devServer: {
open: false, // 设置浏览器自动打开项目
open: true, // 设置浏览器自动打开项目
port: 8080, // 开发服务器运行端口号
proxy: {
// 配置代理