yyw提交
This commit is contained in:
parent
496aa21138
commit
5214fa853c
@ -1,209 +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>
|
||||
<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 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";
|
||||
import { getRoleInfo } from "@/api/role.js"
|
||||
import axios from 'axios'
|
||||
import { getRoleInfo } from '@/api/role.js'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
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 {
|
||||
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();
|
||||
}
|
||||
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;
|
||||
.row{
|
||||
margin-bottom: 20px;
|
||||
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: 45px;
|
||||
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>
|
||||
|
||||
@ -260,10 +260,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()
|
||||
},
|
||||
|
||||
@ -2,72 +2,286 @@
|
||||
<div>
|
||||
<div class="cardBox">
|
||||
<div class="searchBox">
|
||||
<div class="row">
|
||||
<span>时间：</span>
|
||||
<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-model="timeValue"
|
||||
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 HH:mm:ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
style="width: 340px;">
|
||||
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-input v-model="sku_id" clearable></el-input>
|
||||
<span>规格：</span>
|
||||
<el-select v-model="sku_id" filterable remote 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" icon="el-icon-search" @click="handleSearch">筛选</el-button>
|
||||
<el-button type="primary" @click="handleSearch()" icon="el-icon-search">筛选</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card>
|
||||
<el-table v-loading="loading" border :data="lossList">
|
||||
<el-table-column label="日期" prop="date"></el-table-column>
|
||||
<el-table-column label="报损数" prop="total_num"></el-table-column>
|
||||
<el-table-column label="报损金额" prop="total_loss_amount"></el-table-column>
|
||||
</el-table>
|
||||
<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,
|
||||
timeValue: [],
|
||||
lossList: [],
|
||||
sku_id: ''
|
||||
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.fetchData()
|
||||
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.timeValue ? this.timeValue[0] : '',
|
||||
end_day: this.timeValue ? this.timeValue[1] : '',
|
||||
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.lossList = res.data.data
|
||||
this.loading = false
|
||||
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>
|
||||
@ -91,5 +305,8 @@ export default {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.echartBox{
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<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">
|
||||
@ -65,6 +65,16 @@
|
||||
<span v-else>{{ startTime }}~{{ endTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>规格：</span>
|
||||
<el-select v-model="sku_id" filterable remote 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,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>
|
||||
|
||||
@ -106,6 +115,7 @@
|
||||
|
||||
<script>
|
||||
import { getSkuSalesCount } from "@/api/dataCenter.js"
|
||||
import { getGoodsFilter } from "@/api/goods.js"
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
export default {
|
||||
@ -142,7 +152,9 @@ export default {
|
||||
autoWidth: true,
|
||||
bookType: 'xlsx',
|
||||
dayTimeList: [],
|
||||
sku_id: ''
|
||||
sku_id: '',
|
||||
skusList: [],
|
||||
remoteLoading: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -230,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()
|
||||
@ -266,6 +278,10 @@ export default {
|
||||
this.page = val
|
||||
this.fetchData()
|
||||
},
|
||||
handleSearch() {
|
||||
this.page = 1
|
||||
this.fetchData()
|
||||
},
|
||||
handleExport() {
|
||||
this.downloadLoading = true
|
||||
let params = {
|
||||
@ -285,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)
|
||||
@ -313,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 = []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<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">
|
||||
@ -65,6 +65,16 @@
|
||||
<span v-else>{{ startTime }}~{{ endTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>规格：</span>
|
||||
<el-select v-model="sku_id" filterable remote 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>
|
||||
|
||||
@ -89,6 +99,7 @@
|
||||
|
||||
<script>
|
||||
import { getSpuSalesCount } from "@/api/dataCenter.js"
|
||||
import { getGoodsFilter } from "@/api/goods.js"
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
export default {
|
||||
@ -122,7 +133,9 @@ export default {
|
||||
autoWidth: true,
|
||||
bookType: 'xlsx',
|
||||
dayTimeList: [],
|
||||
sku_id: ''
|
||||
sku_id: '',
|
||||
skusList: [],
|
||||
remoteLoading: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -209,10 +222,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()
|
||||
},
|
||||
@ -232,6 +245,9 @@ export default {
|
||||
this.endTime = time + ' ' + this.dayTimeList[1]
|
||||
this.fetchData()
|
||||
},
|
||||
handleSearch() {
|
||||
this.fetchData()
|
||||
},
|
||||
handleExport() {
|
||||
if(!this.saleList.length) {
|
||||
this.$message({
|
||||
@ -268,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 = []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,304 +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="商品种类：">
|
||||
<treeselect
|
||||
:options="treeList"
|
||||
style="width: 200px;"
|
||||
:disable-branch-nodes="true"
|
||||
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)">删除</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, // Treeselect组件要求空值为null
|
||||
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, // Treeselect组件要求空值为null
|
||||
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>
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<el-input v-model="form.goods_title" placeholder="商品名称" clearable></el-input>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>商品种类：</span>
|
||||
<span>商品品种：</span>
|
||||
<treeselect
|
||||
:options="treeList"
|
||||
style="width: 200px;"
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<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">
|
||||
@ -35,7 +35,7 @@
|
||||
<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.external_sku_id" label="商品编码" />
|
||||
<!-- <el-table-column prop="sku_id" label="skuID" /> -->
|
||||
<el-table-column prop="day" label="日期" />
|
||||
<el-table-column prop="inventory" label="盘点库存" />
|
||||
@ -58,7 +58,7 @@
|
||||
<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-form-item label="商品编码：">
|
||||
<el-input v-model="item.external_sku_id" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="盘点库存：">
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<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">
|
||||
@ -35,7 +35,7 @@
|
||||
<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="external_sku_id" label="商品编码" />
|
||||
<!-- <el-table-column prop="sku_id" label="skuID" /> -->
|
||||
<el-table-column prop="num" label="数量" />
|
||||
<el-table-column prop="cost" label="成本" />
|
||||
@ -74,7 +74,7 @@
|
||||
<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-form-item label="商品编码">
|
||||
<el-input v-model="item.external_sku_id" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数量">
|
||||
@ -100,7 +100,7 @@
|
||||
|
||||
<el-dialog title="编辑" :visible.sync="editDialog" width="500px">
|
||||
<el-form label-width="90px">
|
||||
<el-form-item label="规格编码">
|
||||
<el-form-item label="商品编码">
|
||||
<el-input v-model="curInfo.external_sku_id" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数量">
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<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">
|
||||
@ -35,7 +35,7 @@
|
||||
<el-table v-loading="loading" :data="procureList" style="width: 100%" border>
|
||||
<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="external_sku_id" label="商品编码" />
|
||||
<el-table-column prop="num" label="采购数量" />
|
||||
<el-table-column prop="cost" label="采购成本" />
|
||||
<el-table-column prop="buyer_name" label="采购人名称" />
|
||||
@ -84,7 +84,7 @@
|
||||
<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-form-item label="商品编码">
|
||||
<el-input v-model="item.external_sku_id" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数量">
|
||||
@ -113,7 +113,7 @@
|
||||
|
||||
<el-dialog title="编辑" :visible.sync="editDialog" width="600px">
|
||||
<el-form label-width="90px">
|
||||
<el-form-item label="规格编码">
|
||||
<el-form-item label="商品编码">
|
||||
<el-input v-model="curInfo.external_sku_id" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数量">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user