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

Merge branch 'develop' of gitee.com:hzchunfen/erp into develop

Browse Source
This commit is contained in:
赵世界 2022-09-07 07:49:14 +08:00
commit 1da2e43dd4
21 changed files with 19826 additions and 3557 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16589
resources/frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

19
resources/frontend/src/App.vue
View File

@ -1,15 +1,16 @@
<template> <template>
<div id="app"> <div id="app">
<keep-alive> <keep-alive>
<router-view v-if="$route.meta.keepAlive" /> <router-view v-if="$route.meta.keepAlive" />
</keep-alive> </keep-alive>
<router-view v-if="!$route.meta.keepAlive" /> <router-view v-if="!$route.meta.keepAlive" />
</div> </div>
</template> </template>
<script> <script>
export default { export default {
}; };
</script> </script>
<style lang="scss"></style> <style lang="scss">
</style>

169
resources/frontend/src/components/mapDrag/index.vue
View File

@ -1,169 +0,0 @@
<template>
<div class="m-map">
<div class="search"
v-if="placeSearch">
<div id="js-result"
v-show="searchKey"
class="result"></div>
</div>
<div id="js-container"
class="map">正在加载数据 ...</div>
</div>
</template>
<script>
import remoteLoad from '@/util/remoteLoad.js'
window._AMapSecurityConfig = {
securityJsCode: '4c7f32be1ae23595dd423fbdf337df3f',
}
export default {
name: 'MapDrag',
props: {
searchKey: {
default: '',
},
},
data() {
return {
// searchKey: "",
placeSearch: null,
dragStatus: false,
AMapUI: null,
AMap: null,
city: '',
geolocation: null,
}
},
watch: {
searchKey() {
if (this.searchKey === '') {
this.placeSearch.clear()
}
},
},
async created() {
// 已载入高德地图API，则直接初始化地图
if (window.AMap && window.AMapUI) {
this.initMap()
// 未载入高德地图API，则先载入API再初始化
} else {
await remoteLoad(
'https://webapi.amap.com/maps?v=2.0&key=4b083a38fc17ad7c5e3df667931e0cf0'
)
await remoteLoad('https://webapi.amap.com/ui/1.1/main.js')
this.initMap()
}
},
methods: {
// 搜索
handleSearch() {
console.log(this.searchKey, '33333oooo')
if (this.searchKey) {
this.placeSearch.search(this.searchKey)
}
},
// 实例化地图
initMap() {
// 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
const AMapUI = (this.AMapUI = window.AMapUI)
const AMap = (this.AMap = window.AMap)
const that = this
AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => {
const mapConfig = {
zoom: 16,
}
const map = new AMap.Map('js-container', mapConfig)
// 获得当前定位的城市
AMap.plugin('AMap.CitySearch', function () {
const citySearch = new AMap.CitySearch()
console.log('citySearch', citySearch)
// 加载地图搜索插件
AMap.plugin('AMap.PlaceSearch', () => {
that.placeSearch = new AMap.PlaceSearch({
pageSize: 5,
pageIndex: 1,
citylimit: false,
map: map,
panel: 'js-result',
// city: that.city, // 设定搜索城市
})
AMap.Event.addListener(
that.placeSearch,
'listElementClick',
function (e) {
that.$emit('listElementClick', e)
}
)
AMap.Event.addListener(
that.placeSearch,
'markerClick',
function (e) {
that.$emit('listElementClick', e)
}
)
})
// citySearch.getLocalCity(function (status, result) {
// console.log('getLocalCity', status, result)
// if (status === 'complete' && result.info === 'OK') {
// // 查询成功，result即为当前所在城市信息
// that.city = result.adcode
// }
// })
})
// 启用工具条
AMap.plugin(
['AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation'],
function () {
map.addControl(
new AMap.ToolBar({
position: 'RB',
})
)
map.addControl(
new AMap.Scale({
position: 'LB',
})
)
}
)
// 创建地图拖拽
const positionPicker = new PositionPicker({
mode: 'dragMap', // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
map: map, // 依赖地图对象
})
// 启动拖放
positionPicker.start()
})
},
},
}
</script>
<style lang="css" scoped>
.m-map {
max-width: 700px;
max-height: 462px;
position: relative;
}
.m-map .map {
min-width: 700px;
min-height: 462px;
}
.m-map .search {
position: absolute;
top: 10px;
left: 10px;
width: 285px;
z-index: 1;
}
.m-map .result {
max-height: 300px;
overflow: auto;
margin-top: 10px;
}
</style>

1
resources/frontend/src/main.js vendored
View File

@ -6,7 +6,6 @@ import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css"; import "element-ui/lib/theme-chalk/index.css";
import "@/css/style.css"; import "@/css/style.css";
import "./router/index2"; import "./router/index2";
import axios from "axios";
// import Router from 'vue-router' // import Router from 'vue-router'
// const routerPush = Router.prototype.push // const routerPush = Router.prototype.push

10
resources/frontend/src/router/index1.js vendored
View File

@ -11,7 +11,7 @@ const list = [
{ {
path: "GOODS_LIST", path: "GOODS_LIST",
name: "商品列表", name: "商品列表",
component: () => import("../views/yingyeting/yingyeting.vue"), component: () => import("../views/goods/goods.vue"),
meta: { meta: {
keepAlive: true, keepAlive: true,
}, },
@ -19,7 +19,7 @@ const list = [
{ {
path: "GOODS_TYPE", path: "GOODS_TYPE",
name: "商品种类", name: "商品种类",
component: () => import("../views/home/home.vue"), component: () => import("../views/goodsType/goodsType.vue"),
}, },
{ {
path: "GOODS_BRAND", path: "GOODS_BRAND",
@ -44,17 +44,17 @@ const list = [
{ {
path: "SYSTEM_LOG", path: "SYSTEM_LOG",
name: "系统日志", name: "系统日志",
component: () => import("../views/shuju/shuju.vue"), component: () => import("../views/logs/logs.vue"),
}, },
{ {
path: "GOODS_LOG", path: "GOODS_LOG",
name: "商品记录", name: "商品记录",
component: () => import("../views/shuju/record.vue"), component: () => import("../views/logs/record.vue"),
}, },
{ {
path: "ADDGOODS", path: "ADDGOODS",
name: "新建商品", name: "新建商品",
component: () => import("../views/yingyeting/addgoods/addgoods.vue"), component: () => import("../views/goods/addgoods/addgoods.vue"),
}, },
{ {
path: "/", path: "/",

282
resources/frontend/src/views/Login.vue
View File

@ -1,123 +1,123 @@
<template> <template>
<div class="backimg"> <div class="backimg">
<div class="sign"> <div class="sign">
<span class="title">Hi 欢迎使用</span> <span class="title">Hi 欢迎使用</span>
<p class="manage"> <p class="manage">
<img src="../css/img/养花人2_画板 1 副本 15.png" alt="" /><span>ERP管理系统</span> <img src="../css/img/养花人2_画板 1 副本 15.png" alt="" /><span>ERP管理系统</span>
</p> </p>
<p class="title-1">登录</p> <p class="title-1">登录</p>
<input type="text" placeholder="请输入用户名" v-model="form.name" /> <input type="text" placeholder="请输入用户名" v-model="form.name" />
<br /> <br />
<input type="password" placeholder="请输入密码" v-model="form.password" /> <input type="password" placeholder="请输入密码" v-model="form.password" />
<br /> <br />
<el-checkbox v-model="checked">记住密码</el-checkbox> <el-checkbox v-model="checked">记住密码</el-checkbox>
<br /> <br />
<el-button type="primary" @click="Login()">登录</el-button> <el-button type="primary" @click="Login()">登录</el-button>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import axios from "axios"; import axios from "axios";
export default { export default {
data() { data() {
return { return {
checked: false, //记住密码变量 checked: false, //记住密码变量
form: { form: {
//用户名和密码 //用户名和密码
name: "", name: "",
password: "", password: "",
}, },
}; };
}, },
mounted() { mounted() {
this.getCookie(); this.getCookie();
}, },
methods: { methods: {
Login() { Login() {
// 判断记住密码复选框是否被勾选 勾选则调用配置cookie方法 // 判断记住密码复选框是否被勾选 勾选则调用配置cookie方法
if (this.checked === true) { if (this.checked === true) {
this.setCookie(this.form.name, this.form.password, true, 7); this.setCookie(this.form.name, this.form.password, true, 7);
} else { } else {
this.clearCookie(); 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 (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) { if (data.token) {
this.form = {}; this.form = {};
localStorage.setItem("token", data.token); localStorage.setItem("token", data.token);
this.$message({ this.$message({
message: "成功登录，欢迎来到后台管理系统", message: "成功登录，欢迎来到后台管理系统",
type: "success", type: "success",
}); });
this.$router.push("/GOODS_LIST"); this.$router.push("/GOODS_LIST");
}
});
} }
}); },
} // 设置cookie
}, setCookie(c_name, c_pwd, c_state, exdays) {
// 设置cookie const exdate = new Date();
setCookie(c_name, c_pwd, c_state, exdays) { exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // 保存的天数
const exdate = new Date(); window.document.cookie =
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // 保存的天数 "name" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
window.document.cookie = window.document.cookie =
"name" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString(); "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
window.document.cookie = window.document.cookie =
"password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString(); "state" + "=" + c_state + ";path=/;expires=" + exdate.toGMTString();
window.document.cookie = },
"state" + "=" + c_state + ";path=/;expires=" + exdate.toGMTString(); // 读取cookie
}, getCookie() {
// 读取cookie if (document.cookie.length > 0) {
getCookie() { const arr = document.cookie.split("; ");
if (document.cookie.length > 0) { for (let i = 0; i < arr.length; i++) {
const arr = document.cookie.split("; "); const arr2 = arr[i].split("=");
for (let i = 0; i < arr.length; i++) { if (arr2[0] === "name") {
const arr2 = arr[i].split("="); this.form.name = arr2[1];
if (arr2[0] === "name") { } else if (arr2[0] === "password") {
this.form.name = arr2[1]; this.form.password = arr2[1];
} else if (arr2[0] === "password") { } else if (arr2[0] === "state") {
this.form.password = arr2[1]; this.checked = Boolean(arr2[1]);
} else if (arr2[0] === "state") { }
this.checked = Boolean(arr2[1]); }
} }
} },
} // 清除cookie
}, clearCookie: function () {
// 清除cookie this.setCookie("", "", false, -1);
clearCookie: function () { },
this.setCookie("", "", false, -1);
},
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.backimg { .backimg {
width: 100%; width: 100%;
height: 1080px; height: 1080px;
background-image: url("./../css/img/组 32.png"); background-image: url("./../css/img/组 32.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
position: relative; position: relative;
} }
.sign { .sign {
width: 400px; width: 400px;
height: 500px; height: 500px;
position: absolute; position: absolute;
@ -125,67 +125,67 @@
right: 300px; right: 300px;
input { input {
width: 400px; width: 400px;
height: 51px; height: 51px;
border: 2px solid #bcbcbc; border: 2px solid #bcbcbc;
opacity: 1; opacity: 1;
border-radius: 5px; border-radius: 5px;
margin-bottom: 25px; margin-bottom: 25px;
} }
.title { .title {
width: 125px; width: 125px;
height: 23px; height: 23px;
font-size: 22px; font-size: 22px;
font-family: "BigruixianBlackGBV1.0"; font-family: "BigruixianBlackGBV1.0";
font-weight: 400; font-weight: 400;
line-height: 23px; line-height: 23px;
color: #2b53ec; color: #2b53ec;
opacity: 1; opacity: 1;
} }
.manage { .manage {
margin-top: 19px; margin-top: 19px;
margin-bottom: 50px; margin-bottom: 50px;
img { img {
margin-right: 20px; margin-right: 20px;
} }
span { span {
width: 340px; width: 340px;
height: 57px; height: 57px;
font-size: 54px; font-size: 54px;
font-family: "BigruixianBlackGBV1.0"; font-family: "BigruixianBlackGBV1.0";
font-weight: 400; font-weight: 400;
line-height: 57px; line-height: 57px;
color: #2b53ec; color: #2b53ec;
opacity: 1; opacity: 1;
} }
} }
.title-1 { .title-1 {
width: 70px; width: 70px;
height: 35px; height: 35px;
font-size: 35px; font-size: 35px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 500; font-weight: 500;
line-height: 60px; line-height: 60px;
color: #393939; color: #393939;
opacity: 1; opacity: 1;
margin-bottom: 35px; margin-bottom: 35px;
} }
.el-button { .el-button {
width: 400px; width: 400px;
height: 58px; height: 58px;
background: rgba(43, 83, 236); background: rgba(43, 83, 236);
border-radius: 5px; border-radius: 5px;
margin-top: 40px; margin-top: 40px;
} }
.el-checkbox { .el-checkbox {
color: rgba(43, 83, 236); color: rgba(43, 83, 236);
} }
} }
</style> </style>

346
resources/frontend/src/views/brand/brand.vue
View File

@ -1,211 +1,185 @@
<template> <template>
<div class="conent"> <div class="conent">
<!-- 新增按钮 --> <!-- 新增按钮 -->
<div class="btn"> <el-button type="primary" @click="handAdd">新增</el-button>
<el-button type="primary" @click="handAdd">新增</el-button>
</div>
<!-- 列表 -->
<div class="table">
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="name" label="商品品牌"> </el-table-column>
<el-table-column prop="" label="操作">
<template slot-scope="scope">
<el-button type="primary" @click="handEdit(scope.row.id, scope.row)">编辑</el-button>
<el-button type="danger" @click="handdel(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 新增品牌对话框 --> <!-- 列表 -->
<el-dialog title="新增品牌" :visible.sync="dialogFormVisible" :close-on-click-modal="false"> <div class="table" style="margin-top: 20px">
<el-form :model="form"> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
<el-form-item label="商品品牌" :label-width="formLabelWidth"> @selection-change="handleSelectionChange">
<el-input v-model="form.kindName"></el-input> <el-table-column prop="name" label="商品品牌"> </el-table-column>
</el-form-item> <el-table-column prop="" label="操作">
</el-form> <template slot-scope="scope">
<div slot="footer" class="dialog-footer"> <el-button type="primary" @click="handEdit(scope.row.id, scope.row)">编辑</el-button>
<el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="danger" @click="handdel(scope.row.id)">删除</el-button>
<el-button type="primary" @click="addSubmit">确 定</el-button> </template>
</div> </el-table-column>
</el-dialog> </el-table>
</div>
<!-- 编辑 --> <!-- 分页功能 -->
<el-dialog title="编辑" :visible.sync="dialogFormVisible1" :close-on-click-modal="false"> <div class="block">
<el-form :model="form1"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
<el-form-item label="编辑品牌" :label-width="formLabelWidth1"> :current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
<el-input v-model="form1.kindName1"></el-input> layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
</el-form-item> </el-pagination>
</el-form> </div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible1 = false">取 消</el-button>
<el-button type="primary" @click="EditSubmit">确 定</el-button>
</div>
</el-dialog>
<!-- 分页功能 --> <!-- 新增品牌对话框 -->
<div class="block"> <el-dialog title="新增品牌" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current_page" <el-form :model="form">
:page-sizes="[15, 50, 100]" :page-size="per_page" layout="total, sizes, prev, pager, next, jumper" <el-form-item label="商品品牌" :label-width="formLabelWidth">
:total="Paginationdata.total"> <el-input v-model="form.kindName"></el-input>
</el-pagination> </el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addSubmit">确 定</el-button>
</div>
</el-dialog>
<!-- 编辑 -->
<el-dialog title="编辑" :visible.sync="dialogFormVisible1" :close-on-click-modal="false">
<el-form :model="form1">
<el-form-item label="编辑品牌" :label-width="formLabelWidth1">
<el-input v-model="form1.kindName1"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible1 = false">取 消</el-button>
<el-button type="primary" @click="EditSubmit">确 定</el-button>
</div>
</el-dialog>
</div> </div>
</div>
</template> </template>
<script> <script>
import { import {
Brand_goods_types, Brand_goods_types,
DelBrand_goods_types, DelBrand_goods_types,
AddBrandgoods_types, AddBrandgoods_types,
editBrand_types, editBrand_types,
} from "../../api/rankingData"; } from "../../api/rankingData";
export default { export default {
data() { data() {
return { return {
id: "", //每一项的id id: "", //每一项的id
tableData: [], tableData: [],
multipleSelection: [], multipleSelection: [],
dialogFormVisible: false, dialogFormVisible: false,
dialogFormVisible1: false, dialogFormVisible1: false,
form: { form: {
kindName: "", //种类名 kindName: "", //种类名
}, },
form1: { form1: {
kindName1: "", //种类名 kindName1: "", //种类名
}, },
formLabelWidth: "120px", formLabelWidth: "120px",
formLabelWidth1: "120px", formLabelWidth1: "120px",
newKind: [], newKind: [],
Paginationdata: {}, //分页相关数据 Paginationdata: {}, //分页相关数据
current_page: 1, //当前页 current_page: 1, //当前页
per_page: 15, //每页显示数量 per_page: 15, //每页显示数量
}; };
}, },
created() { created() {
this.getGoods_types(); this.getGoods_types();
}, },
methods: { methods: {
// 复选框按钮 // 复选框按钮
handleSelectionChange(val) { handleSelectionChange(val) {
this.multipleSelection = val; this.multipleSelection = val;
}, },
//分页功能 //分页功能
handleSizeChange(val) { handleSizeChange(val) {
//当前条数 //当前条数
this.per_page = val; this.per_page = val;
this.getGoods_types(); this.getGoods_types();
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
//当前页 //当前页
this.current_page = val; this.current_page = val;
this.getGoods_types(); this.getGoods_types();
}, },
// 新增 // 新增
handAdd() { handAdd() {
this.form.kindName = ""; this.form.kindName = "";
this.dialogFormVisible = true; this.dialogFormVisible = true;
}, },
// 确认新增 // 确认新增
addSubmit() { addSubmit() {
var string; var string;
string = this.form.kindName.replace(/\s/g, ",").split(","); string = this.form.kindName.replace(/\s/g, ",").split(",");
AddBrandgoods_types({ AddBrandgoods_types({
names: string, names: string,
}).then((res) => { }).then((res) => {
this.$message({ this.$message({
type: "success", type: "success",
message: "添加成功", message: "添加成功",
}); });
this.getGoods_types(); this.getGoods_types();
});
this.dialogFormVisible = false;
},
// 编辑
handEdit(id, item) {
this.id = id;
this.form1.kindName1 = item.name;
this.dialogFormVisible1 = true;
},
// 编辑确定按钮
EditSubmit() {
editBrand_types(this.id, {
name: this.form1.kindName1,
}).then((res) => {
this.$message({
type: "success",
message: "编辑成功",
});
this.getGoods_types();
});
this.dialogFormVisible1 = false;
},
// 删除
handdel(id) {
this.$confirm("确定删除此条商品品牌吗?", "确认删除", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
DelBrand_goods_types(id).then((res) => {
this.getGoods_types();
}); });
this.$message({ this.dialogFormVisible = false;
type: "success", },
message: "删除成功!", // 编辑
handEdit(id, item) {
this.id = id;
this.form1.kindName1 = item.name;
this.dialogFormVisible1 = true;
},
// 编辑确定按钮
EditSubmit() {
editBrand_types(this.id, {
name: this.form1.kindName1,
}).then((res) => {
this.$message({
type: "success",
message: "编辑成功",
});
this.getGoods_types();
}); });
}) this.dialogFormVisible1 = false;
.catch(() => { },
this.$message({ // 删除
type: "info", handdel(id) {
message: "已取消删除", this.$confirm("确定删除此条商品品牌吗?", "确认删除", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
DelBrand_goods_types(id).then((res) => {
this.getGoods_types();
});
this.$message({
type: "success",
message: "删除成功!",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
// 获取列表
getGoods_types() {
let page = {
page: this.current_page,
per_page: this.per_page,
};
Brand_goods_types(page).then((res) => {
this.tableData = res.data.data;
this.Paginationdata = res.data.meta;
}); });
}); },
},
// 获取列表
getGoods_types() {
let page = {
page: this.current_page,
per_page: this.per_page,
};
Brand_goods_types(page).then((res) => {
this.tableData = res.data.data;
this.Paginationdata = res.data.meta;
});
},
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.conent { .block {
width: 100%;
min-height: calc(100vh - 200px);
position: relative;
}
.btn {
height: 104px;
border-radius: 5px;
display: flex;
align-items: center;
}
.el-button {
width: 114px;
height: 44px;
border-radius: 3px;
}
.table {
margin-top: 20px; margin-top: 20px;
} }
</style>
.block {
margin-top: 30px;
}
</style>

473
resources/frontend/src/views/goods/addgoods/addgoods.vue Normal file
View File

@ -0,0 +1,473 @@
<template>
<div>
<el-card class="box-card">
<div class="goods" style="margin: 20px">
<div class="add-item-info" style="margin-bottom: 10px; margin-left: 52px">
<div>
<div style="font-size: 14px">商品列表：</div>
<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>
</div>
<span style="font-size: 14px">商品图片：
<el-upload class="avatar-uploader" action="#" :limit="1" :auto-upload="false"
:show-file-list="true" list-type="picture-card" :on-change="handleAvatarSuccess">
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</span>
</div>
<!-- 编辑按钮进入显示 -->
<el-form ref="form" :inline="true" :model="form" v-if="goodsData != ''">
<div>
<el-form-item label="商品名称：">
<el-input placeholder="商品名称" v-model="goodsData.goods.title"></el-input>
</el-form-item>
<el-form-item label="商品编码：">
<el-input placeholder="商品编码" v-model="goodsData.goods.goods_code"></el-input>
</el-form-item>
<el-form-item label="商品种类：">
<el-select v-model="goodsData.goods.type_id" placeholder="商品种类" filterable>
<el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品品牌：">
<el-select v-model="goodsData.goods.brand_id" placeholder="商品品牌" filterable>
<el-option v-for="item in brand" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</div>
<div>
<el-form-item label="商品规格：">
<el-input placeholder="商品规格" v-model="goodsData.title"></el-input>
</el-form-item>
<el-form-item label="规格编码：">
<el-input v-model="goodsData.sku_code" placeholder="商品编码">
</el-input>
</el-form-item>
<el-form-item label="商品状态：">
<el-select v-model="goodsData.status">
<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="goodsData.num" placeholder="商品数量">
</el-input>
</el-form-item>
<el-form-item label="商品成本：">
<el-input v-model="goodsData.cost" placeholder="商品成本">
</el-input>
</el-form-item>
</div>
</div>
<div class="btn">
<el-form-item>
<el-button type="primary" @click="Edititem()">保存</el-button>
<el-button plain @click="cancel()">取消</el-button>
</el-form-item>
</div>
</el-form>
<!-- 新建商品进入显示 -->
<el-form ref="form" :inline="true" :model="form" v-if="goodsData == ''">
<div>
<el-form-item label="商品名称：">
<el-input placeholder="商品名称" v-model="form.title" :disabled="true" v-if="isShow"></el-input>
<el-input placeholder="商品名称" v-model="form.title" v-else></el-input>
</el-form-item>
<el-form-item label="商品编码：">
<el-input placeholder="商品编码" v-model="form.goods_code" :disabled="true" v-if="isShow">
</el-input>
<el-input placeholder="商品编码" v-model="form.goods_code" v-else></el-input>
</el-form-item>
<el-form-item label="商品种类：">
<el-select v-model="form.type_id" placeholder="商品种类" filterable>
<el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品品牌：">
<el-select v-model="form.brand_id" placeholder="商品品牌" filterable>
<el-option v-for="item in brand" :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">
<span style="margin-right: -15px">{{ i + 1 }}.</span>
<el-form-item label="商品规格：">
<el-input placeholder="商品规格" v-model="skus[i].title"></el-input>
</el-form-item>
<span class="addto" @click="handleAdd()">+</span>
<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-button type="primary" @click="handleDelete(i)">删除</el-button>
</div>
</div>
<div class="btn">
<el-form-item>
<el-button type="primary" @click="handleSave()">保存</el-button>
<el-button plain @click="cancel()">取消</el-button>
</el-form-item>
</div>
</el-form>
</div>
</el-card>
</div>
</template>
<script>
import {
addGoods,
checkGoods,
goodsList,
updateGoods,
imgUpload,
} from "../../../api/goods.js";
import { goods_types, Brand_goods_types } from "../../../api/rankingData.js";
export default {
data() {
return {
imgs: [],
gallery: "",
imageUrl: "",
lid: "", // 选择的商品列表id
gid: "", // 商品id
brand: [], // 品牌列表
cate: [], // 种类列表
goodschoose: [], // 商品列表
goodsID: "", //进入页面是否有商品id
goodsData: [], //编辑按钮进入获取的商品数据
// 规格列表
skus: [
{
title: "",
sku_code: "",
status: "0",
num: "0",
cost: "0",
reserve: "0",
},
],
// 增加商品表单
form: {
goods_id: "",
title: "",
img_url: "",
type_id: "",
brand_id: "",
goods_code: "",
},
// 商品状态
options: [
{
id: "0",
label: "下架",
},
{
id: "1",
label: "在售",
},
{
id: "2",
label: "预警",
},
],
file: [],
isShow: false,
URL: "",
};
},
watch: {
lid: {
handler(newVal, oldVal) {
if (newVal) {
this.goodschoose.forEach((item) => {
if (item.id == newVal) {
this.form = { ...item };
}
});
}
},
deep: true, // 深度监听
immediate: true, // 第一次改变就执行
},
},
methods: {
//图片上传
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;
if (this.goodsData.length !== 0) {
this.goodsData.goods.img_url = res.data.resource;
}
});
},
// 查看一个商品
handleUpdate() {
this.gid = this.$route.query;
if (this.gid.id) {
checkGoods(this.gid.id).then((res) => {
const data = res.data.data;
const sku = this.skus[0];
const list = {};
Object.keys(data).map((key) => {
Object.keys(sku).map((i) => {
if (key == i) {
list[i] = data[key];
}
});
});
});
}
},
// 商品列表
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,
};
addGoods(updata).then((res) => {
if (res.statusText === "OK") {
this.$message({
message: "商品添加成功！",
type: "success",
});
this.updateForm();
this.$router.push("/GOODS_LIST");
}
});
},
// 修改成功后重置表单
updateForm() {
this.form = {
title: "",
img_url: "abc.jpg",
type_id: "",
brand_id: "",
goods_code: "",
};
this.skus = [
{
title: "",
sku_code: "",
status: "",
num: "",
cost: "",
},
];
},
// 增加一个商品规格
handleAdd() {
this.skus.push({
title: "",
sku_code: "",
status: "0",
num: "",
cost: "",
});
},
// 删除一个商品规格
handleDelete(index) {
this.skus.splice(index, 1);
},
// 商品列表页进入带数据表单
getgoodsidData() {
let id = this.bigID;
checkGoods(id).then((res) => {
this.goodsData = res.data.data;
});
},
// 编辑确认请求
Edititem() {
let id = this.bigID;
let goods = {
title: this.goodsData.goods.title,
img_url: this.goodsData.goods.img_url,
type_id: this.goodsData.goods.type_id,
brand_id: this.goodsData.goods.brand_id,
goods_code: this.goodsData.goods.goods_code,
};
let sku = {
title: this.goodsData.title,
sku_code: this.goodsData.sku_code,
status: this.goodsData.status,
num: this.goodsData.num,
cost: this.goodsData.cost,
};
if (sku.status == "下架") {
sku.status = 0;
} else if (sku.status == "在售") {
sku.status = 1;
} else if (sku.status == "预警") {
sku.status = 2;
}
let updateData = {
goods_id: this.goodsData.goods_id,
goods,
sku,
};
updateGoods(id, updateData).then((res) => {
this.$router.push("/GOODS_LIST");
this.$message({
message: "商品编辑成功！",
type: "success",
});
});
},
// 取消按钮
cancel() {
this.$router.push("/GOODS_LIST");
},
onchange(value) {
if (value !== "") {
this.isShow = true;
}
if (value === "") {
this.isShow = false;
this.form = {};
}
},
},
created() {
this.goodsID = sessionStorage.getItem("商品ID");
this.bigID = sessionStorage.getItem("ID");
},
mounted() {
this.gid = this.$route.query;
// 获取商品种类
goods_types().then((res) => {
this.cate = res.data.data;
});
// 获取商品品牌
Brand_goods_types().then((res) => {
this.brand = res.data.data;
});
this.handleList();
this.handleUpdate();
this.getgoodsidData();
},
beforeDestroy() {
sessionStorage.removeItem("商品ID"); //销毁内存中的商品ID
sessionStorage.removeItem("ID"); //销毁内存中的ID
},
};
</script>
<style scoped>
.el-upload--picture-card {
width: 50px;
height: 50px;
}
.el-form-item {
margin-left: 60px;
}
.addto {
display: inline-block;
width: 30px;
height: 30px;
background-color: blue;
color: #fff;
font-size: 25px;
text-align: center;
line-height: 30px;
border-radius: 5px;
margin-top: 4px;
}
/* 分割 */
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 148px;
height: 148px;
line-height: 148px;
text-align: center;
}
.avatar {
width: 148px;
height: 148px;
display: block;
}
</style>

969
resources/frontend/src/views/goods/goods.vue Normal file
View File

@ -0,0 +1,969 @@
<template>
<!-- 商品管理页面 -->
<div>
<!-- 条件筛选板块 -->
<el-card :body-style="{ padding: '20px 20px 0 20px' }">
<div class="goods">
<el-form ref="form" :inline="true" :model="form">
<el-form-item label="商品名称:">
<el-input v-model="form.goods_title" placeholder="商品名称" style="width: 100px">
</el-input>
</el-form-item>
<el-form-item label="商品种类:">
<el-select v-model="form.type_id" placeholder="商品种类" style="width: 125px">
<el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品规格:">
<el-input v-model="form.sku_title" placeholder="商品规格" style="width: 100px">
</el-input>
</el-form-item>
<el-form-item label="商品品牌:">
<el-select v-model="form.brand_id" placeholder="商品品牌" style="width: 125px">
<el-option v-for="item in brand" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品状态:">
<el-select v-model="form.status" placeholder="商品状态" style="width: 115px">
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="form.keyword_type"
style="width: 80px; margin-right: 5px; margin-left: 10px">
<el-option v-for="item in options3" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-date-picker v-model="value1" type="datetimerange" range-separator="至"
start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss"
@change="getSTime" style="width: 300px">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleChoose()">筛选</el-button>
<el-button plain @click="handleReChoose()">重置筛选</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card style="margin-top: 20px">
<div>
<!-- 表格头部操作 -->
<div>
<span>全部商品(共{{ total }}条)</span>
<div class="btn">
<el-button type="primary" plain @click="addNewgoods">新建商品</el-button>
<el-button type="primary" plain @click="update()">上新</el-button>
<el-button type="primary" plain @click="onCount()">库存盘点</el-button>
<el-button type="primary" plain @click="handleImport()">导入商品</el-button>
<el-button type="primary" plain @click="handleExport()">表格导出</el-button>
</div>
</div>
<!-- 表格 -->
<el-table ref="multipleTable" :data="tableData" class="table" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange" max-height="1500">
<!-- 多选框 -->
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="商品信息" width="300">
<template slot-scope="scope">
<div class="commodityimg">
<img :src="scope.row.goods.img_url" class="Img" />
</div>
<div>
<p>{{ scope.row.goods.title }}&nbsp;{{ scope.row.title }}</p>
<p>
{{ scope.row.goods.goods_code + "_" + scope.row.sku_code }}
</p>
<p>
{{ scope.row.goods.updated_at }}
</p>
</div>
</template>
</el-table-column>
<el-table-column label="品类">
<template slot-scope="scope">
<div>
{{ 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="品牌">
<template slot-scope="scope">
<div>
{{ scope.row.goods.brand ? scope.row.goods.brand.name : "" }}
</div>
</template>
</el-table-column>
<el-table-column prop="two_days_ago_num" sortable label="2T">
</el-table-column>
<el-table-column prop="yesterday_num" sortable label="1T">
</el-table-column>
<el-table-column sortable label="0T" min-width="80">
<template slot-scope="scope">
<div v-if="isShow">
<el-input v-model="scope.row.arrived_today_num11"></el-input>
</div>
<div v-else>
{{ scope.row.daily.arrived_today_num }}
</div>
</template>
</el-table-column>
<el-table-column prop="cost" sortable label="成本">
<template slot-scope="scope">
<div v-if="isShow">
<el-input v-model="scope.row.cost"></el-input>
</div>
<div v-else>
{{ scope.row.cost != null ? scope.row.cost : 0 }}
</div>
</template>
</el-table-column>
<el-table-column prop="reference_price" sortable label="售价" min-width="80">
<template slot-scope="scope">
<div v-if="scope.row.id === id">
<el-input v-model="scope.row.reference_price" @blur="reference_priceBlur(scope.row)">
</el-input>
</div>
<div v-else>
{{ scope.row.reference_price }}
<el-button slot="reference" class="btn11" @click="reference_priceClick(scope.row.id)">
<img src="../../css/img/编辑.png" />
</el-button>
</div>
</template>
</el-table-column>
<el-table-column prop="num" sortable label="总量" min-width="80">
</el-table-column>
<el-table-column prop="reserve" sortable label="预留" min-width="80">
<template slot-scope="scope">
<div v-if="scope.row.id === id1">
<el-input v-model="scope.row.reserve" @blur="reservebBlur(scope.row)"></el-input>
</div>
<div v-else>
{{ scope.row.reserve }}
</div>
<el-button slot="reference" class="btn11" @click="onreserve(scope.row.id)"><img
src="../../css/img/编辑.png" alt="" /></el-button>
</template>
</el-table-column>
<el-table-column sortable label="订单" min-width="80">
<template slot-scope="scope">
<div>
<span>{{ scope.row.order_goods_num }}</span>
</div>
<el-popover placement="right-start" width="200" trigger="hover"
v-if="scope.row.order_detail.length !== 0">
<div>
<span v-for="(j, index) in scope.row.order_detail" :key="index">
<div>{{ j.shop.name }}:{{ j.number }}</div>
</span>
</div>
<el-button class="btn11" type="text" slot="reference"><img src="../../css/img/眼睛.png"
alt="" />
</el-button>
</el-popover>
</template>
</el-table-column>
<el-table-column sortable label="损耗">
<template slot-scope="scope">
<div v-if="scope.row.id === id2">
<el-input v-model="scope.row.daily.loss_num"></el-input>
</div>
<div v-else>
{{ scope.row.daily.loss_num }}
</div>
<el-popover placement="right-start" width="220" trigger="click" @hide="noBubbles">
<p>损耗:</p>
<el-input v-model="scope.row.daily.loss_num"></el-input>
<el-radio-group v-model="radio">
<el-radio disabled>原因:</el-radio>
<el-radio label="48h以上">48h以上</el-radio>
<el-radio label="到货错误">到货错误</el-radio>
<el-radio label="灰霉">灰霉</el-radio>
<el-radio label="长度">长度</el-radio>
<el-radio label="花朵">花朵</el-radio>
<el-radio label="其他">其他</el-radio>
</el-radio-group>
<div class="list_btn">
<el-button type="primary" @click="onLoss(scope.row)">保存</el-button>
</div>
<el-button slot="reference" class="btn11" @click="loss(scope.row.id)"><img
src="../../css/img/编辑.png" alt="" /></el-button>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="stock" sortable label="库存">
</el-table-column>
<el-table-column prop="address" sortable label="盘点">
<template slot-scope="scope">
<div v-if="stock">
<el-input v-model="scope.row.daily.inventory"></el-input>
</div>
<el-popover placement="right-start" width="100" trigger="hover" :content="
scope.row.daily.inventory_time
? scope.row.daily.inventory_time
: ''
">
<div v-if="!stock" slot="reference">
{{ scope.row.daily.inventory }}
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="status" label="状态"> </el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<div>
<el-button type="text" @click="ejectstock(scope.row)">库存</el-button>
</div>
<div>
<el-button type="text" @click="handleEdit(scope.row.goods_id, scope.row.id)">编辑
</el-button>
</div>
<div>
<el-button type="text" @click="goodslog(scope.row)">记录</el-button>
</div>
<!-- 点击库存按钮弹出框 -->
<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-column prop="two_days_ago_num" label="2天前库存">
<template slot-scope="scope">
<div>
{{ scope.row.two_days_ago_num }}
<el-input v-model="scope.row.two_days_ago_num"></el-input>
</div>
</template>
</el-table-column>
<el-table-column prop="yesterday_num" label="1天前库存">
<template slot-scope="scope">
<div>
{{ scope.row.yesterday_num }}
<el-input v-model="scope.row.yesterday_num"></el-input>
</div>
</template>
</el-table-column>
<el-table-column sortable label="今日到货">
<template slot-scope="scope">
<div>
{{ scope.row.daily.arrived_today_num }}
<el-input v-model="scope.row.daily.arrived_today_num"></el-input>
</div>
</template>
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelStock()">取 消</el-button>
<el-button type="primary" @click="oldStock()">确 定</el-button>
</span>
</el-dialog>
</template>
</el-table-column>
</el-table>
</div>
<!-- 底部按钮 -->
<div class="footerBtn" v-show="isShow || stock">
<el-button type="primary" class="confirmbtn" @click="cancel()">取消</el-button>
<el-button type="primary" class="confirmbtn" @click="onSubmit()">保存</el-button>
</div>
<!-- 分页功能 -->
<div class="page">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
</el-pagination>
</div>
</el-card>
<!-- 参考售价弹出确认框 -->
<el-dialog :visible.sync="dialogVisible3" width="20%" :close-on-click-modal="false">
<span>您确定要修改吗?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible3 = false">取 消</el-button>
<el-button type="primary" @click="reference_priceRequest()">确 定</el-button>
</span>
</el-dialog>
<!-- 预留量弹出框 -->
<el-dialog :visible.sync="dialogVisible4" width="20%" :close-on-click-modal="false">
<span>您确定要修改吗?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible4 = false">取 消</el-button>
<el-button type="primary" @click="reserveRequest()">确 定</el-button>
</span>
</el-dialog>
<!-- 点击表格导出弹出框 -->
<el-dialog title="表格导出" :visible.sync="Tableexport" width="30%" :close-on-click-modal="false">
<div>
选择:
<template>
<el-select v-model="value" placeholder="盘点表/运营表/成本表">
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</template>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="Tableexport = false">取 消</el-button>
<el-button type="primary" @click="derivation()">确 定</el-button>
<!-- <a href="/goods_skus/export">确定</a> -->
</span>
</el-dialog>
<!-- 点击商品文件导入弹出框 -->
<el-dialog title="导入商品" :visible.sync="docImportDrawer" direction="rtl" custom-class="demo-drawer" ref="drawer"
size="20%" width="30%" @close="importForm.imFileList = []" :close-on-click-modal="false">
<div class="demo-drawer__content">
<el-form :model="importForm" :rules="improtRules" ref="importForm">
<el-form-item label="上传文件" label-width="100px" prop="fileList">
<el-upload class="uploader" action="" :limit="1"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
:file-list="importForm.fileList" :auto-upload="false" :on-change="importFileChange">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-form>
<div class="demo-drawer__footer btn-style">
<el-button @click="docImportDrawer = false">取 消</el-button>
<el-button type="primary" @click="saveUpload">上 传</el-button>
</div>
</div>
<div class="import-right">
<el-button size="medium" class="button-query">
<a :href="`http://erp.staging.miaoxuan66.cn/goods/import/template`">下载模板</a>
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import axios from "axios";
import { goods_types, Brand_goods_types } from "../../api/rankingData.js";
import { goods, update, singleUpdate } from "../../api/goods";
export default {
data() {
return {
id: "", //参考售价的id
id1: "", //预留量的id
id2: "", //损耗的id
total: 0, // 总条数
radio: "", // 损耗选择的原因
brand: [], // 品牌列表
cate: [], // 种类列表
tableData: [], // 商品列表
shopsData: [], //店铺传参数组
sku_code: {}, //店铺传参对象
// shopOrder: {}, //店铺悬浮窗详情数据
options: [
{
id: "1",
label: "在售",
},
{
id: "2",
label: "预警",
},
{
id: "0",
label: "下架",
},
], // 商品状态
options2: [
{
value: "inventory",
label: "盘点表",
},
{
value: "cost",
label: "成本表",
},
], //表格导出选项下拉列表
value: "", //表格导出选择的选项
options3: [
{
value: "stock",
label: "库存",
},
{
value: "cost",
label: "成本",
},
{
value: "loss_num",
label: "损耗",
},
{
value: "reserve",
label: "预留",
},
], //筛选类型下拉选项
// 请求商品列表的参数
form: {
goods_title: "", // 商品名称
type_id: "", // 商品种类id
brand_id: "", // 商品品牌id
sku_title: "", // 商品规格
status: "", // 商品状态
keyword_type: "stock", //筛选类型
keyword_value: "", //日期筛选
},
Paginationdata: {}, //分页相关数据
current_page: 1, //当前页
per_page: 100, //每页显示数量
multipleSelection: [], //多选框选中的id
updateType: "", //更新类型，newest-上新, inventory-库存盘点, stock-库存
stock: false, //点击库存显示输入框变量
isShow: false, // 点击上新显示输入框
ejectstock1: false, //点击库存按钮弹出框变量
Importgoods: false, //导入商品变量
Tableexport: false, //表格导出变量
isShow1: false, //文件传输弹出变量
//表格导入相关变量
importForm: {
fileList: [],
},
docImportDrawer: false,
improtRules: {
fileList: [
{ required: true, message: "请导入Excel文件", trigger: "change" },
{
validator: (rule, value, callback) => {
if (!value.length) {
callback(new Error("请导入Excel文件"));
} else {
callback();
}
},
trigger: "change",
},
],
},
// 文件模板手添加到根目录下
publicPath: process.env.BASE_URL, // public文件夹路径
excelTemplatePath: "", // 数据导入Excel模板下载地址 - 调接口获取
visible: false,
updateField: "", //reference_price-参考售价, reserve-预留量, loss_num-损耗, status-状态
reference_priceShow: false,
reserveShow: false, //预留量-input显示变量
value1: "", // 筛选的时间
ommodityInventory: [], //单个商品库存
dialogVisible: false, //上新按钮弹出框变量
dialogVisible2: false, //库存盘点弹出框变量
dialogVisible3: false, //参考售价弹出框变量
dialogVisible4: false, //预留弹出框变量
publicId: "", //参考售价 预留量公用id
reference_price: "", //参考价格修改传参
reserve: "", //预留量修改传参
};
},
methods: {
// 列表编辑
handleEdit(goodsid, id) {
sessionStorage.setItem("商品ID", goodsid);
sessionStorage.setItem("ID", id);
this.$router.push("/ADDGOODS");
},
// 获取商品列表
getList() {
let page = {
page: this.current_page,
per_page: this.per_page,
};
goods(page).then((res) => {
this.tableData = res.data.data;
this.tableData = this.tableData.map((item) => {
item = {
...item,
arrived_today_num11: 0,
};
return item;
});
this.total = res.data.meta.total;
this.Paginationdata = res.data.meta;
this.shopsData = this.tableData.map((item) => {
item = item.goods.goods_code + "_" + item.sku_code;
return item;
});
this.sku_code = {
sku_code: this.shopsData,
};
});
},
// 筛选
handleChoose() {
this.form = {
...this.form,
page: this.current_page,
per_page: this.per_page,
};
// 对象值为空清除
const newObj = filterParams(this.form);
function filterParams(obj) {
const _newPar = {};
for (const key in obj) {
// 如果对象属性的值不为空，就保存该属性（这里我做了限制，如果属性的值为0，保存该属性。如果属性的值全部是空格，属于为空。）
if (
(obj[key] === 0 || obj[key]) &&
obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
) {
// 记录属性
_newPar[key] = obj[key];
}
}
// 返回对象
return _newPar;
}
goods(newObj).then((res) => {
this.tableData = res.data.data;
this.tableData = this.tableData.map((item) => {
item = {
...item,
arrived_today_num11: 0,
};
return item;
});
this.total = res.data.meta.total;
this.Paginationdata = res.data.meta;
});
},
// 重置筛选
handleReChoose() {
this.form = {
goods_title: "", // 商品名称
type_id: "", // 商品种类id
brand_id: "", // 商品品牌id
sku_title: "", // 商品规格
status: "", // 商品状态
};
this.value1 = "";
},
// 导入商品按钮
handleImport() {
this.docImportDrawer = true;
},
// 导出商品按钮
handleExport() {
this.Tableexport = true;
},
// 点击上新
update() {
this.isShow = true;
this.stock = false;
this.updateType = "newest";
},
// 复选框按钮
handleSelectionChange(val) {
this.multipleSelection = val.map((item) => item.id);
},
// 新增商品跳转
addNewgoods() {
this.$router.push("/ADDGOODS");
},
//分页功能
handleSizeChange(val) {
//当前条数
this.per_page = val;
this.handleChoose();
},
handleCurrentChange(val) {
//当前页
this.current_page = val;
this.handleChoose();
},
//取消上新or库存盘点
cancel() {
this.handleChoose();
this.isShow = false;
this.stock = false;
},
// 点击上新or库存盘点后确认
onSubmit() {
//判断点击的是上新，再发送上新请求
if (this.updateType === "newest") {
let skus = this.tableData.map((item) => {
return [
{
id: item.id,
cost: item.cost,
arrived_today_num: item.arrived_today_num11,
},
];
});
let patchdata = {
updateType: this.updateType,
skus: skus.flat(),
};
// 上新请求
update(patchdata).then((res) => {
this.handleChoose();
this.$message({
message: "上新成功！",
type: "success",
});
});
}
//判断点击的是库存盘点，再发送库存盘点请求
if (this.updateType === "inventory") {
let skus = this.tableData.map((item) => {
return [
{
id: item.id,
inventory: item.daily.inventory,
},
];
});
let patchdata = {
updateType: this.updateType,
skus: skus.flat(),
};
// 上新请求
update(patchdata).then((res) => {
this.handleChoose();
this.$message({
message: "库存盘点成功！",
type: "success",
});
});
}
this.isShow = false;
this.stock = false;
this.handleChoose();
},
// 点击库存盘点
onCount() {
this.dialogVisible2 = false;
this.isShow = false;
this.stock = true;
this.updateType = "inventory";
},
// 点击库存弹出框
ejectstock(row) {
this.ommodityInventory = [];
this.ejectstock1 = true;
this.updateType = "stock";
this.ommodityInventory.push(row);
},
//库存弹出框取消
cancelStock() {
this.handleChoose();
this.ejectstock1 = false;
},
// 库存弹出框确认
oldStock() {
this.ejectstock1 = false;
//判断点击的是库存，再发送库存请求
if (this.updateType === "stock") {
let skus = [
{
id: this.ommodityInventory[0].id,
yesterday_num: this.ommodityInventory[0].yesterday_num,
two_days_ago_num: this.ommodityInventory[0].two_days_ago_num,
arrived_today_num:
this.ommodityInventory[0].daily.arrived_today_num,
},
];
let stockpatch = {
updateType: this.updateType,
skus: skus,
};
// 库存请求
update(stockpatch).then((res) => {
this.handleChoose();
this.$message({
message: "库存更新成功！",
type: "success",
});
});
}
},
// 商品导入
importFile() {
this.docImportDrawer = true;
},
// 数据导入-上传Excel
async importFileChange(file, fileList) {
this.importForm.fileList = fileList; // 检验上传文件是否为空
},
// 确定上传
saveUpload() {
this.$refs.importForm.validate(async (isValid) => {
if (!isValid) return;
try {
// 主要是这二行代码
const params = new FormData();
params.append("goodsSkus", this.importForm.fileList[0].raw);
this.isLoadingDialog = true;
let token = localStorage.getItem("token");
axios
.post("/api/goods_skus", params, {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
if (res.status === 200) {
this.$message.success("模板导入成功");
}
});
this.docImportDrawer = false;
} finally {
this.isLoadingDialog = false;
}
});
},
// 数据导入-获取Excel模板地址
getExcelTemplatePath() {
this.$requestInternet.get("/api/xxx").then((res) => {
this.excelTemplatePath = res;
});
},
// 表格导出
derivation() {
window.open("/goods_skus/export?exportType=" + this.value);
},
// 点击记录按钮跳转商品记录
goodslog(row) {
this.$router.push({
path: "/GOODS_LOG",
query: {
id: row.id,
},
});
},
// 获取筛选时间
getSTime(val) {
this.form.keyword_value = val.join(" - ");
},
// 参考价格点击修改
reference_priceClick(id) {
this.updateField = "reference_price";
this.reference_priceShow = true;
this.id = id;
this.id1 = "";
},
// 参考价格input框失去焦点弹出确认框
reference_priceBlur(row) {
this.dialogVisible3 = true;
this.publicId = row.id;
this.reference_price = row.reference_price;
},
//参考价格弹出框确认修改请求
reference_priceRequest() {
this.dialogVisible3 = false;
let reference_priceData = {
updateField: this.updateField,
reference_price: this.reference_price,
};
singleUpdate(this.publicId, reference_priceData).then((res) => {
this.id = "";
this.$message({
message: "参考售价修改成功！",
type: "success",
});
});
},
onreserve(id) {
this.updateField = "reserve";
this.id1 = id;
this.id = "";
},
// 预留量 失去焦点触发确认框
reservebBlur(row) {
this.reserve = row.reserve;
this.dialogVisible4 = true;
this.publicId = row.id;
},
// 预留量弹出框确认请求
reserveRequest() {
let reservebData = {
updateField: this.updateField,
reserve: this.reserve,
};
singleUpdate(this.publicId, reservebData).then((res) => {
this.id1 = "";
this.dialogVisible4 = false;
this.$message({
message: "预留量修改成功！",
type: "success",
});
});
},
loss(id) {
this.updateField = "loss_num";
this.id2 = id;
this.id = "";
this.id1 = "";
},
// 添加损耗
onLoss(row) {
let id = row.id;
let lossData = {
updateField: this.updateField,
reason: this.radio,
loss_num: row.daily.loss_num,
};
singleUpdate(id, lossData).then((res) => {
this.getList();
this.id2 = "";
this.$message({
message: "损耗添加成功！",
type: "success",
});
});
},
//损耗框取消
noBubbles() {
this.handleChoose();
this.updateField = "";
this.id2 = "";
},
// 获取商品种类
getgoodsType() {
let param = {
per_page: 99999,
};
goods_types(param).then((res) => {
this.cate = res.data.data;
});
},
// 获取商品品牌
getbrandType() {
let parsm = {
per_page: 99999,
};
Brand_goods_types(parsm).then((res) => {
this.brand = res.data.data;
});
},
},
watch: {
$route(to, from) {
window.location.reload(); //监测到路由发生跳转时刷新一次页面
},
},
mounted() {
this.getList();
this.getgoodsType();
this.getbrandType();
this.id = "";
this.id1 = "";
this.id2 = "";
},
};
</script>
<style lang="css" scoped>
.table {
margin-top: 20px;
position: relative;
}
.btn {
float: right;
}
::v-deep .cell {
display: flex;
align-items: center;
}
.commodityimg {
width: 59px;
height: 59px;
background: rgba(227, 227, 227, 0.39);
opacity: 1;
display: block;
margin-right: 12px;
}
.Img {
width: 100%;
height: 100%;
}
.confirmbtn {
width: 114px;
height: 44px;
border-radius: 3px;
margin-top: 21px;
margin-bottom: 8px;
}
.import-right {
margin-top: 30px;
}
.import-right a {
text-decoration: none;
color: black;
}
::v-deep .btn11 {
padding: 0;
width: 14px;
height: 14px;
}
::v-deep .btn11 img {
width: 100%;
height: 100%;
}
.page {
margin-top: 20px;
}
</style>

186
resources/frontend/src/views/goodsType/goodsType.vue Normal file
View File

@ -0,0 +1,186 @@
<template>
<div class="conent">
<!-- 新增按钮 -->
<el-button type="primary" @click="handAdd">新增</el-button>
<!-- 列表 -->
<div class="table" style="margin-top: 20px">
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column prop="name" label="商品种类"> </el-table-column>
<el-table-column prop="" label="操作">
<template slot-scope="scope">
<el-button type="primary" @click="handEdit(scope.row.id, scope.row)">编辑</el-button>
<el-button type="danger" @click="handdel(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页功能 -->
<div class="block">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
</el-pagination>
</div>
<!-- 新增种类对话框 -->
<el-dialog title="新增" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
<el-form :model="form">
<el-form-item label="商品种类" :label-width="formLabelWidth">
<el-input v-model="form.kindName" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addSubmit">确 定</el-button>
</div>
</el-dialog>
<!-- 编辑 -->
<el-dialog title="编辑" :visible.sync="dialogFormVisible1" :close-on-click-modal="false">
<el-form :model="form1">
<el-form-item label="编辑种类" :label-width="formLabelWidth1">
<el-input v-model="form1.kindName1" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible1 = false">取 消</el-button>
<el-button type="primary" @click="EditSubmit">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
goods_types,
Delgoods_types,
Addgoods_types,
editGoods_types,
} from "../../api/rankingData";
export default {
data() {
return {
id: "", //每一项的id
tableData: [],
multipleSelection: [],
dialogFormVisible: false,
dialogFormVisible1: false,
form: {
kindName: "", //种类名
},
form1: {
kindName1: "", //种类名
},
formLabelWidth: "120px",
formLabelWidth1: "120px",
newKind: [],
Paginationdata: {}, //分页相关数据
current_page: 1, //当前页
per_page: 15, //每页显示数量
};
},
mounted() {
this.getGoods_types();
},
methods: {
// 复选框按钮
handleSelectionChange(val) {
this.multipleSelection = val;
},
//分页功能
handleSizeChange(val) {
//当前条数
this.per_page = val;
this.getGoods_types();
},
handleCurrentChange(val) {
//当前页
this.current_page = val;
this.getGoods_types();
},
// 新增
handAdd() {
this.form.kindName = "";
this.dialogFormVisible = true;
},
// 确认新增
addSubmit() {
var string;
string = this.form.kindName.replace(/\s/g, ",").split(",");
Addgoods_types({
names: string,
}).then((res) => {
this.$message({
type: "success",
message: "添加成功",
});
this.getGoods_types();
});
this.dialogFormVisible = false;
},
// 编辑
handEdit(id, item) {
this.id = id;
this.form1.kindName1 = item.name;
this.dialogFormVisible1 = true;
},
// 编辑确定按钮
EditSubmit() {
editGoods_types(this.id, {
name: this.form1.kindName1,
}).then((res) => {
this.$message({
type: "success",
message: "编辑成功",
});
this.getGoods_types();
});
this.dialogFormVisible1 = false;
},
// 删除
handdel(id) {
this.$confirm("确定删除此条商品种类吗?", "确认删除", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
Delgoods_types(id).then((res) => {
this.getGoods_types();
});
this.$message({
type: "success",
message: "删除成功!",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
// 获取列表
getGoods_types() {
let page = {
page: this.current_page,
per_page: this.per_page,
};
goods_types(page).then((res) => {
this.tableData = res.data.data;
this.Paginationdata = res.data.meta;
});
},
},
};
</script>
<style lang="scss" scoped>
.block {
margin-top: 20px;
}
</style>

212
resources/frontend/src/views/home/home.vue
View File

@ -1,212 +0,0 @@
<template>
<div class="conent">
<!-- 新增按钮 -->
<div class="btn">
<el-button type="primary" @click="handAdd">新增</el-button>
</div>
<!-- 列表 -->
<div class="table">
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="name" label="商品种类"> </el-table-column>
<el-table-column prop="" label="操作">
<template slot-scope="scope">
<el-button type="primary" @click="handEdit(scope.row.id, scope.row)">编辑</el-button>
<el-button type="danger" @click="handdel(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 新增种类对话框 -->
<el-dialog title="新增" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
<el-form :model="form">
<el-form-item label="商品种类" :label-width="formLabelWidth">
<el-input v-model="form.kindName" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addSubmit">确 定</el-button>
</div>
</el-dialog>
<!-- 编辑 -->
<el-dialog title="编辑" :visible.sync="dialogFormVisible1" :close-on-click-modal="false">
<el-form :model="form1">
<el-form-item label="编辑种类" :label-width="formLabelWidth1">
<el-input v-model="form1.kindName1" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible1 = false">取 消</el-button>
<el-button type="primary" @click="EditSubmit">确 定</el-button>
</div>
</el-dialog>
<!-- 分页功能 -->
<div class="block">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current_page"
:page-sizes="[15, 50, 100]" :page-size="per_page" layout="total, sizes, prev, pager, next, jumper"
:total="Paginationdata.total">
</el-pagination>
</div>
</div>
</template>
<script>
import {
goods_types,
Delgoods_types,
Addgoods_types,
editGoods_types,
} from "../../api/rankingData";
export default {
data() {
return {
id: "", //每一项的id
tableData: [],
multipleSelection: [],
dialogFormVisible: false,
dialogFormVisible1: false,
form: {
kindName: "", //种类名
},
form1: {
kindName1: "", //种类名
},
formLabelWidth: "120px",
formLabelWidth1: "120px",
newKind: [],
Paginationdata: {}, //分页相关数据
current_page: 1, //当前页
per_page: 15, //每页显示数量
};
},
mounted() {
this.getGoods_types();
},
methods: {
// 复选框按钮
handleSelectionChange(val) {
this.multipleSelection = val;
},
//分页功能
handleSizeChange(val) {
//当前条数
this.per_page = val;
this.getGoods_types();
},
handleCurrentChange(val) {
//当前页
this.current_page = val;
this.getGoods_types();
},
// 新增
handAdd() {
this.form.kindName = "";
this.dialogFormVisible = true;
},
// 确认新增
addSubmit() {
var string;
string = this.form.kindName.replace(/\s/g, ",").split(",");
Addgoods_types({
names: string,
}).then((res) => {
this.$message({
type: "success",
message: "添加成功",
});
this.getGoods_types();
});
this.dialogFormVisible = false;
},
// 编辑
handEdit(id, item) {
this.id = id;
this.form1.kindName1 = item.name;
this.dialogFormVisible1 = true;
},
// 编辑确定按钮
EditSubmit() {
editGoods_types(this.id, {
name: this.form1.kindName1,
}).then((res) => {
this.$message({
type: "success",
message: "编辑成功",
});
this.getGoods_types();
});
this.dialogFormVisible1 = false;
},
// 删除
handdel(id) {
this.$confirm("确定删除此条商品种类吗?", "确认删除", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
Delgoods_types(id).then((res) => {
this.getGoods_types();
});
this.$message({
type: "success",
message: "删除成功!",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
// 获取列表
getGoods_types() {
let page = {
page: this.current_page,
per_page: this.per_page,
};
goods_types(page).then((res) => {
this.tableData = res.data.data;
this.Paginationdata = res.data.meta;
});
},
},
};
</script>
<style lang="scss" scoped>
.conent {
width: 100%;
min-height: calc(100vh - 200px);
position: relative;
}
.btn {
height: 104px;
border-radius: 5px;
display: flex;
align-items: center;
}
.el-button {
width: 114px;
height: 44px;
border-radius: 3px;
}
.table {
margin-top: 20px;
}
.block {
margin-top: 30px;
}
</style>

553
resources/frontend/src/views/index.vue
View File

@ -1,365 +1,388 @@
<template> <template>
<div> <div>
<el-container> <el-container>
<el-container> <el-container>
<el-aside :class="show ? 'width' : 'width1'"> <el-aside :class="show ? 'width' : 'width1'">
<el-menu router background-color="#282c34" text-color="#fff" :default-active="$route.path" <el-menu router background-color="#282c34" text-color="#fff" :default-active="$route.path"
:default-openeds="openeds"> :default-openeds="openeds">
<div v-for="item in menu" :key="item.id"> <div v-for="item in menu" :key="item.id">
<el-menu-item :index="item.code" v-if="!item.children"> <el-menu-item :index="item.code" v-if="!item.children">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</el-menu-item> </el-menu-item>
<el-submenu v-else :index="item.code"> <el-submenu v-else :index="item.code">
<template slot="title"> <template slot="title">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</template> </template>
<el-menu-item :index="items.code" :key="items.id" v-for="items in item.children">{{ items.name }} <el-menu-item :index="items.code" :key="items.id" v-for="items in item.children">{{
</el-menu-item> items.name
</el-submenu> }}
</div> </el-menu-item>
</el-menu> </el-submenu>
</el-aside> </div>
</el-menu>
</el-aside>
<el-main> <el-main>
<div class="head"> <div class="head">
<ul> <ul>
<li> <li>
<div @click="add" class="add"> <div @click="add" class="add">
<i class="el-icon-s-unfold" v-if="show"></i> <i class="el-icon-s-unfold" v-if="show"></i>
<i class="el-icon-s-fold" v-else></i> <i class="el-icon-s-fold" v-else></i>
</div> </div>
<div class="right"> <div class="right">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="(item, index) in titie" :key="index">{{ item.name }}</el-breadcrumb-item> <el-breadcrumb-item v-for="(item, index) in titie" :key="index">{{ item.name }}
</el-breadcrumb> </el-breadcrumb-item>
</div> </el-breadcrumb>
</li> </div>
<li> </li>
<div class="token" @click="hanleLogout">退出</div> <li>
</li> <div class="token" @click="hanleLogout">退出</div>
</ul> </li>
</div> </ul>
</div>
<div class="box-card"> <div class="box-card">
<router-view></router-view> <router-view></router-view>
</div> </div>
</el-main> </el-main>
</el-container> </el-container>
</el-container> </el-container>
</div> </div>
</template> </template>
<script> <script>
import { removeToken } from "@/util/auth"; import { removeToken } from "@/util/auth";
import { getMenu } from "../api/menu.js"; import { getMenu } from "../api/menu.js";
export default { export default {
mounted() { mounted() {
getMenu().then((res) => { getMenu().then((res) => {
this.menu = res.data.data; this.menu = res.data.data;
}); });
}, },
data() { data() {
return { return {
menu: [], // 侧边栏 menu: [], // 侧边栏
show: true, // 导航栏折叠 show: true, // 导航栏折叠
levelData: [], // table导航栏 levelData: [], // table导航栏
titie: [], // 面包线 titie: [], // 面包线
head: "", // 路由name head: "", // 路由name
onindex: 0, // 索引 onindex: 0, // 索引
openeds: ["GOODS_MANAGE"], openeds: ["GOODS_MANAGE"],
}; };
}, },
watch: { watch: {
// table构造 // table构造
$route: { $route: {
handler: function (val) { handler: function (val) {
this.titie = val.matched; this.titie = val.matched;
this.head = val.name; this.head = val.name;
this.levelData.push({ name: val.name, path: val.path }); this.levelData.push({ name: val.name, path: val.path });
const newArr = []; const newArr = [];
const obj = {}; const obj = {};
for (var i = 0; i < this.levelData.length; i++) { for (var i = 0; i < this.levelData.length; i++) {
if (!obj[this.levelData[i].name]) { if (!obj[this.levelData[i].name]) {
newArr.push(this.levelData[i]); newArr.push(this.levelData[i]);
obj[this.levelData[i].name] = true; obj[this.levelData[i].name] = true;
} }
} }
this.levelData = newArr; this.levelData = newArr;
},
deep: true,
immediate: true,
}, },
deep: true,
immediate: true,
},
}, },
methods: { methods: {
/** /**
* @author: czw (725551805@qq.com) * @author: czw (725551805@qq.com)
* @description: 滚动条下一个 * @description: 滚动条下一个
* @param {*} * @param {*}
* @return {*} * @return {*}
* @Date: 2022-03-02 19:50:50 * @Date: 2022-03-02 19:50:50
*/ */
next() { next() {
this.hanletop(); this.hanletop();
}, },
/** /**
* @author: czw (725551805@qq.com) * @author: czw (725551805@qq.com)
* @description: 滚动最底部 * @description: 滚动最底部
* @param {*} * @param {*}
* @return {*} * @return {*}
* @Date: 2022-03-02 19:51:03 * @Date: 2022-03-02 19:51:03
*/ */
hanletop() { hanletop() {
document.getElementById("bottom").scrollIntoView({ behavior: "smooth" }); document.getElementById("bottom").scrollIntoView({ behavior: "smooth" });
}, },
/** /**
* @author: czw (725551805@qq.com) * @author: czw (725551805@qq.com)
* @description: 滚动最顶部 * @description: 滚动最顶部
* @param {*} * @param {*}
* @return {*} * @return {*}
* @Date: 2022-03-02 19:51:07 * @Date: 2022-03-02 19:51:07
*/ */
hanlebottom() { hanlebottom() {
document.getElementById("top").scrollIntoView({ behavior: "smooth" }); document.getElementById("top").scrollIntoView({ behavior: "smooth" });
}, },
/** /**
* @author: czw (725551805@qq.com) * @author: czw (725551805@qq.com)
* @description: 退出登录 * @description: 退出登录
* @param {*} * @param {*}
* @return {*} * @return {*}
* @Date: 2022-03-02 09:41:37 * @Date: 2022-03-02 09:41:37
*/ */
hanleLogout() { hanleLogout() {
removeToken(); removeToken();
this.$router.push({ path: "/Login" }); this.$router.push({ path: "/Login" });
}, },
/** /**
* @author: czw (725551805@qq.com) * @author: czw (725551805@qq.com)
* @description: table页跳转 * @description: table页跳转
* @param {*} * @param {*}
* @return {*} * @return {*}
* @Date: 2022-03-01 22:27:27 * @Date: 2022-03-01 22:27:27
*/ */
handlerclick(e) { handlerclick(e) {
if (this.$route.path !== e) { if (this.$route.path !== e) {
this.$router.push({ path: e }); this.$router.push({ path: e });
}
},
/**
* @author: czw (725551805@qq.com)
* @description: 导航栏折叠
* @param {*}
* @return {*}
* @Date: 2022-03-01 22:25:47
*/
add() {
this.show = !this.show;
},
/**
* @author: czw (725551805@qq.com)
* @description: 删除
* @param {*}
* @return {*}
* @Date: 2022-03-01 16:53:49
*/
hanblDelete(index, titie) {
var list = this.levelData[index].name;
this.onindex = index;
this.levelData.splice(this.onindex, 1);
if (titie === this.head) {
var item;
var name;
for (let i = 0; i < this.levelData.length; i++) {
item = this.levelData[i].path;
name = this.levelData[i].name;
}
if (this.levelData.length) {
if (name !== list) {
this.$router.push({ path: item });
} }
} },
} /**
}, * @author: czw (725551805@qq.com)
* @description: 导航栏折叠
* @param {*}
* @return {*}
* @Date: 2022-03-01 22:25:47
*/
add() {
this.show = !this.show;
},
/**
* @author: czw (725551805@qq.com)
* @description: 删除
* @param {*}
* @return {*}
* @Date: 2022-03-01 16:53:49
*/
hanblDelete(index, titie) {
var list = this.levelData[index].name;
this.onindex = index;
this.levelData.splice(this.onindex, 1);
if (titie === this.head) {
var item;
var name;
for (let i = 0; i < this.levelData.length; i++) {
item = this.levelData[i].path;
name = this.levelData[i].name;
}
if (this.levelData.length) {
if (name !== list) {
this.$router.push({ path: item });
}
}
}
},
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.table { .table {
background-color: #fff; background-color: #fff;
ul { ul {
li { li {
padding: 20px 10px; padding: 20px 10px;
.Navigation { .Navigation {
display: flex; display: flex;
span { span {
padding: 5px 30px; padding: 5px 30px;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #303133; color: #303133;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
margin-right: 10px; margin-right: 10px;
} }
.tab { .tab {
margin-right: 10px; margin-right: 10px;
flex-shrink: 0; flex-shrink: 0;
} }
.red { .red {
color: #5470c6; color: #5470c6;
border: 1px solid #5470c6; border: 1px solid #5470c6;
} }
.closure { .closure {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
width: 15px; width: 15px;
height: 15px; height: 15px;
line-height: 15px; line-height: 15px;
background-color: #ddd; background-color: #ddd;
color: #000; color: #000;
border-radius: 50%; border-radius: 50%;
font-size: 12px; font-size: 12px;
} }
.red_1 { .red_1 {
background-color: #5470c6; background-color: #5470c6;
color: #fff; color: #fff;
} }
}
} }
}
li:nth-child(2) { li:nth-child(2) {
overflow-x: auto; overflow-x: auto;
} }
display: flex; display: flex;
} }
} }
.width { .width {
transition: all 0.3s; transition: all 0.3s;
opacity: 0; opacity: 0;
width: 0px !important; width: 0px !important;
} }
.width1 { .width1 {
transition: all 0.3s; transition: all 0.3s;
opacity: 1; opacity: 1;
width: 200px !important; width: 200px !important;
} }
.el-container { .el-container {
height: 100vh; height: 100vh;
} }
.el-header { .el-header {
background-color: #b3c0d1; background-color: #b3c0d1;
color: #333; color: #333;
text-align: center; text-align: center;
} }
.el-aside { .el-aside {
background-color: #d3dce6; background-color: #d3dce6;
color: #333; color: #333;
text-align: center; text-align: center;
overflow-x: hidden; overflow-x: hidden;
} }
.el-aside::-webkit-scrollbar { .el-aside::-webkit-scrollbar {
width: 8px; width: 8px;
/*对垂直流动条有效*/ /*对垂直流动条有效*/
} }
.el-aside::-webkit-scrollbar-thumb { .el-aside::-webkit-scrollbar-thumb {
background-color: rgba(144, 147, 153, 0.3); background-color: rgba(144, 147, 153, 0.3);
border-radius: 20px; border-radius: 20px;
} }
.el-main { .el-main {
background-color: #f0f2f5; background-color: #f0f2f5;
color: #333; color: #333;
padding: 0 0 !important; padding: 0 0 !important;
} }
.el-main::-webkit-scrollbar { .el-main::-webkit-scrollbar {
width: 10px; width: 10px;
/*对垂直流动条有效*/ /*对垂直流动条有效*/
} }
.el-main::-webkit-scrollbar-thumb { .el-main::-webkit-scrollbar-thumb {
background-color: rgba(144, 147, 153, 0.3); background-color: rgba(144, 147, 153, 0.3);
} }
.box-card { .box-card {
background-color: #fff; background-color: #fff;
min-height: calc(100vh - 200px); min-height: calc(100vh - 120px);
margin: 10px; margin: 10px;
padding: 20px; padding: 20px;
} }
.add { .conent {
width: 100%;
min-height: calc(100vh - 200px);
position: relative;
}
.add {
cursor: pointer; cursor: pointer;
font-size: 25px; font-size: 25px;
color: #606266; color: #606266;
} }
.head { .head {
padding: 10px; padding: 10px;
background-color: #fff; background-color: #fff;
border-bottom: 1px solid #f6f6f6; border-bottom: 1px solid #f6f6f6;
box-shadow: 0 1px 4px rgb(0 21 41 / 8%); box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
ul { ul {
display: flex;
justify-content: space-between;
li {
display: flex; display: flex;
align-items: center; justify-content: space-between;
.right { li {
margin-left: 20px; display: flex;
} align-items: center;
.token { .right {
cursor: pointer; margin-left: 20px;
}
.token {
cursor: pointer;
}
} }
}
} }
} }
.el-aside { .el-aside {
background: #282c34; background: #282c34;
box-shadow: 2px 0 6px rgb(0 21 41 / 35%); box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
} }
::v-deep .el-menu { ::v-deep .el-menu {
border: none; border: none;
} }
// .el-menu-item { // .el-menu-item {
// margin: 0 20px 10px; // margin: 0 20px 10px;
// } // }
.el-menu-item:hover { .el-menu-item:hover {
outline: 0 !important; outline: 0 !important;
background: #5470c6 !important; background: #5470c6 !important;
border-radius: 5px !important; border-radius: 5px !important;
} }
.el-menu-item.is-active { .el-menu-item.is-active {
color: #fff !important; color: #fff !important;
background: #5470c6 !important; background: #5470c6 !important;
border-radius: 5px !important; border-radius: 5px !important;
} }
.el-menu-item-group__title { .el-menu-item-group__title {
padding: 0 0 !important; padding: 0 0 !important;
} }
</style>
.table {
margin-top: 20px;
}
.block {
margin-top: 30px;
}
.from-btn {
display: flex;
justify-content: space-around;
align-content: center;
}
</style>

370
resources/frontend/src/views/logs/logs.vue Normal file
View File

@ -0,0 +1,370 @@
<template>
<div>
<!-- 筛选框 -->
<el-card class="box-card" :body-style="{ padding: '20px 20px 0 20px' }">
<el-form ref="form" :inline="true" :model="form">
<el-form-item label="模块:" style="margin-right: 40px">
<el-select v-model="form.module" clearable>
<el-option v-for="item in mouduleOptions" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="操作:" style="margin-right: 40px">
<el-select v-model="form.action" clearable>
<el-option v-for="item in actionOptions" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="目标类型:" style="margin-right: 40px">
<el-select v-model="form.target_type" clearable>
<el-option v-for="item in target_ypeOptions" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="类别:" style="margin-right: 40px">
<el-select v-model="form.targetField" clearable>
<el-option v-for="item in target_fieldOptions" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="操作人:" style="margin-right: 40px">
<el-select v-model="form.userId" placeholder="输入操作人" clearable>
<el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间:">
<el-date-picker v-model="value1" type="datetimerange" range-separator="-" start-placeholder="起"
end-placeholder="止" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="query()">查询</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 表格 -->
<el-card style="margin-top: 20px" class="box-card">
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="id" label="序号" width="75"> </el-table-column>
<el-table-column prop="module" label="模块" width="70"> </el-table-column>
<el-table-column prop="action" label="操作" width="70"> </el-table-column>
<el-table-column prop="target_type" label="目标类型" width="100"> </el-table-column>
<el-table-column prop="target_id" label="目标ID" width="70"> </el-table-column>
<el-table-column prop="target_field" label="类别" width="100"> </el-table-column>
<el-table-column label="操作前">
<template slot-scope="scope">
<div style="height:45px">
{{ scope.row.before_update }}
</div>
</template>
</el-table-column>
<el-table-column label="操作后">
<template slot-scope="scope">
<div style="height:45px">
{{ scope.row.after_update }}
</div>
</template>
</el-table-column>
<el-table-column label="信息" width="300">
<template slot-scope="scope">
<div style="overflow-x: hidden;white-space: nowrap;">
{{ scope.row.message }}
</div>
</template>
</el-table-column>
<el-table-column prop="user.name" label="操作人" width="120"></el-table-column>
<el-table-column label="操作时间" width="100">
<template slot-scope="scope">
<p>{{ scope.row.created_at }}</p>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- 分页功能 -->
<div class="block">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
</el-pagination>
</div>
</div>
</template>
<script>
import { recordList } from "../../api/record";
import { userList } from "../../api/user";
export default {
data() {
return {
target_fieldOptions: [
{
value: "add",
label: "创建",
},
{
value: "status",
label: "状态",
},
{
value: "name",
label: "名称",
},
{
value: "title",
label: "标题",
},
{
value: "import",
label: "导入",
},
{
value: "export",
label: "导出",
},
{
value: "set",
label: "设置",
},
{
value: "cost",
label: "成本",
},
{
value: "stock",
label: "库存",
},
{
value: "inventory",
label: "库存盘点",
},
{
value: "reserve",
label: "预留量",
},
{
value: "timingInventory",
label: "7点盘点",
},
{
value: "pdd.ktt.goods.query.list",
label: "快团团下载绑定商品",
},
{
value: "arrived_today_num",
label: "今日到货",
},
{
value: "loss_num",
label: "损耗",
},
{
value: "pdd.pop.auth.token.create",
label: "快团团授权",
},
{
value: "reference_price",
label: "参考价格",
},
{
value: "update",
label: "更新",
},
{
value: "pdd.ktt.goods.incr.quantity",
label: "快团团库存同步",
},
{
value: "pdd.ktt.order.list",
label: "快团团下载订单",
},
{
value: "pdd.ktt.increment.order.query",
label: "快团团增量下载订单",
},
], //类别
mouduleOptions: [
{
value: "menu",
label: "菜单",
},
{
value: "goods",
label: "商品",
},
{
value: "file",
label: "文件",
},
{
value: "permission",
label: "权限",
},
{
value: "role",
label: "角色",
},
{
value: "user",
label: "用户",
},
{
value: "plat",
label: "平台",
},
],//模块
actionOptions: [
{
value: "POST",
label: "新增",
},
{
value: "PATCH",
label: "更新",
},
{
value: "DELETE",
label: "删除",
},
{
value: "GET",
label: "查看",
},
],//操作
target_ypeOptions: [
{
value: "upload",
label: "上传",
},
{
value: "goods_sku",
label: "商品规格",
},
{
value: "goods_brand",
label: "商品品牌",
},
{
value: "goods_type",
label: "种类",
},
{
value: "menu",
label: "菜单",
},
{
value: "role",
label: "角色",
},
{
value: "permission",
label: "权限",
},
{
value: "user",
label: "用户",
},
{
value: "kuaituantuan",
label: "快团团",
},
{
value: "miaoxuan",
label: "秒选",
},
{
value: "goods",
label: "商品",
},
],//目标类型
userOptions: [], //查询用户列表
form: {
module: '',//模块 goods-商品(单个商品记录必传),'menu' => '菜单',file-文件,permission-权限,role-角色,user-用户,plat-平台
action: '',//操作 POST-新增,PATCH-更新,DELETE-删除,'GET' => '查看',
target_type: '',//目标类型 upload-上传,goods_sku商品规格,goods_brand-商品品牌,goods_type-商品种类,menu-菜单,permission-权限,role-角色,user-用户,kuaituantuan-快团团,miaoxuan-妙选,'goods' => '商品',
targetField: "",//影响字段
userId: "",//操作人id(用户列表)
},
value1: "", //筛选时间变量
tableData: [], //列表数据
Paginationdata: {}, //分页相关数据
current_page: 1, //当前页
per_page: 15, //每页显示数量
};
},
methods: {
//请求列表数据
getList() {
let page = {
page: this.current_page,
per_page: this.per_page,
};
recordList(page).then((res) => {
this.tableData = res.data.data;
this.Paginationdata = res.data.meta;
});
},
// 获取用户列表
getUser() {
userList().then((res) => {
this.userOptions = res.data.data;
});
},
// 查询
query() {
let queryData = {
page: this.current_page,
per_page: this.per_page,
module: this.form.module,
action: this.form.action,
target_type: this.form.target_type,
target_id: this.$route.query.id ? this.$route.query.id : '',
target_field: this.form.targetField ? this.form.targetField : '',
user_id: this.form.userId,
start_time: this.value1[0] ? this.value1[0] : '',
end_time: this.value1[1] ? this.value1[1] : '',
};
recordList(queryData).then((res) => {
this.tableData = res.data.data;
this.Paginationdata = res.data.meta;
});
},
//分页功能
handleSizeChange(val) {
//当前条数
this.per_page = val;
this.query();
},
handleCurrentChange(val) {
//当前页
this.current_page = val;
this.query();
},
},
mounted() {
this.getList();
this.getUser();
},
};
</script>
<style lang="scss" scoped>
.block {
margin-top: 20px;
}
::v-deep .el-card__body {
padding: 0;
}
</style>

183
resources/frontend/src/views/logs/record.vue Normal file
View File

@ -0,0 +1,183 @@
<template>
<div>
<!-- 筛选框 -->
<el-card :body-style="{ padding: '20px 20px 0 20px' }">
<el-form ref="form" :inline="true" :model="form">
<el-form-item label="查询类别：">
<el-select v-model="form.targetField" placeholder="全部">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="操作用户">
<el-select v-model="form.userId" placeholder="输入操作用户">
<el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="操作时间：">
<el-date-picker v-model="value1" type="datetimerange" range-separator="-" start-placeholder="起"
end-placeholder="止" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="query()">查询</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 表格 -->
<el-card style="margin-top: 20px">
<el-table :data="tableData" style="width: 100%" border>
<el-table-column prop="id" label="序号" width="70"> </el-table-column>
<el-table-column prop="created_at" label="时间" width="200">
</el-table-column>
<el-table-column prop="target_field" label="类别" width="100">
</el-table-column>
<el-table-column prop="before_update" label="操作前" :resizable="ture">
</el-table-column>
<el-table-column prop="after_update" label="操作后" :resizable="ture">
</el-table-column>
<el-table-column prop="user.name" label="操作人" width="100">
</el-table-column>
</el-table>
</el-card>
<!-- 分页功能 -->
<div class="block">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
</el-pagination>
</div>
</div>
</template>
<script>
import { userList } from "../../api/user";
import { recordList } from "../../api/record";
export default {
data() {
return {
options: [
{
value: "cost",
label: "成本",
},
{
value: "stock",
label: "库存",
},
{
value: "inventory",
label: "库存盘点",
},
{
value: "status",
label: "状态",
},
{
value: "set",
label: "设置",
},
], //查询类别
options1: [], //查询用户列表
form: {
targetField: "",
userId: "",
},
value1: "", //筛选时间变量
tableData: [], //列表数据
Paginationdata: {}, //分页相关数据
current_page: 1, //当前页
per_page: 15, //每页显示数量
moudule: "goods",
};
},
methods: {
//请求列表数据
getList() {
let queryData = {
userId: this.form.userId,
target_field: this.form.targetField,
moudule: this.moudule,
target_id: this.$route.query.id,
startTime: this.value1[0],
endTime: this.value1[1],
page: this.current_page,
per_page: this.per_page,
};
recordList(queryData).then((res) => {
this.tableData = res.data.data;
this.Paginationdata = res.data.meta;
});
},
//分页功能
handleSizeChange(val) {
//当前条数
this.per_page = val;
this.query();
},
handleCurrentChange(val) {
//当前页
this.current_page = val;
this.query();
},
// 获取用户列表
getUser() {
userList().then((res) => {
this.options1 = res.data.data;
});
},
// 查询
query() {
let queryData = {
userId: this.form.userId,
target_field: this.form.targetField,
page: this.current_page,
per_page: this.per_page,
moudule: this.moudule,
target_id: this.$route.query.id,
startTime: this.value1[0],
endTime: this.value1[1],
};
// 对象值为空清除
const newObj = filterParams(queryData);
function filterParams(obj) {
const _newPar = {};
for (const key in obj) {
// 如果对象属性的值不为空，就保存该属性（这里我做了限制，如果属性的值为0，保存该属性。如果属性的值全部是空格，属于为空。）
if (
(obj[key] === 0 || obj[key]) &&
obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
) {
// 记录属性
_newPar[key] = obj[key];
}
}
// 返回对象
return _newPar;
}
recordList(newObj).then((res) => {
this.tableData = res.data.data;
this.Paginationdata = res.data.meta;
});
},
},
mounted() {
this.getList();
this.getUser();
},
};
</script>
<style lang="scss" scoped>
.block {
margin-top: 20px;
}
</style>

185
resources/frontend/src/views/shuju/record.vue
View File

@ -1,185 +0,0 @@
<template>
<div>
<!-- 筛选框 -->
<el-card class="box-card">
<div class="goods" style="margin: 20px">
<el-form ref="form" :inline="true" :model="form">
<el-form-item label="查询类别：">
<el-select v-model="form.targetField" placeholder="全部">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="操作用户">
<el-select v-model="form.userId" placeholder="输入操作用户">
<el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="操作时间：">
<el-date-picker v-model="value1" type="datetimerange" range-separator="-" start-placeholder="起"
end-placeholder="止" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="query()">查询</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- 表格 -->
<el-card style="margin-top: 30px" class="box-card">
<el-table :data="tableData" style="width: 100%" border>
<el-table-column prop="id" label="序号" width="70"> </el-table-column>
<el-table-column prop="created_at" label="时间" width="200">
</el-table-column>
<el-table-column prop="target_field" label="类别" width="100">
</el-table-column>
<el-table-column prop="before_update" label="操作前" :resizable="ture">
</el-table-column>
<el-table-column prop="after_update" label="操作后" :resizable="ture">
</el-table-column>
<el-table-column prop="user.name" label="操作人" width="100">
</el-table-column>
</el-table>
</el-card>
<!-- 分页功能 -->
<div class="block">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current_page"
:page-sizes="[15, 50, 100]" :page-size="per_page" layout="total, sizes, prev, pager, next, jumper"
:total="Paginationdata.total">
</el-pagination>
</div>
</div>
</template>
<script>
import { userList } from "../../api/user";
import { recordList } from "../../api/record";
export default {
data() {
return {
options: [
{
value: "cost",
label: "成本",
},
{
value: "stock",
label: "库存",
},
{
value: "inventory",
label: "库存盘点",
},
{
value: "status",
label: "状态",
},
{
value: "set",
label: "设置",
},
], //查询类别
options1: [], //查询用户列表
form: {
targetField: "",
userId: "",
},
value1: "", //筛选时间变量
tableData: [], //列表数据
Paginationdata: {}, //分页相关数据
current_page: 1, //当前页
per_page: 15, //每页显示数量
moudule: "goods",
};
},
methods: {
//请求列表数据
getList() {
let queryData = {
userId: this.form.userId,
target_field: this.form.targetField,
moudule: this.moudule,
target_id: this.$route.query.id,
startTime: this.value1[0],
endTime: this.value1[1],
page: this.current_page,
per_page: this.per_page,
};
recordList(queryData).then((res) => {
this.tableData = res.data.data;
this.Paginationdata = res.data.meta;
});
},
//分页功能
handleSizeChange(val) {
//当前条数
this.per_page = val;
this.query();
},
handleCurrentChange(val) {
//当前页
this.current_page = val;
this.query();
},
// 获取用户列表
getUser() {
userList().then((res) => {
this.options1 = res.data.data;
});
},
// 查询
query() {
let queryData = {
userId: this.form.userId,
target_field: this.form.targetField,
page: this.current_page,
per_page: this.per_page,
moudule: this.moudule,
target_id: this.$route.query.id,
startTime: this.value1[0],
endTime: this.value1[1],
};
// 对象值为空清除
const newObj = filterParams(queryData);
function filterParams(obj) {
const _newPar = {};
for (const key in obj) {
// 如果对象属性的值不为空，就保存该属性（这里我做了限制，如果属性的值为0，保存该属性。如果属性的值全部是空格，属于为空。）
if (
(obj[key] === 0 || obj[key]) &&
obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
) {
// 记录属性
_newPar[key] = obj[key];
}
}
// 返回对象
return _newPar;
}
recordList(newObj).then((res) => {
this.tableData = res.data.data;
this.Paginationdata = res.data.meta;
});
},
},
mounted() {
this.getList();
this.getUser();
},
};
</script>
<style>
.block {
margin-top: 30px;
}
</style>

367
resources/frontend/src/views/shuju/shuju.vue
View File

@ -1,367 +0,0 @@
<template>
<div>
<!-- 筛选框 -->
<el-card class="box-card">
<div class="goods" style="margin: 20px">
<el-form ref="form" :inline="true" :model="form">
<el-form-item label="模块:" style="margin-right: 40px">
<el-select v-model="form.module" clearable >
<el-option v-for="item in mouduleOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="操作:" style="margin-right: 40px">
<el-select v-model="form.action" clearable>
<el-option v-for="item in actionOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="目标类型:" style="margin-right: 40px">
<el-select v-model="form.target_type" clearable>
<el-option v-for="item in target_ypeOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="类别:" style="margin-right: 40px">
<el-select v-model="form.targetField" clearable>
<el-option v-for="item in target_fieldOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="操作人:" style="margin-right: 40px">
<el-select v-model="form.userId" placeholder="输入操作人" clearable>
<el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间:">
<el-date-picker v-model="value1" type="datetimerange" range-separator="-" start-placeholder="起"
end-placeholder="止" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="query()">查询</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- 表格 -->
<el-card style="margin-top: 30px" class="box-card">
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="id" label="序号" width="75"> </el-table-column>
<el-table-column prop="module" label="模块" width="70"> </el-table-column>
<el-table-column prop="action" label="操作" width="70"> </el-table-column>
<el-table-column prop="target_type" label="目标类型" width="100"> </el-table-column>
<el-table-column prop="target_id" label="目标ID" width="70"> </el-table-column>
<el-table-column prop="target_field" label="类别" width="100"> </el-table-column>
<el-table-column label="操作前">
<template slot-scope="scope">
<div style="height:45px">
{{scope.row.before_update}}
</div>
</template>
</el-table-column>
<el-table-column label="操作后">
<template slot-scope="scope">
<div style="height:45px">
{{scope.row.after_update}}
</div>
</template>
</el-table-column>
<el-table-column label="信息" width="300">
<template slot-scope="scope">
<div style="overflow-x: hidden;white-space: nowrap;">
{{scope.row.message}}
</div>
</template>
</el-table-column>
<el-table-column prop="user.name" label="操作人" width="120"></el-table-column>
<el-table-column label="操作时间" width="100">
<template slot-scope="scope">
<p>{{scope.row.created_at}}</p>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- 分页功能 -->
<div class="block">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current_page"
:page-sizes="[15, 50, 100]" :page-size="per_page" layout="total, sizes, prev, pager, next, jumper"
:total="Paginationdata.total">
</el-pagination>
</div>
</div>
</template>
<script>
import { recordList } from "../../api/record";
import { userList } from "../../api/user";
export default {
data() {
return {
target_fieldOptions: [
{
value: "add",
label: "创建",
},
{
value: "status",
label: "状态",
},
{
value: "name",
label: "名称",
},
{
value: "title",
label: "标题",
},
{
value: "import",
label: "导入",
},
{
value: "export",
label: "导出",
},
{
value: "set",
label: "设置",
},
{
value: "cost",
label: "成本",
},
{
value: "stock",
label: "库存",
},
{
value: "inventory",
label: "库存盘点",
},
{
value: "reserve",
label: "预留量",
},
{
value: "timingInventory",
label: "7点盘点",
},
{
value: "pdd.ktt.goods.query.list",
label: "快团团下载绑定商品",
},
{
value: "arrived_today_num",
label: "今日到货",
},
{
value: "loss_num",
label: "损耗",
},
{
value: "pdd.pop.auth.token.create",
label: "快团团授权",
},
{
value: "reference_price",
label: "参考价格",
},
{
value: "update",
label: "更新",
},
{
value: "pdd.ktt.goods.incr.quantity",
label: "快团团库存同步",
},
{
value: "pdd.ktt.order.list",
label: "快团团下载订单",
},
{
value: "pdd.ktt.increment.order.query",
label: "快团团增量下载订单",
},
], //类别
mouduleOptions:[
{
value: "menu",
label: "菜单",
},
{
value: "goods",
label: "商品",
},
{
value: "file",
label: "文件",
},
{
value: "permission",
label: "权限",
},
{
value: "role",
label: "角色",
},
{
value: "user",
label: "用户",
},
{
value: "plat",
label: "平台",
},
],//模块
actionOptions:[
{
value: "POST",
label: "新增",
},
{
value: "PATCH",
label: "更新",
},
{
value: "DELETE",
label: "删除",
},
{
value: "GET",
label: "查看",
},
],//操作
target_ypeOptions:[
{
value: "upload",
label: "上传",
},
{
value: "goods_sku",
label: "商品规格",
},
{
value: "goods_brand",
label: "商品品牌",
},
{
value: "goods_type",
label: "种类",
},
{
value: "menu",
label: "菜单",
},
{
value: "role",
label: "角色",
},
{
value: "permission",
label: "权限",
},
{
value: "user",
label: "用户",
},
{
value: "kuaituantuan",
label: "快团团",
},
{
value: "miaoxuan",
label: "秒选",
},
{
value: "goods",
label: "商品",
},
],//目标类型
userOptions: [], //查询用户列表
form: {
module:'',//模块 goods-商品(单个商品记录必传),'menu' => '菜单',file-文件,permission-权限,role-角色,user-用户,plat-平台
action:'',//操作 POST-新增,PATCH-更新,DELETE-删除,'GET' => '查看',
target_type:'',//目标类型 upload-上传,goods_sku商品规格,goods_brand-商品品牌,goods_type-商品种类,menu-菜单,permission-权限,role-角色,user-用户,kuaituantuan-快团团,miaoxuan-妙选,'goods' => '商品',
targetField: "",//影响字段
userId: "",//操作人id(用户列表)
},
value1: "", //筛选时间变量
tableData: [], //列表数据
Paginationdata: {}, //分页相关数据
current_page: 1, //当前页
per_page: 15, //每页显示数量
};
},
methods: {
//请求列表数据
getList() {
let page = {
page: this.current_page,
per_page: this.per_page,
};
recordList(page).then((res) => {
this.tableData = res.data.data;
this.Paginationdata = res.data.meta;
});
},
// 获取用户列表
getUser() {
userList().then((res) => {
this.userOptions = res.data.data;
});
},
// 查询
query() {
let queryData = {
page: this.current_page,
per_page: this.per_page,
module: this.form.module,
action:this.form.action,
target_type:this.form.target_type,
target_id: this.$route.query.id?this.$route.query.id:'',
target_field: this.form.targetField?this.form.targetField:'',
user_id: this.form.userId,
start_time: this.value1[0]?this.value1[0]:'',
end_time: this.value1[1]?this.value1[1]:'',
};
recordList(queryData).then((res) => {
this.tableData = res.data.data;
this.Paginationdata = res.data.meta;
});
},
//分页功能
handleSizeChange(val) {
//当前条数
this.per_page = val;
this.query();
},
handleCurrentChange(val) {
//当前页
this.current_page = val;
this.query();
},
},
mounted() {
this.getList();
this.getUser();
},
};
</script>
<style scoped>
.block {
margin-top: 30px;
}
::v-deep .el-card__body {
padding: 0;
}
</style>

302
resources/frontend/src/views/store/store.vue
View File

@ -1,188 +1,164 @@
<template> <template>
<div class="conent"> <div class="conent">
<!-- 新增按钮 --> <!-- 新增按钮 -->
<div class="btn"> <el-button type="primary" @click="handAdd">新增</el-button>
<el-button type="primary" @click="handAdd">新增</el-button>
</div>
<div class="table"> <div class="table" style="margin-top: 20px">
<el-table :data="tableData" style="width: 100%"> <el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="ID" width="180"> </el-table-column> <el-table-column prop="id" label="ID" width="180"> </el-table-column>
<el-table-column prop="name" label="店铺名称" width="180"> <el-table-column prop="name" label="店铺名称" width="180">
</el-table-column> </el-table-column>
<el-table-column prop="plat_id" label="所属平台"></el-table-column> <el-table-column prop="plat_id" label="所属平台"></el-table-column>
<el-table-column label="操作"> <el-table-column label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="danger" v-if="scope.row.status === '未授权'"><a :href="scope.row.authUrl" target="_blank" <el-button type="danger" v-if="scope.row.status === '未授权'"><a :href="scope.row.authUrl"
rel="noopener noreferrer">&nbsp;&nbsp;授&nbsp;&nbsp;&nbsp;权&nbsp;&nbsp;</a></el-button> target="_blank"
<div v-if="scope.row.status === '已授权'"> rel="noopener noreferrer">&nbsp;&nbsp;授&nbsp;&nbsp;&nbsp;权&nbsp;&nbsp;</a>
<el-button type="success" :disabled="true">{{ </el-button>
scope.row.status <div v-if="scope.row.status === '已授权'">
}}</el-button> <el-button type="success" :disabled="true">{{
<el-button @click="download(scope.row)">下载商品</el-button> scope.row.status
}}</el-button>
<el-button @click="download(scope.row)">下载商品</el-button>
</div>
<div v-if="scope.row.status === '重新授权'">
<el-button type="danger" target="_blank"><a :href="scope.row.authUrl"
rel="noopener noreferrer">重新授权</a>
</el-button>
<el-button @click="download(scope.row)">下载商品</el-button>
</div>
<div v-if="scope.row.status === '无需授权'">
<el-button type="success" :disabled="true">{{
scope.row.status
}}</el-button>
<el-button @click="download(scope.row)">下载商品</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页功能 -->
<div class="block">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
</el-pagination>
</div>
<!-- 新增店铺 -->
<el-dialog title="新增店铺" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
<el-form :model="form">
<el-form-item label="店铺名称">
<el-input v-model="form.name" placeholder="输入店铺名称"></el-input>
</el-form-item>
<el-form-item label="店铺平台">
<el-select v-model="form.plat_id" placeholder="输入店铺平台">
<el-option v-for="(item, index) in storeId" :key="index" :label="item" :value="index">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addSubmit">确 定</el-button>
</div> </div>
<div v-if="scope.row.status === '重新授权'"> </el-dialog>
<el-button type="danger" target="_blank"><a :href="scope.row.authUrl" rel="noopener noreferrer">重新授权</a>
</el-button>
<el-button @click="download(scope.row)">下载商品</el-button>
</div>
<div v-if="scope.row.status === '无需授权'">
<el-button type="success" :disabled="true">{{
scope.row.status
}}</el-button>
<el-button @click="download(scope.row)">下载商品</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div> </div>
<!-- 新增店铺 -->
<el-dialog title="新增店铺" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
<el-form :model="form">
<el-form-item label="店铺名称">
<el-input v-model="form.name" placeholder="输入店铺名称"></el-input>
</el-form-item>
<el-form-item label="店铺平台">
<el-select v-model="form.plat_id" placeholder="输入店铺平台">
<el-option v-for="(item, index) in storeId" :key="index" :label="item" :value="index">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addSubmit">确 定</el-button>
</div>
</el-dialog>
<!-- 分页功能 -->
<div class="block">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current_page"
:page-sizes="[15, 50, 100]" :page-size="per_page" layout="total, sizes, prev, pager, next, jumper"
:total="Paginationdata.total">
</el-pagination>
</div>
</div>
</template> </template>
<script> <script>
import { shopListId, shopAdd, storeList, downloadGoods } from "../../api/shop"; import { shopListId, shopAdd, storeList, downloadGoods } from "../../api/shop";
export default { export default {
data() { data() {
return { return {
dialogFormVisible: false, dialogFormVisible: false,
form: { form: {
name: "", name: "",
plat_id: "", plat_id: "",
}, },
storeId: [], // 店铺id storeId: [], // 店铺id
tableData: [], tableData: [],
Paginationdata: {}, //分页相关数据 Paginationdata: {}, //分页相关数据
current_page: 1, //当前页 current_page: 1, //当前页
per_page: 15, //每页显示数量 per_page: 15, //每页显示数量
}; };
}, },
mounted() { mounted() {
// 展示店铺列表 // 展示店铺列表
this.getStoreList(); this.getStoreList();
}, },
methods: { methods: {
// 点击新增 // 点击新增
handAdd() { handAdd() {
this.form.name = ""; this.form.name = "";
this.form.plat_id = ""; this.form.plat_id = "";
this.dialogFormVisible = true; this.dialogFormVisible = true;
this.getshop(); this.getshop();
}, },
// 新增商品 // 新增商品
addSubmit() { addSubmit() {
const datas = this.form; const datas = this.form;
shopAdd(datas).then((res) => { shopAdd(datas).then((res) => {
if (res.status == 200) { if (res.status == 200) {
this.$message({ this.$message({
type: "success", type: "success",
message: "添加成功", message: "添加成功",
});
}
this.getStoreList();
}); });
} this.dialogFormVisible = false;
this.getStoreList(); },
});
this.dialogFormVisible = false;
},
// 店铺列表 // 店铺列表
getStoreList() { getStoreList() {
let page = { let page = {
page: this.current_page, page: this.current_page,
per_page: this.per_page, per_page: this.per_page,
}; };
storeList(page).then((res) => { storeList(page).then((res) => {
this.tableData = res.data.data; this.tableData = res.data.data;
this.Paginationdata = res.data.meta; this.Paginationdata = res.data.meta;
}); });
}, },
//分页功能 //分页功能
handleSizeChange(val) { handleSizeChange(val) {
//当前条数 //当前条数
this.per_page = val; this.per_page = val;
this.getStoreList(); this.getStoreList();
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
//当前页 //当前页
this.current_page = val; this.current_page = val;
this.getStoreList(); this.getStoreList();
}, },
// 店铺平台 // 店铺平台
getshop() { getshop() {
shopListId().then((res) => { shopListId().then((res) => {
this.storeId = res.data.data; this.storeId = res.data.data;
}); });
}, },
// 下载商品 // 下载商品
download(row) { download(row) {
downloadGoods(row.id).then((res) => { downloadGoods(row.id).then((res) => {
}); });
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
a { a {
text-decoration: none; text-decoration: none;
color: white; color: white;
} }
.block {
.conent {
width: 100%;
min-height: calc(100vh - 200px);
position: relative;
}
.btn {
height: 104px;
border-radius: 5px;
display: flex;
align-items: center;
}
.el-button {
width: 114px;
height: 44px;
border-radius: 3px;
}
.table {
margin-top: 20px; margin-top: 20px;
} }
</style>
.block {
margin-top: 30px;
}
</style>

294
resources/frontend/src/views/system/role.vue
View File

@ -1,189 +1,159 @@
<template> <template>
<div class="conent"> <div class="conent">
<!-- 新增按钮 --> <!-- 点击新增弹出表单 -->
<div class="btn"> <div class="from">
<el-button type="primary" @click="dialogVisible2 = true">新增</el-button> <el-dialog title="新增角色" :visible.sync="dialogVisible2" width="30%" :close-on-click-modal="false">
</div> <div>
<el-form label-width="80px">
<!-- 点击新增弹出表单 --> <el-form-item label="角色名称">
<div class="from"> <el-input v-model="newrole"></el-input>
<el-dialog title="新增角色" :visible.sync="dialogVisible2" width="30%" :close-on-click-modal="false"> </el-form-item>
<div> <div class="from-btn">
<el-form label-width="80px"> <el-button type="danger" @click="dialogVisible2 = false">取消</el-button>
<el-form-item label="角色名称"> <el-button @click="onSubmit">确认</el-button>
<el-input v-model="newrole"></el-input> </div>
</el-form-item> </el-form>
<div class="from-btn"> </div>
<el-button type="danger" @click="dialogVisible2 = false">取消</el-button> </el-dialog>
<el-button @click="onSubmit">确认</el-button>
</div>
</el-form>
</div> </div>
</el-dialog>
</div>
<!-- 角色表单 --> <!-- 新增按钮 -->
<div class="table"> <el-button type="primary" @click="dialogVisible2 = true">新增</el-button>
<el-table :data="tableList" style="width: 100%">
<el-table-column prop="id" label="ID"> </el-table-column>
<el-table-column prop="name" label="角色名称"> </el-table-column>
<el-table-column label="权限内容">
<template slot-scope="scope">
<span v-for="item in scope.row.permissions" :key="item.id">{{ item.name }}&nbsp;</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="onEdit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 点击编辑弹出权限框 --> <!-- 角色列表 -->
<el-dialog title="编辑权限" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false"> <div class="table" style="margin-top: 20px">
<el-tree v-if="isShowtree" :data="Role_Permission" show-checkbox :default-expand-all="false" node-key="id" <el-table :data="tableList" style="width: 100%">
ref="tree" highlight-current :props="defaultProps" :default-checked-keys="chekedKeys" v-model="permissionIds"> <el-table-column prop="id" label="ID"> </el-table-column>
</el-tree> <el-table-column prop="name" label="角色名称"> </el-table-column>
<span slot="footer" class="dialog-footer"> <el-table-column label="权限内容">
<el-button @click="cancel()">取 消</el-button> <template slot-scope="scope">
<el-button type="primary" @click="getCheckedKeys()">确 定</el-button> <span v-for="item in scope.row.permissions" :key="item.id">{{ item.name }}&nbsp;</span>
</span> </template>
</el-dialog> </el-table-column>
</div> <el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="onEdit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 点击编辑弹出权限框 -->
<el-dialog title="编辑权限" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
<el-tree v-if="isShowtree" :data="Role_Permission" show-checkbox :default-expand-all="false" node-key="id"
ref="tree" highlight-current :props="defaultProps" :default-checked-keys="chekedKeys"
v-model="permissionIds">
</el-tree>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel()">取 消</el-button>
<el-button type="primary" @click="getCheckedKeys()">确 定</el-button>
</span>
</el-dialog>
</div>
</template> </template>
<script> <script>
import { import {
roleList, roleList,
roleAdd, roleAdd,
jurisdiction, jurisdiction,
jurisdictionEdit, jurisdictionEdit,
} from "../../api/role.js"; } from "../../api/role.js";
export default { export default {
data() { data() {
return { return {
id: "", //点击角色的id id: "", //点击角色的id
tableList: [], //列表数据 tableList: [], //列表数据
rolePermissions: [], rolePermissions: [],
newrole: "", //添加角色框input newrole: "", //添加角色框input
dialogVisible: false, //编辑按钮打开表单变量 dialogVisible: false, //编辑按钮打开表单变量
dialogVisible2: false, //新增按钮打开表单变量 dialogVisible2: false, //新增按钮打开表单变量
permissionIds: [], //复选框选中权限的ID permissionIds: [], //复选框选中权限的ID
allpermissionIds: {}, //id数组添加进对象 allpermissionIds: {}, //id数组添加进对象
Role_Permission: [], //权限列表数据 Role_Permission: [], //权限列表数据
defaultProps: { defaultProps: {
children: "children", children: "children",
label: "name", label: "name",
}, },
isShowtree: false, isShowtree: false,
chekedKeys: [], chekedKeys: [],
}; };
}, },
mounted() { mounted() {
this.getroleList(); this.getroleList();
this.getJurisdiction(); this.getJurisdiction();
}, },
methods: { methods: {
//角色表单数据请求 //角色表单数据请求
getroleList() { getroleList() {
roleList().then((res) => { roleList().then((res) => {
this.tableList = res.data.data; this.tableList = res.data.data;
});
},
//角色权限数据请求
getJurisdiction() {
jurisdiction().then((res) => {
this.Role_Permission = res.data.data;
});
},
// 点击新增
onSubmit() {
let roleName = {
name: this.newrole,
};
roleAdd(roleName).then((res) => {
this.dialogVisible2 = false;
this.getroleList();
if (res.status == 201) {
this.$message({
message: "角色添加成功！",
type: "success",
}); });
} },
});
},
// 点击编辑 //角色权限数据请求
onEdit(row) { getJurisdiction() {
this.id = row.id; jurisdiction().then((res) => {
let arr = row.permissions.map((item) => { this.Role_Permission = res.data.data;
return item.id; });
}); },
this.chekedKeys = arr;
this.dialogVisible = true;
this.isShowtree = true;
},
// 点击取消 // 点击新增
cancel() { onSubmit() {
this.dialogVisible = false; let roleName = {
this.isShowtree = false; name: this.newrole,
}, };
roleAdd(roleName).then((res) => {
this.dialogVisible2 = false;
this.getroleList();
if (res.status == 201) {
this.$message({
message: "角色添加成功！",
type: "success",
});
}
});
},
//编辑权限确认 // 点击编辑
getCheckedKeys() { onEdit(row) {
let id = this.id; //选中角色的ID this.id = row.id;
this.permissionIds = this.$refs.tree.getCheckedKeys(); //选中权限的ID let arr = row.permissions.map((item) => {
this.allpermissionIds = { return item.id;
permissionIds: this.permissionIds, });
}; this.chekedKeys = arr;
jurisdictionEdit(id, this.allpermissionIds).then((res) => { this.dialogVisible = true;
if (res.status === 200) { this.isShowtree = true;
},
// 点击取消
cancel() {
this.dialogVisible = false; this.dialogVisible = false;
this.getroleList(); this.isShowtree = false;
this.$message({ },
message: "权限修改成功！",
type: "success", //编辑权限确认
getCheckedKeys() {
let id = this.id; //选中角色的ID
this.permissionIds = this.$refs.tree.getCheckedKeys(); //选中权限的ID
this.allpermissionIds = {
permissionIds: this.permissionIds,
};
jurisdictionEdit(id, this.allpermissionIds).then((res) => {
if (res.status === 200) {
this.dialogVisible = false;
this.getroleList();
this.$message({
message: "权限修改成功！",
type: "success",
});
}
}); });
} },
});
},
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.conent { </style>
width: 100%;
min-height: calc(100vh - 200px);
}
.btn {
height: 104px;
border-radius: 5px;
display: flex;
align-items: center;
}
.el-button {
width: 114px;
height: 44px;
border-radius: 3px;
}
.table {
margin-top: 20px;
}
.from-btn {
display: flex;
justify-content: space-around;
align-content: center;
}
</style>

429
resources/frontend/src/views/users/users.vue
View File

@ -1,262 +1,233 @@
<template> <template>
<div class="conent"> <div class="conent">
<!-- 新增按钮 -->
<div class="btn">
<el-button type="primary" @click="dialogVisible = true">新增</el-button>
</div>
<!-- 点击新增弹出表单 --> <!-- 点击新增弹出表单 -->
<div class="from"> <div class="from">
<el-dialog title="新增用户" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false"> <el-dialog title="新增用户" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
<div> <div>
<el-form label-width="80px"> <el-form label-width="80px">
<el-form-item label="姓名"> <el-form-item label="姓名">
<el-input v-model="from.name"></el-input> <el-input v-model="from.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="密码"> <el-form-item label="密码">
<el-input v-model="from.password"></el-input> <el-input v-model="from.password"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="确认密码"> <el-form-item label="确认密码">
<el-input v-model="from.password_confirmation"></el-input> <el-input v-model="from.password_confirmation"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="角色"> <el-form-item label="角色">
<template> <template>
<el-select v-model="value" placeholder="请选择"> <el-select v-model="value" placeholder="请选择">
<el-option v-for="item in roleOptions" :key="item.value" :label="item.name" :value="item.name"> <el-option v-for="item in roleOptions" :key="item.value" :label="item.name"
</el-option> :value="item.name">
</el-select> </el-option>
</template> </el-select>
</el-form-item> </template>
<div class="from-btn"> </el-form-item>
<el-button type="danger" @click="dialogVisible = false">取消</el-button> <div class="from-btn">
<el-button @click="onSubmit">确认</el-button> <el-button type="danger" @click="dialogVisible = false">取消</el-button>
</div> <el-button @click="onSubmit">确认</el-button>
</el-form> </div>
</el-form>
</div>
</el-dialog>
</div> </div>
</el-dialog>
</div>
<!-- 点击编辑弹出表单信息 --> <!-- 点击编辑弹出表单信息 -->
<div class="edit_from"> <div class="edit_from">
<el-dialog title="编辑" :visible.sync="editVisible" width="30%" :close-on-click-modal="false"> <el-dialog title="编辑" :visible.sync="editVisible" width="30%" :close-on-click-modal="false">
<div> <div>
<el-form label-width="80px"> <el-form label-width="80px">
<el-form-item label="ID"> <el-form-item label="ID">
<el-input v-model="edit_from.id"></el-input> <el-input v-model="edit_from.id"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="姓名"> <el-form-item label="姓名">
<el-input v-model="edit_from.name"></el-input> <el-input v-model="edit_from.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="邮箱"> <el-form-item label="邮箱">
<el-input v-model="edit_from.email"></el-input> <el-input v-model="edit_from.email"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="角色"> <el-form-item label="角色">
<template> <template>
<el-select v-model="edit_from.role_name" placeholder="请选择"> <el-select v-model="edit_from.role_name" placeholder="请选择">
<el-option v-for="item in roleOptions" :key="item.value" :label="item.name" :value="item.name"> <el-option v-for="item in roleOptions" :key="item.value" :label="item.name"
</el-option> :value="item.name">
</el-select> </el-option>
</template> </el-select>
</el-form-item> </template>
<el-form-item label="密码"> </el-form-item>
<el-input v-model="edit_from.password"></el-input> <el-form-item label="密码">
</el-form-item> <el-input v-model="edit_from.password"></el-input>
<el-form-item label="密码确认"> </el-form-item>
<el-input v-model="edit_from.password_confirmation"></el-input> <el-form-item label="密码确认">
</el-form-item> <el-input v-model="edit_from.password_confirmation"></el-input>
<div class="from-btn"> </el-form-item>
<el-button type="danger" @click="editVisible = false">取消</el-button> <div class="from-btn">
<el-button @click="onEdit()">确认</el-button> <el-button type="danger" @click="editVisible = false">取消</el-button>
</div> <el-button @click="onEdit()">确认</el-button>
</el-form> </div>
</el-form>
</div>
</el-dialog>
</div> </div>
</el-dialog>
</div>
<!-- 用户列表 --> <!-- 新增按钮 -->
<div class="table"> <el-button type="primary" @click="dialogVisible = true">新增</el-button>
<template>
<el-table :data="tableList" style="width: 100%"> <!-- 用户列表 -->
<el-table-column prop="id" label="ID"></el-table-column> <div class="table" style="margin-top: 20px">
<el-table-column prop="name" label="姓名"></el-table-column> <template>
<el-table-column label="角色"> <el-table :data="tableList" style="width: 100%">
<template slot-scope="scope">{{ <el-table-column prop="id" label="ID"></el-table-column>
scope.row.roles[0].name <el-table-column prop="name" label="姓名"></el-table-column>
}}</template> <el-table-column label="角色">
</el-table-column> <template slot-scope="scope">{{
<el-table-column label="操作"> scope.row.roles[0].name
<template slot-scope="scope"> }}</template>
<el-button @click="openEdit(scope.row)">编辑</el-button> </el-table-column>
<!-- <el-button type="danger">删除</el-button> --> <el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="openEdit(scope.row)">编辑</el-button>
<!-- <el-button type="danger">删除</el-button> -->
</template>
</el-table-column>
</el-table>
</template> </template>
</el-table-column> </div>
</el-table>
</template>
</div>
<!-- 分页功能 --> <!-- 分页功能 -->
<div class="block"> <div class="block">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current_page" <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:page-sizes="[15, 50, 100]" :page-size="per_page" layout="total, sizes, prev, pager, next, jumper" :current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
:total="Paginationdata.total"> layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
</el-pagination> </el-pagination>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { import {
userList, userList,
userAdd, userAdd,
userEdit, userEdit,
userConfirm, userConfirm,
roleList, roleList,
} from "../../api/user"; } from "../../api/user";
export default { export default {
data() { data() {
return { return {
id: "", id: "",
dialogVisible: false, //新增按钮变量 dialogVisible: false, //新增按钮变量
editVisible: false, //编辑按钮变量 editVisible: false, //编辑按钮变量
tableList: [], //列表数据 tableList: [], //列表数据
from: { from: {
//表单数据（用户名密码确认密码角色名） //表单数据（用户名密码确认密码角色名）
name: "", name: "",
password: "", password: "",
password_confirmation: "", password_confirmation: "",
role_name: "", role_name: "",
}, },
edit_from: { edit_from: {
// 编辑返回默认数据 // 编辑返回默认数据
created_at: "", created_at: "",
deleted_at: null, deleted_at: null,
email: "", email: "",
id: "", id: "",
name: "", name: "",
password: "", password: "",
password_confirmation: "", password_confirmation: "",
role_name: "", role_name: "",
}, },
Paginationdata: {}, //分页相关数据 Paginationdata: {}, //分页相关数据
current_page: 1, //当前页 current_page: 1, //当前页
per_page: 15, //每页显示数量 per_page: 15, //每页显示数量
roleOptions: [], //角色下拉框 roleOptions: [], //角色下拉框
value: "", //角色下拉框选择 value: "", //角色下拉框选择
}; };
}, },
mounted() { mounted() {
this.getList(); //进入调用用户表单数据请求 this.getList(); //进入调用用户表单数据请求
this.getrole(); //进入调用角色数据请求 this.getrole(); //进入调用角色数据请求
}, },
methods: { methods: {
// 角色列表请求 // 角色列表请求
getrole() { getrole() {
roleList().then((res) => { roleList().then((res) => {
this.roleOptions = res.data.data; this.roleOptions = res.data.data;
}); });
}, },
//用户表单数据请求 //用户表单数据请求
getList() { getList() {
let page = { let page = {
page: this.current_page, page: this.current_page,
per_page: this.per_page, per_page: this.per_page,
}; };
userList(page).then((res) => { userList(page).then((res) => {
this.tableList = res.data.data; this.tableList = res.data.data;
this.Paginationdata = res.data.meta; this.Paginationdata = res.data.meta;
}); });
}, },
//点击新增确认 //点击新增确认
onSubmit() { onSubmit() {
this.from.role_name = this.value; this.from.role_name = this.value;
let from = this.from; let from = this.from;
userAdd(from).then((res) => { userAdd(from).then((res) => {
this.tableList = [...this.tableList, res.data.data]; this.tableList = [...this.tableList, res.data.data];
this.dialogVisible = false; this.dialogVisible = false;
this.getList(); this.getList();
this.from = {}; this.from = {};
this.$message({ this.$message({
message: "账号添加成功！", message: "账号添加成功！",
type: "success", type: "success",
}); });
}); });
}, },
//点击编辑 //点击编辑
openEdit(e) { openEdit(e) {
this.editVisible = true; this.editVisible = true;
let id = e.id; let id = e.id;
this.id = e.id; this.id = e.id;
// 请求id对应数据 // 请求id对应数据
userEdit(id).then((res) => { userEdit(id).then((res) => {
this.edit_from = res.data.data; this.edit_from = res.data.data;
}); });
}, },
//编辑完确认请求 //编辑完确认请求
onEdit() { onEdit() {
userConfirm(this.id, this.edit_from).then((res) => { userConfirm(this.id, this.edit_from).then((res) => {
this.tableList = [...this.tableList, res.data.data]; this.tableList = [...this.tableList, res.data.data];
this.editVisible = false; this.editVisible = false;
this.getList(); this.getList();
this.$message({ this.$message({
message: "账号修改成功！", message: "账号修改成功！",
type: "success", type: "success",
}); });
}); });
this.editVisible = false; this.editVisible = false;
}, },
//分页功能 //分页功能
handleSizeChange(val) { handleSizeChange(val) {
//当前条数 //当前条数
this.per_page = val; this.per_page = val;
this.getList(); this.getList();
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
//当前页 //当前页
this.current_page = val; this.current_page = val;
this.getList(); this.getList();
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.conent { .block {
width: 100%;
min-height: calc(100vh - 200px);
position: relative;
}
.btn {
height: 104px;
border-radius: 5px;
display: flex;
align-items: center;
}
.el-button {
width: 114px;
height: 44px;
border-radius: 3px;
}
.table {
margin-top: 20px; margin-top: 20px;
} }
</style>
.from-btn {
display: flex;
justify-content: space-around;
align-content: center;
}
.block {
margin-top: 30px;
}
</style>

472
resources/frontend/src/views/yingyeting/addgoods/addgoods.vue
View File

@ -1,472 +0,0 @@
<template>
<div>
<el-card class="box-card">
<div class="goods" style="margin: 20px">
<div class="add-item-info" style="margin-bottom: 10px; margin-left: 52px">
<div>
<div style="font-size: 14px">商品列表：</div>
<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>
</div>
<span style="font-size: 14px">商品图片：
<el-upload class="avatar-uploader" action="#" :limit="1" :auto-upload="false" :show-file-list="true"
list-type="picture-card" :on-change="handleAvatarSuccess">
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</span>
</div>
<!-- 编辑按钮进入显示 -->
<el-form ref="form" :inline="true" :model="form" v-if="goodsData != ''">
<div>
<el-form-item label="商品名称：">
<el-input placeholder="商品名称" v-model="goodsData.goods.title"></el-input>
</el-form-item>
<el-form-item label="商品编码：">
<el-input placeholder="商品编码" v-model="goodsData.goods.goods_code"></el-input>
</el-form-item>
<el-form-item label="商品种类：">
<el-select v-model="goodsData.goods.type_id" placeholder="商品种类" filterable>
<el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品品牌：">
<el-select v-model="goodsData.goods.brand_id" placeholder="商品品牌" filterable>
<el-option v-for="item in brand" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</div>
<div>
<el-form-item label="商品规格：">
<el-input placeholder="商品规格" v-model="goodsData.title"></el-input>
</el-form-item>
<el-form-item label="规格编码：">
<el-input v-model="goodsData.sku_code" placeholder="商品编码">
</el-input>
</el-form-item>
<el-form-item label="商品状态：">
<el-select v-model="goodsData.status">
<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="goodsData.num" placeholder="商品数量">
</el-input>
</el-form-item>
<el-form-item label="商品成本：">
<el-input v-model="goodsData.cost" placeholder="商品成本">
</el-input>
</el-form-item>
</div>
</div>
<div class="btn">
<el-form-item>
<el-button type="primary" @click="Edititem()">保存</el-button>
<el-button plain @click="cancel()">取消</el-button>
</el-form-item>
</div>
</el-form>
<!-- 新建商品进入显示 -->
<el-form ref="form" :inline="true" :model="form" v-if="goodsData == ''">
<div>
<el-form-item label="商品名称：">
<el-input placeholder="商品名称" v-model="form.title" :disabled="true" v-if="isShow"></el-input>
<el-input placeholder="商品名称" v-model="form.title" v-else></el-input>
</el-form-item>
<el-form-item label="商品编码：">
<el-input placeholder="商品编码" v-model="form.goods_code" :disabled="true" v-if="isShow"></el-input>
<el-input placeholder="商品编码" v-model="form.goods_code" v-else></el-input>
</el-form-item>
<el-form-item label="商品种类：">
<el-select v-model="form.type_id" placeholder="商品种类" filterable>
<el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品品牌：">
<el-select v-model="form.brand_id" placeholder="商品品牌" filterable>
<el-option v-for="item in brand" :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">
<span style="margin-right: -15px">{{ i + 1 }}.</span>
<el-form-item label="商品规格：">
<el-input placeholder="商品规格" v-model="skus[i].title"></el-input>
</el-form-item>
<span class="addto" @click="handleAdd()">+</span>
<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-button type="primary" @click="handleDelete(i)">删除</el-button>
</div>
</div>
<div class="btn">
<el-form-item>
<el-button type="primary" @click="handleSave()">保存</el-button>
<el-button plain @click="cancel()">取消</el-button>
</el-form-item>
</div>
</el-form>
</div>
</el-card>
</div>
</template>
<script>
import {
addGoods,
checkGoods,
goodsList,
updateGoods,
imgUpload,
} from "../../../api/goods.js";
import { goods_types, Brand_goods_types } from "../../../api/rankingData.js";
export default {
data() {
return {
imgs: [],
gallery: "",
imageUrl: "",
lid: "", // 选择的商品列表id
gid: "", // 商品id
brand: [], // 品牌列表
cate: [], // 种类列表
goodschoose: [], // 商品列表
goodsID: "", //进入页面是否有商品id
goodsData: [], //编辑按钮进入获取的商品数据
// 规格列表
skus: [
{
title: "",
sku_code: "",
status: "0",
num: "0",
cost: "0",
reserve: "0",
},
],
// 增加商品表单
form: {
goods_id: "",
title: "",
img_url: "",
type_id: "",
brand_id: "",
goods_code: "",
},
// 商品状态
options: [
{
id: "0",
label: "下架",
},
{
id: "1",
label: "在售",
},
{
id: "2",
label: "预警",
},
],
file: [],
isShow: false,
URL: "",
};
},
watch: {
lid: {
handler(newVal, oldVal) {
if (newVal) {
this.goodschoose.forEach((item) => {
if (item.id == newVal) {
this.form = { ...item };
}
});
}
},
deep: true, // 深度监听
immediate: true, // 第一次改变就执行
},
},
methods: {
//图片上传
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;
if (this.goodsData.length !== 0) {
this.goodsData.goods.img_url = res.data.resource;
}
});
},
// 查看一个商品
handleUpdate() {
this.gid = this.$route.query;
if (this.gid.id) {
checkGoods(this.gid.id).then((res) => {
const data = res.data.data;
const sku = this.skus[0];
const list = {};
Object.keys(data).map((key) => {
Object.keys(sku).map((i) => {
if (key == i) {
list[i] = data[key];
}
});
});
});
}
},
// 商品列表
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,
};
addGoods(updata).then((res) => {
if (res.statusText === "OK") {
this.$message({
message: "商品添加成功！",
type: "success",
});
this.updateForm();
this.$router.push("/GOODS_LIST");
}
});
},
// 修改成功后重置表单
updateForm() {
this.form = {
title: "",
img_url: "abc.jpg",
type_id: "",
brand_id: "",
goods_code: "",
};
this.skus = [
{
title: "",
sku_code: "",
status: "",
num: "",
cost: "",
},
];
},
// 增加一个商品规格
handleAdd() {
this.skus.push({
title: "",
sku_code: "",
status: "0",
num: "",
cost: "",
});
},
// 删除一个商品规格
handleDelete(index) {
this.skus.splice(index, 1);
},
// 商品列表页进入带数据表单
getgoodsidData() {
let id = this.bigID;
checkGoods(id).then((res) => {
this.goodsData = res.data.data;
});
},
// 编辑确认请求
Edititem() {
let id = this.bigID;
let goods = {
title: this.goodsData.goods.title,
img_url: this.goodsData.goods.img_url,
type_id: this.goodsData.goods.type_id,
brand_id: this.goodsData.goods.brand_id,
goods_code: this.goodsData.goods.goods_code,
};
let sku = {
title: this.goodsData.title,
sku_code: this.goodsData.sku_code,
status: this.goodsData.status,
num: this.goodsData.num,
cost: this.goodsData.cost,
};
if (sku.status == "下架") {
sku.status = 0;
} else if (sku.status == "在售") {
sku.status = 1;
} else if (sku.status == "预警") {
sku.status = 2;
}
let updateData = {
goods_id: this.goodsData.goods_id,
goods,
sku,
};
updateGoods(id, updateData).then((res) => {
this.$router.push("/GOODS_LIST");
this.$message({
message: "商品编辑成功！",
type: "success",
});
});
},
// 取消按钮
cancel() {
this.$router.push("/GOODS_LIST");
},
onchange(value) {
if (value !== "") {
this.isShow = true;
}
if (value === "") {
this.isShow = false;
this.form = {};
}
},
},
created() {
this.goodsID = sessionStorage.getItem("商品ID");
this.bigID = sessionStorage.getItem("ID");
},
mounted() {
this.gid = this.$route.query;
// 获取商品种类
goods_types().then((res) => {
this.cate = res.data.data;
});
// 获取商品品牌
Brand_goods_types().then((res) => {
this.brand = res.data.data;
});
this.handleList();
this.handleUpdate();
this.getgoodsidData();
},
beforeDestroy() {
sessionStorage.removeItem("商品ID"); //销毁内存中的商品ID
sessionStorage.removeItem("ID"); //销毁内存中的ID
},
};
</script>
<style scoped>
.el-upload--picture-card {
width: 50px;
height: 50px;
}
.el-form-item {
margin-left: 60px;
}
.addto {
display: inline-block;
width: 30px;
height: 30px;
background-color: blue;
color: #fff;
font-size: 25px;
text-align: center;
line-height: 30px;
border-radius: 5px;
margin-top: 4px;
}
/* 分割 */
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 148px;
height: 148px;
line-height: 148px;
text-align: center;
}
.avatar {
width: 148px;
height: 148px;
display: block;
}
</style>

972
resources/frontend/src/views/yingyeting/yingyeting.vue
View File

@ -1,972 +0,0 @@
<template>
<!-- 商品管理页面 -->
<div>
<!-- 条件筛选板块 -->
<el-card class="box-card">
<div class="goods">
<el-form ref="form" :inline="true" :model="form">
<el-form-item label="商品名称:">
<el-input v-model="form.goods_title" placeholder="商品名称" style="width: 100px">
</el-input>
</el-form-item>
<el-form-item label="商品种类:">
<el-select v-model="form.type_id" placeholder="商品种类" style="width: 125px">
<el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品规格:">
<el-input v-model="form.sku_title" placeholder="商品规格" style="width: 100px">
</el-input>
</el-form-item>
<el-form-item label="商品品牌:">
<el-select v-model="form.brand_id" placeholder="商品品牌" style="width: 125px">
<el-option v-for="item in brand" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品状态:">
<el-select v-model="form.status" placeholder="商品状态" style="width: 115px">
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="form.keyword_type" style="width: 80px; margin-right: 5px; margin-left: 10px">
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始时间"
end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" @change="getSTime" style="width: 300px">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleChoose()">筛选</el-button>
<el-button plain @click="handleReChoose()">重置筛选</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="box-card1" style="margin-top: 30px">
<div>
<!-- 表格头部操作 -->
<div>
<span>全部商品(共{{ total }}条)</span>
<div class="btn">
<el-button type="primary" plain @click="addNewgoods">新建商品</el-button>
<el-button type="primary" plain @click="update()">上新</el-button>
<el-button type="primary" plain @click="onCount()">库存盘点</el-button>
<el-button type="primary" plain @click="handleImport()">导入商品</el-button>
<el-button type="primary" plain @click="handleExport()">表格导出</el-button>
</div>
</div>
<!-- 参考售价弹出确认框 -->
<el-dialog :visible.sync="dialogVisible3" width="20%" :close-on-click-modal="false">
<span>您确定要修改吗?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible3 = false">取 消</el-button>
<el-button type="primary" @click="reference_priceRequest()">确 定</el-button>
</span>
</el-dialog>
<!-- 预留量弹出框 -->
<el-dialog :visible.sync="dialogVisible4" width="20%" :close-on-click-modal="false">
<span>您确定要修改吗?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible4 = false">取 消</el-button>
<el-button type="primary" @click="reserveRequest()">确 定</el-button>
</span>
</el-dialog>
<!-- 点击表格导出弹出框 -->
<el-dialog title="表格导出" :visible.sync="Tableexport" width="30%" :close-on-click-modal="false">
<div>
选择:
<template>
<el-select v-model="value" placeholder="盘点表/运营表/成本表">
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</template>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="Tableexport = false">取 消</el-button>
<el-button type="primary" @click="derivation()">确 定</el-button>
<!-- <a href="/goods_skus/export">确定</a> -->
</span>
</el-dialog>
<!-- 点击商品文件导入弹出框 -->
<el-dialog title="导入商品" :visible.sync="docImportDrawer" direction="rtl" custom-class="demo-drawer" ref="drawer"
size="20%" width="30%" @close="importForm.imFileList = []" :close-on-click-modal="false">
<div class="demo-drawer__content">
<el-form :model="importForm" :rules="improtRules" ref="importForm">
<el-form-item label="上传文件" label-width="100px" prop="fileList">
<el-upload class="uploader" action="" :limit="1"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
:file-list="importForm.fileList" :auto-upload="false" :on-change="importFileChange">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-form>
<div class="demo-drawer__footer btn-style">
<el-button @click="docImportDrawer = false">取 消</el-button>
<el-button type="primary" @click="saveUpload">上 传</el-button>
</div>
</div>
<div class="import-right">
<el-button size="medium" class="button-query">
<a :href="`http://erp.staging.miaoxuan66.cn/goods/import/template`">下载模板</a>
</el-button>
</div>
</el-dialog>
<!-- 表格 -->
<el-table ref="multipleTable" :data="tableData" class="table" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange" max-height="1500">
<!-- 多选框 -->
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="商品信息" width="300">
<template slot-scope="scope">
<div class="commodityimg">
<img :src="scope.row.goods.img_url" class="Img" />
</div>
<div>
<p>{{ scope.row.goods.title }}&nbsp;{{ scope.row.title }}</p>
<p>
{{ scope.row.goods.goods_code + "_" + scope.row.sku_code }}
</p>
<p>
{{ scope.row.goods.updated_at }}
</p>
</div>
</template>
</el-table-column>
<el-table-column label="品类">
<template slot-scope="scope">
<div>
{{ 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="品牌">
<template slot-scope="scope">
<div>
{{ scope.row.goods.brand ? scope.row.goods.brand.name : "" }}
</div>
</template>
</el-table-column>
<el-table-column prop="two_days_ago_num" sortable label="2T">
</el-table-column>
<el-table-column prop="yesterday_num" sortable label="1T">
</el-table-column>
<el-table-column sortable label="0T" min-width="80">
<template slot-scope="scope">
<div v-if="isShow">
<el-input v-model="scope.row.arrived_today_num11"></el-input>
</div>
<div v-else>
{{ scope.row.daily.arrived_today_num }}
</div>
</template>
</el-table-column>
<el-table-column prop="cost" sortable label="成本">
<template slot-scope="scope">
<div v-if="isShow">
<el-input v-model="scope.row.cost"></el-input>
</div>
<div v-else>
{{ scope.row.cost != null ? scope.row.cost : 0 }}
</div>
</template>
</el-table-column>
<el-table-column prop="reference_price" sortable label="售价" min-width="80">
<template slot-scope="scope">
<div v-if="scope.row.id === id">
<el-input v-model="scope.row.reference_price" @blur="reference_priceBlur(scope.row)"></el-input>
</div>
<div v-else>
{{ scope.row.reference_price }}
<el-button slot="reference" class="btn11" @click="reference_priceClick(scope.row.id)"><img
src="../../css/img/编辑.png" /></el-button>
</div>
</template>
</el-table-column>
<el-table-column prop="num" sortable label="总量" min-width="80">
</el-table-column>
<el-table-column prop="reserve" sortable label="预留" min-width="80">
<template slot-scope="scope">
<div v-if="scope.row.id === id1">
<el-input v-model="scope.row.reserve" @blur="reservebBlur(scope.row)"></el-input>
</div>
<div v-else>
{{ scope.row.reserve }}
</div>
<el-button slot="reference" class="btn11" @click="onreserve(scope.row.id)"><img src="../../css/img/编辑.png"
alt="" /></el-button>
</template>
</el-table-column>
<el-table-column sortable label="订单" min-width="80">
<template slot-scope="scope">
<div>
<span>{{ scope.row.order_goods_num }}</span>
</div>
<el-popover placement="right-start" width="200" trigger="hover"
v-if="scope.row.order_detail.length !== 0">
<div>
<span v-for="(j, index) in scope.row.order_detail" :key="index">
<div>{{ j.shop.name }}:{{ j.number }}</div>
</span>
</div>
<el-button class="btn11" type="text" slot="reference"><img src="../../css/img/眼睛.png" alt="" />
</el-button>
</el-popover>
</template>
</el-table-column>
<el-table-column sortable label="损耗">
<template slot-scope="scope">
<div v-if="scope.row.id === id2">
<el-input v-model="scope.row.daily.loss_num"></el-input>
</div>
<div v-else>
{{ scope.row.daily.loss_num }}
</div>
<el-popover placement="right-start" width="220" trigger="click" @hide="noBubbles">
<p>损耗:</p>
<el-input v-model="scope.row.daily.loss_num"></el-input>
<el-radio-group v-model="radio">
<el-radio disabled>原因:</el-radio>
<el-radio label="48h以上">48h以上</el-radio>
<el-radio label="到货错误">到货错误</el-radio>
<el-radio label="灰霉">灰霉</el-radio>
<el-radio label="长度">长度</el-radio>
<el-radio label="花朵">花朵</el-radio>
<el-radio label="其他">其他</el-radio>
</el-radio-group>
<div class="list_btn">
<el-button type="primary" @click="onLoss(scope.row)">保存</el-button>
</div>
<el-button slot="reference" class="btn11" @click="loss(scope.row.id)"><img src="../../css/img/编辑.png"
alt="" /></el-button>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="stock" sortable label="库存">
</el-table-column>
<el-table-column prop="address" sortable label="盘点">
<template slot-scope="scope">
<div v-if="stock">
<el-input v-model="scope.row.daily.inventory"></el-input>
</div>
<el-popover placement="right-start" width="100" trigger="hover" :content="
scope.row.daily.inventory_time
? scope.row.daily.inventory_time
: ''
">
<div v-if="!stock" slot="reference">
{{ scope.row.daily.inventory }}
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="status" label="状态"> </el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<div>
<el-button type="text" @click="ejectstock(scope.row)">库存</el-button>
</div>
<div>
<el-button type="text" @click="handleEdit(scope.row.goods_id, scope.row.id)">编辑</el-button>
</div>
<div>
<el-button type="text" @click="goodslog(scope.row)">记录</el-button>
</div>
<!-- 点击库存按钮弹出框 -->
<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-column prop="two_days_ago_num" label="2天前库存">
<template slot-scope="scope">
<div>
{{ scope.row.two_days_ago_num }}
<el-input v-model="scope.row.two_days_ago_num"></el-input>
</div>
</template>
</el-table-column>
<el-table-column prop="yesterday_num" label="1天前库存">
<template slot-scope="scope">
<div>
{{ scope.row.yesterday_num }}
<el-input v-model="scope.row.yesterday_num"></el-input>
</div>
</template>
</el-table-column>
<el-table-column sortable label="今日到货">
<template slot-scope="scope">
<div>
{{ scope.row.daily.arrived_today_num }}
<el-input v-model="scope.row.daily.arrived_today_num"></el-input>
</div>
</template>
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelStock()">取 消</el-button>
<el-button type="primary" @click="oldStock()">确 定</el-button>
</span>
</el-dialog>
</template>
</el-table-column>
</el-table>
</div>
<!-- 底部按钮 -->
<div class="footerBtn" v-show="isShow || stock">
<el-button type="primary" class="confirmbtn" @click="cancel()">取消</el-button>
<el-button type="primary" class="confirmbtn" @click="onSubmit()">保存</el-button>
</div>
<!-- 分页功能 -->
<div class="page">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
</el-pagination>
</div>
</el-card>
</div>
</template>
<script>
import axios from "axios";
import { goods_types, Brand_goods_types } from "../../api/rankingData.js";
import {
goods,
update,
singleUpdate,
shops,
tableExport,
} from "../../api/goods";
export default {
data() {
return {
id: "", //参考售价的id
id1: "", //预留量的id
id2: "", //损耗的id
total: 0, // 总条数
radio: "", // 损耗选择的原因
brand: [], // 品牌列表
cate: [], // 种类列表
tableData: [], // 商品列表
shopsData: [], //店铺传参数组
sku_code: {}, //店铺传参对象
// shopOrder: {}, //店铺悬浮窗详情数据
options: [
{
id: "1",
label: "在售",
},
{
id: "2",
label: "预警",
},
{
id: "0",
label: "下架",
},
], // 商品状态
options2: [
{
value: "inventory",
label: "盘点表",
},
{
value: "cost",
label: "成本表",
},
], //表格导出选项下拉列表
value: "", //表格导出选择的选项
options3: [
{
value: "stock",
label: "库存",
},
{
value: "cost",
label: "成本",
},
{
value: "loss_num",
label: "损耗",
},
{
value: "reserve",
label: "预留",
},
], //筛选类型下拉选项
// 请求商品列表的参数
form: {
goods_title: "", // 商品名称
type_id: "", // 商品种类id
brand_id: "", // 商品品牌id
sku_title: "", // 商品规格
status: "", // 商品状态
keyword_type: "stock", //筛选类型
keyword_value: "", //日期筛选
},
Paginationdata: {}, //分页相关数据
current_page: 1, //当前页
per_page: 100, //每页显示数量
multipleSelection: [], //多选框选中的id
updateType: "", //更新类型，newest-上新, inventory-库存盘点, stock-库存
stock: false, //点击库存显示输入框变量
isShow: false, // 点击上新显示输入框
ejectstock1: false, //点击库存按钮弹出框变量
Importgoods: false, //导入商品变量
Tableexport: false, //表格导出变量
isShow1: false, //文件传输弹出变量
//表格导入相关变量
importForm: {
fileList: [],
},
docImportDrawer: false,
improtRules: {
fileList: [
{ required: true, message: "请导入Excel文件", trigger: "change" },
{
validator: (rule, value, callback) => {
if (!value.length) {
callback(new Error("请导入Excel文件"));
} else {
callback();
}
},
trigger: "change",
},
],
},
// 文件模板手添加到根目录下
publicPath: process.env.BASE_URL, // public文件夹路径
excelTemplatePath: "", // 数据导入Excel模板下载地址 - 调接口获取
visible: false,
updateField: "", //reference_price-参考售价, reserve-预留量, loss_num-损耗, status-状态
reference_priceShow: false,
reserveShow: false, //预留量-input显示变量
value1: "", // 筛选的时间
ommodityInventory: [], //单个商品库存
dialogVisible: false, //上新按钮弹出框变量
dialogVisible2: false, //库存盘点弹出框变量
dialogVisible3: false, //参考售价弹出框变量
dialogVisible4: false, //预留弹出框变量
publicId: "", //参考售价 预留量公用id
reference_price: "", //参考价格修改传参
reserve: "", //预留量修改传参
};
},
methods: {
// 列表编辑
handleEdit(goodsid, id) {
sessionStorage.setItem("商品ID", goodsid);
sessionStorage.setItem("ID", id);
this.$router.push("/ADDGOODS");
},
// 获取商品列表
getList() {
let page = {
page: this.current_page,
per_page: this.per_page,
};
goods(page).then((res) => {
this.tableData = res.data.data;
this.tableData = this.tableData.map((item) => {
item = {
...item,
arrived_today_num11: 0,
};
return item;
});
this.total = res.data.meta.total;
this.Paginationdata = res.data.meta;
this.shopsData = this.tableData.map((item) => {
item = item.goods.goods_code + "_" + item.sku_code;
return item;
});
this.sku_code = {
sku_code: this.shopsData,
};
});
},
// 筛选
handleChoose() {
this.form = {
...this.form,
page: this.current_page,
per_page: this.per_page,
};
// 对象值为空清除
const newObj = filterParams(this.form);
function filterParams(obj) {
const _newPar = {};
for (const key in obj) {
// 如果对象属性的值不为空，就保存该属性（这里我做了限制，如果属性的值为0，保存该属性。如果属性的值全部是空格，属于为空。）
if (
(obj[key] === 0 || obj[key]) &&
obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
) {
// 记录属性
_newPar[key] = obj[key];
}
}
// 返回对象
return _newPar;
}
goods(newObj).then((res) => {
this.tableData = res.data.data;
this.tableData = this.tableData.map((item) => {
item = {
...item,
arrived_today_num11: 0,
};
return item;
});
this.total = res.data.meta.total;
this.Paginationdata = res.data.meta;
});
},
// 重置筛选
handleReChoose() {
this.form = {
goods_title: "", // 商品名称
type_id: "", // 商品种类id
brand_id: "", // 商品品牌id
sku_title: "", // 商品规格
status: "", // 商品状态
};
this.value1 = "";
},
// 导入商品按钮
handleImport() {
this.docImportDrawer = true;
},
// 导出商品按钮
handleExport() {
this.Tableexport = true;
},
// 点击上新
update() {
this.isShow = true;
this.stock = false;
this.updateType = "newest";
},
// 复选框按钮
handleSelectionChange(val) {
this.multipleSelection = val.map((item) => item.id);
},
// 新增商品跳转
addNewgoods() {
this.$router.push("/ADDGOODS");
},
//分页功能
handleSizeChange(val) {
//当前条数
this.per_page = val;
this.handleChoose();
},
handleCurrentChange(val) {
//当前页
this.current_page = val;
this.handleChoose();
},
//取消上新or库存盘点
cancel() {
this.handleChoose();
this.isShow = false;
this.stock = false;
},
// 点击上新or库存盘点后确认
onSubmit() {
//判断点击的是上新，再发送上新请求
if (this.updateType === "newest") {
let skus = this.tableData.map((item) => {
return [
{
id: item.id,
cost: item.cost,
arrived_today_num: item.arrived_today_num11,
},
];
});
let patchdata = {
updateType: this.updateType,
skus: skus.flat(),
};
// 上新请求
update(patchdata).then((res) => {
this.handleChoose();
this.$message({
message: "上新成功！",
type: "success",
});
});
}
//判断点击的是库存盘点，再发送库存盘点请求
if (this.updateType === "inventory") {
let skus = this.tableData.map((item) => {
return [
{
id: item.id,
inventory: item.daily.inventory,
},
];
});
let patchdata = {
updateType: this.updateType,
skus: skus.flat(),
};
// 上新请求
update(patchdata).then((res) => {
this.handleChoose();
this.$message({
message: "库存盘点成功！",
type: "success",
});
});
}
this.isShow = false;
this.stock = false;
this.handleChoose();
},
// 点击库存盘点
onCount() {
this.dialogVisible2 = false;
this.isShow = false;
this.stock = true;
this.updateType = "inventory";
},
// 点击库存弹出框
ejectstock(row) {
this.ommodityInventory = [];
this.ejectstock1 = true;
this.updateType = "stock";
this.ommodityInventory.push(row);
},
//库存弹出框取消
cancelStock() {
this.handleChoose();
this.ejectstock1 = false;
},
// 库存弹出框确认
oldStock() {
this.ejectstock1 = false;
//判断点击的是库存，再发送库存请求
if (this.updateType === "stock") {
let skus = [
{
id: this.ommodityInventory[0].id,
yesterday_num: this.ommodityInventory[0].yesterday_num,
two_days_ago_num: this.ommodityInventory[0].two_days_ago_num,
arrived_today_num:
this.ommodityInventory[0].daily.arrived_today_num,
},
];
let stockpatch = {
updateType: this.updateType,
skus: skus,
};
// 库存请求
update(stockpatch).then((res) => {
this.handleChoose();
this.$message({
message: "库存更新成功！",
type: "success",
});
});
}
},
// 商品导入
importFile() {
this.docImportDrawer = true;
},
// 数据导入-上传Excel
async importFileChange(file, fileList) {
this.importForm.fileList = fileList; // 检验上传文件是否为空
},
// 确定上传
saveUpload() {
this.$refs.importForm.validate(async (isValid) => {
if (!isValid) return;
try {
// 主要是这二行代码
const params = new FormData();
params.append("goodsSkus", this.importForm.fileList[0].raw);
this.isLoadingDialog = true;
let token = localStorage.getItem("token");
axios
.post("/api/goods_skus", params, {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
if (res.status === 200) {
this.$message.success("模板导入成功");
}
});
this.docImportDrawer = false;
} finally {
this.isLoadingDialog = false;
}
});
},
// 数据导入-获取Excel模板地址
getExcelTemplatePath() {
this.$requestInternet.get("/api/xxx").then((res) => {
this.excelTemplatePath = res;
});
},
// 表格导出
derivation() {
window.open('/goods_skus/export?exportType=' + this.value);
},
// 点击记录按钮跳转商品记录
goodslog(row) {
this.$router.push({
path: "/GOODS_LOG",
query: {
id: row.id,
},
});
},
// 获取筛选时间
getSTime(val) {
this.form.keyword_value = val.join(" - ");
},
// 参考价格点击修改
reference_priceClick(id) {
this.updateField = "reference_price";
this.reference_priceShow = true;
this.id = id;
this.id1 = "";
},
// 参考价格input框失去焦点弹出确认框
reference_priceBlur(row) {
this.dialogVisible3 = true;
this.publicId = row.id;
this.reference_price = row.reference_price;
},
//参考价格弹出框确认修改请求
reference_priceRequest() {
this.dialogVisible3 = false;
let reference_priceData = {
updateField: this.updateField,
reference_price: this.reference_price,
};
singleUpdate(this.publicId, reference_priceData).then((res) => {
this.id = "";
this.$message({
message: "参考售价修改成功！",
type: "success",
});
});
},
onreserve(id) {
this.updateField = "reserve";
this.id1 = id;
this.id = "";
},
// 预留量 失去焦点触发确认框
reservebBlur(row) {
this.reserve = row.reserve;
this.dialogVisible4 = true;
this.publicId = row.id;
},
// 预留量弹出框确认请求
reserveRequest() {
let reservebData = {
updateField: this.updateField,
reserve: this.reserve,
};
singleUpdate(this.publicId, reservebData).then((res) => {
this.id1 = "";
this.dialogVisible4 = false;
this.$message({
message: "预留量修改成功！",
type: "success",
});
});
},
loss(id) {
this.updateField = "loss_num";
this.id2 = id;
this.id = "";
this.id1 = "";
},
// 添加损耗
onLoss(row) {
let id = row.id;
let lossData = {
updateField: this.updateField,
reason: this.radio,
loss_num: row.daily.loss_num,
};
singleUpdate(id, lossData).then((res) => {
this.getList();
this.id2 = "";
this.$message({
message: "损耗添加成功！",
type: "success",
});
});
},
//损耗框取消
noBubbles() {
this.handleChoose();
this.updateField = "";
this.id2 = "";
},
// 获取商品种类
getgoodsType() {
let param = {
per_page:99999
}
goods_types(param).then((res) => {
this.cate = res.data.data;
});
},
// 获取商品品牌
getbrandType() {
let parsm = {
per_page:99999
}
Brand_goods_types(parsm).then((res) => {
this.brand = res.data.data;
});
},
},
watch: {
$route(to, from) {
window.location.reload(); //监测到路由发生跳转时刷新一次页面
},
},
mounted() {
this.getList();
this.getgoodsType();
this.getbrandType();
this.id = "";
this.id1 = "";
this.id2 = "";
},
};
</script>
<style lang="css" scoped>
.loss {
position: relative;
}
.table {
margin-top: 40px;
position: relative;
}
.btn {
float: right;
}
::v-deep .cell {
display: flex;
align-items: center;
}
.commodityimg {
width: 59px;
height: 59px;
background: rgba(227, 227, 227, 0.39);
opacity: 1;
display: block;
margin-right: 12px;
}
.Img {
width: 100%;
height: 100%;
}
.confirmbtn {
width: 114px;
height: 44px;
border-radius: 3px;
margin-top: 21px;
margin-bottom: 8px;
}
.import-right {
margin-top: 30px;
}
.import-right a {
text-decoration: none;
color: black;
}
::v-deep .btn11 {
padding: 0;
width: 14px;
height: 14px;
}
::v-deep .btn11 img {
width: 100%;
height: 100%;
}
.page {
margin-top: 20px;
}
</style>