pull/16/head
xk_chenlianjie 12 months ago
commit ad61e9693b
  1. 7
      src/api/product/productAttr.js
  2. 90
      src/views/dashboard/admin/index.scss
  3. 166
      src/views/dashboard/admin/index.vue
  4. 270
      src/views/product/productAdd/components/OilStationSelection.vue
  5. 36
      src/views/product/productList/index.vue

@ -61,6 +61,13 @@ export default {
data
})
},
batchShelves(data) {
return request({
url: `/${service_name}/mallProductInfo/upOrDownShelves`,
method: 'post',
data
})
},
getAllSites(data) {
return request({
url: `/${service_name}/mallProductSiteRelation/getAllSites`,

@ -0,0 +1,90 @@
.flex {
display: flex;
}
.column {
flex-direction: column;
}
.ac {
align-items: center;
}
.jc {
justify-content: center;
}
.oneflex {
flex: 1;
}
.jw {
justify-content: space-between;
}
.js {
justify-content: space-around;
}
.number {
color: red;
font-size: 25px;
}
.product-card {
.product-card-item {}
}
.orderData {
width: 100%;
.orderData-right {
margin-left: 50px;
flex-wrap: wrap;
.orderData-right-item {
width: calc(50% - 20px);
box-sizing: border-box;
text-align: center;
padding: 10px 20px;
border-bottom: #ececec solid 1px;
}
}
.orderData-left {
padding: 10px 20px;
box-sizing: border-box;
border: solid 1px #bbbbbb;
}
}
.orderStatistics-card {
.orderStatistics-card-right{
}
.orderStatistics-card-left {
flex-shrink: 0;
padding: 10px 50px;
border-right: solid 1px #ececec;
.orderStatistics-card-left-item{
.orderStatistics-card-left-item-title{
color: #bbbbbb;
}
.orderStatistics-card-left-item-number{
font-size: 25px;
}
}
}
}
.box-card{
margin-bottom: 30px;
}
.card-title{
font-size: 20px;
font-weight: 600;
}
.page{
height:calc(100vh - 144px);
box-sizing: border-box;
}

@ -1,20 +1,184 @@
<template>
<div class="page">
<el-row>
<el-col :span="24">
<el-card class="box-card">
<div slot="header">
<span class="card-title">订单数据</span>
</div>
<div class="flex">
<div class="orderData flex ac">
<div class="orderData-left flex ac">
<i style="font-size: 40px;" class="el-icon-tickets"></i>
<div>
<div>今日订单总数</div>
<div>200</div>
</div>
</div>
<div class="orderData-right oneflex flex jw">
<div class="orderData-right-item">
<span>待核销订单</span>
<span>(10)</span>
</div>
<div class="orderData-right-item">
<span>已核销订单</span>
<span>(10)</span>
</div>
<div class="orderData-right-item">
<span>已完成订单</span>
<span>(10)</span>
</div>
<div class="orderData-right-item">
<span>待退款订单</span>
<span>(10)</span>
</div>
</div>
</div>
</div>
</el-card></el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-card class="box-card">
<div slot="header">
<span class="card-title">商品总览</span>
</div>
<div class="product-card flex js">
<div class="product-card-item">
<div class="number">100</div>
<div>已下架</div>
</div>
<div class="product-card-item">
<div class="number">100</div>
<div>已下架</div>
</div>
<div class="product-card-item">
<div class="number">100</div>
<div>已下架</div>
</div>
<div class="product-card-item">
<div class="number">100</div>
<div>已下架</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="11">
<el-card class="box-card">
<div slot="header">
<span class="card-title">商品总览</span>
</div>
<div class="product-card flex js">
<div class="product-card-item">
<div class="number">100</div>
<div>已下架</div>
</div>
<div class="product-card-item">
<div class="number">100</div>
<div>已下架</div>
</div>
<div class="product-card-item">
<div class="number">100</div>
<div>已下架</div>
</div>
<div class="product-card-item">
<div class="number">100</div>
<div>已下架</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-card class="box-card">
<div slot="header">
<span class="card-title">订单统计</span>
</div>
<div class="orderStatistics-card flex">
<div class="orderStatistics-card-left flex column js">
<div class="orderStatistics-card-left-item">
<div class="orderStatistics-card-left-item-title">本月订单总数</div>
<div class="orderStatistics-card-left-item-number">10000</div>
<div class="orderStatistics-card-left-item-title">10% 同比上周</div>
</div>
<div class="orderStatistics-card-left-item">
<div class="orderStatistics-card-left-item-title">本月订单总数</div>
<div class="orderStatistics-card-left-item-number">10000</div>
<div class="orderStatistics-card-left-item-title">10% 同比上周</div>
</div>
</div>
<div class="orderStatistics-card-right oneflex">
<div style="width: 100%;"> 近一周订单统计</div>
<div style="width: 100%; height:500px;margin-top:20px" id="chart"></div>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
filters: {},
data() {
return {
myChart: null
}
},
created() {
this.init()
},
mounted() {
this.initChart('chart')
},
methods: {
initChart(id='chart') {
this.myChart = echarts.init(document.getElementById(id));
this.myChart.setOption({
color: ['#4370da'],
grid: {
x: 50,
y: 25,
x2: 30,
y2: 35
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['07-01周六', '07-02周日', '07-03周一', '07-04周二', '07-05周三', '07-06周四', '07-07周五']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true,
areaStyle: {}
}
]
});
},
init() {
}
}
}
</script>
<style scoped></style>
<style scoped lang="scss">
@import './index.scss';
</style>

@ -1,149 +1,151 @@
<template>
<div>
<el-form ref="artFrom" :model="page" label-width="80px" label-position="right" class="tabform"
@submit.native.prevent inline>
<el-form-item label="输入搜索">
<el-input clearable v-model="page.params.siteName" placeholder="请输入油站名称"
class="form_content_width"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="userSearchs">查询</el-button>
<el-button type="primary" @click="submit">确定选择</el-button>
</el-form-item>
</el-form>
<el-table max-height="500" @selection-change="selectionChange" v-loading="loading" ref="table" :data="tableList"
highlight-current-row empty-text="暂无数据" class="mt14">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="油站名称" prop="siteName"> </el-table-column>
<el-table-column label="渠道" prop="channel"> </el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="page.currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="page.pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />
</div>
</template>
<div>
<el-form ref="artFrom" :model="page" label-width="80px" label-position="right" class="tabform"
@submit.native.prevent inline>
<el-form-item label="输入搜索">
<el-input clearable v-model="page.params.siteName" placeholder="请输入油站名称"
class="form_content_width"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="userSearchs">查询</el-button>
<el-button type="primary" @click="submit">确定选择</el-button>
</el-form-item>
</el-form>
<el-table max-height="500" @selection-change="selectionChange" v-loading="loading" ref="table" :data="tableList"
:row-key="(row) => row.siteId" highlight-current-row empty-text="暂无数据" class="mt14">
<el-table-column type="selection" reserve-selection width="55">
</el-table-column>
<el-table-column label="油站名称" prop="siteName"></el-table-column>
<el-table-column label="渠道" prop="channel"></el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="page.currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="page.pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />
</div>
</template>
<script>
import productApi from '@/api/product/productAttr.js';
import productApi from '@/api/product/productAttr.js'
export default {
name: "OilStationSelection",
props: {
OilStationSelectionList: {
type: Array,
default: () => []
},
selectAttrId: {
type: String,
default: () => ""
name: 'OilStationSelection',
props: {
OilStationSelectionList: {
type: Array,
default: () => []
},
selectAttrId: {
type: String,
default: () => ''
}
},
data() {
return {
selectionList: [],
loading: false,
tableList: [],
page: {
'currentPage': 1,
'pageSize': 10,
'totalCount': 0,
'params': {
'siteName': ''
}
}
}
},
watch: {
OilStationSelectionList: {
handler(n, o) {
this.$refs.table.clearSelection()
n.forEach(element => {
this.$refs.table.toggleRowSelection(element)
})
},
deep: true
}
},
created() {
this.init()
},
methods: {
submit() {
this.$emit('submit', this.getSelectionList())
},
getSelectionList() {
return this.selectionList
},
selectionChange(e) {
this.selectionList = e
},
userSearchs() {
this.getByPage()
},
data() {
return {
selectionList: [],
loading: false,
tableList: [],
page: {
"currentPage": 1,
"pageSize": 10,
"totalCount": 0,
"params": {
"siteName": ""
},
}
isStrictPromise(value) {
return !!value
&& typeof value === 'object'
&& typeof value.then === 'function'
&& typeof value.finally === 'function'
},
loadingFn(callback) {
this.loading = true
if (this.isStrictPromise(callback)) {
callback.finally(() => {
this.loading = false
})
}
},
getByPage() {
this.loadingFn(productApi.getAllSites(this.page).then(res => {
if (res.code === 20000) {
this.tableList = res.data.list
this.page.totalCount = parseInt(res.data.totalCount)
} else {
this.tableList = []
this.page.totalCount = 0
}
}))
},
watch: {
OilStationSelectionList:{
handler(n,o){
this.$refs.table.clearSelection();
n.forEach(element => {
this.$refs.table.toggleRowSelection(element);
});
},
deep:true
handleCurrentChange(val) {
this.page.currentPage = val
this.getByPage()
},
handleSizeChange(val) {
this.page.pageSize = val
this.getByPage()
},
del(e) {
productApi.delete(e).then(res => {
if (res.code == 20000) {
this.$message.success('操作成功')
this.handleCurrentChange()
}
})
},
created() {
this.init()
edit(row) {
let data = Object.assign({}, row, {
name: this.selectAttrId.split('/')[1] || '',
spec: [{
value: row.attributeName,
detail: row.attributeContent.split(',')
}]
})
this.$parent.$parent.selection = [data]
this.$parent.$parent.addAttr('typeUpdate')
},
methods: {
submit() {
this.$emit('submit', this.getSelectionList())
},
getSelectionList() {
return this.selectionList
},
selectionChange(e) {
this.selectionList = e
},
userSearchs() {
this.getByPage()
},
isStrictPromise(value) {
return !!value
&& typeof value === 'object'
&& typeof value.then === 'function'
&& typeof value.finally === 'function';
},
loadingFn(callback) {
this.loading = true;
if (this.isStrictPromise(callback)) {
callback.finally(() => {
this.loading = false;
})
};
},
getByPage() {
this.loadingFn(productApi.getAllSites(this.page).then(res => {
// ({
// data: this.tableList = [],
// currentPage: this.page.currentPage,
// pageSize: this.page.pageSize,
// totalCount: this.page.totalCount
// } = res.data);
this.tableList = res.data
console.log(res)
}));
},
handleCurrentChange(val) {
this.page.currentPage = val
this.getByPage()
},
handleSizeChange(val) {
this.page.pageSize = val
this.getByPage()
},
del(e) {
productApi.delete(e).then(res => {
if (res.code == 20000) {
this.$message.success('操作成功')
this.handleCurrentChange();
}
})
},
edit(row) {
let data = Object.assign({}, row, {
name: this.selectAttrId.split("/")[1] || "",
spec: [{
value: row.attributeName,
detail: row.attributeContent.split(",")
}],
})
this.$parent.$parent.selection = [data];
this.$parent.$parent.addAttr('typeUpdate');
},
init() {
// this.getByPage();
init() {
// this.getByPage();
// if (this.selectAttrId && this.selectAttrId.indexOf("/") !== -1) {
// this.page.params.typeId = this.selectAttrId.split("/")[0] || "";
// this.getByPage();
// } else {
// this.$message.warning("")
// }
}
// if (this.selectAttrId && this.selectAttrId.indexOf("/") !== -1) {
// this.page.params.typeId = this.selectAttrId.split("/")[0] || "";
// this.getByPage();
// } else {
// this.$message.warning("")
// }
}
}
}
</script>
<style></style>
<style></style>

@ -41,8 +41,8 @@
</el-form>
</div>
<div class="Button">
<el-button type="primary" class="mr14">添加商品</el-button>
<el-button type="success" class="mr14" @click="onCopy">商品采集</el-button>
<!-- <el-button type="primary" class="mr14">添加商品</el-button>-->
<!-- <el-button type="success" class="mr14" @click="onCopy">商品采集</el-button>-->
<!-- <el-dropdown class="bnt mr14" @command="batchSelect">
<el-button>批量修改<i class="el-icon-arrow-down el-icon--right"></i></el-button>
<el-dropdown-menu slot="dropdown">
@ -54,9 +54,11 @@
<el-dropdown-item :command="6">活动推荐</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown> -->
<el-button @click="onDismount" v-show="artFrom.type === '1'">批量下架</el-button>
<el-button @click="onShelves" v-show="artFrom.type === '2'">批量上架</el-button>
<el-button class="export" @click="exports">导出</el-button>
<!-- <el-button @click="onDismount" v-show="artFrom.type === '1'">批量下架</el-button>-->
<!-- <el-button @click="onShelves" v-show="artFrom.type === '2'">批量上架</el-button>-->
<!-- <el-button class="export" @click="exports">导出</el-button>-->
<el-button @click="batchShelves('1')">批量上架</el-button>
<el-button @click="batchShelves('2')">批量下架</el-button>
</div>
<el-table
ref="table"
@ -526,8 +528,6 @@ export default {
}
})
},
getList() {},
batchSub() {},
clearBatchData(status) {},
//
@ -588,10 +588,24 @@ export default {
},
getExcelData(excelData) {},
freight() {},
//
onShelves() {},
//
onDismount() {},
//
batchShelves(productStatus) {
let selected = this.$refs.table.selection
if (selected&&selected.length>0){
let selectedIds = selected.map(item=>item.id)
productApi.batchShelves({
list:selectedIds,
productStatus:productStatus
}).then(res=>{
if (res.code===20000){
this.$message.success(res.msg)
this.getDataList()
}
})
}else {
this.$message.error('请选择需要操作的数据')
}
},
getRowKey(row) {
return row.id
},

Loading…
Cancel
Save