wangyifang
/
yunyubang-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

Browse Source
master
刘翔宇-旅管家 3 years ago
parent f6c3cf7af9
commit 665b8dc8d0
6 changed files with 596 additions and 337 deletions
Show Stats Download Patch File Download Diff File

9
src/api/order/index.js
Unescape View File

@ -63,3 +63,12 @@ export function getItemLogs(params){
params
})
}
export function save(data){
return request({
method:'post',
url:'/api/admin/order/save',
data
})
}

1
src/components/XyTable/index.vue
Unescape View File

@ -210,6 +210,7 @@ export default {
{tableItem && tableItem.length > 0 ?
(<el-table
ref="table"
fit="false"
show-summary={showSummary}
show-header={showHeader}
summary-method={summaryMethod}

9
src/styles/index.scss
Unescape View File

@ -98,11 +98,15 @@ div:focus {
}
.v-table .el-table__body td {
padding: 9px 0 !important;
padding: 3px 0 !important;
}
.el-table__row td div.cell{
padding: 0 2px !important;
}
.v-table .el-table__footer td {
padding: 7px 0 !important;
padding: 2px 0 !important;
}
/* 2021.01.30修复火狐checkbox错位问题 */
@ -190,4 +194,3 @@ top: 41px !important;
#nprogress .bar{
background: $primaryColor !important;
}

93
src/views/dashboard/index.vue
Unescape View File

@ -1,9 +1,13 @@
<template>
<div class="dashboard-editor-container">
<div class="block" style="margin-bottom: 10px;display: flex;justify-content: flex-end;">
<el-date-picker @change="changeDate" v-model="search.date" value-format="yyyy-MM-dd" type="daterange"
:picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
align="right">
</el-date-picker>
</div>
<panel-group :totaldata="totaldata" />
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="24">
<div class="chart-wrapper">
@ -41,6 +45,38 @@
},
data() {
return {
search: {
sdate: "",
edate: "",
date: []
},
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
totaldata: {
customer: {},
order: {}
@ -70,22 +106,49 @@
}
}
},
created: function() {},
created: function() {
this.search.date = this.getCurrMonthDays()
that.search.sdate = this.search.date[0]
that.search.edate = this.search.date[1]
},
mounted() {
this.$nextTick(() => {
this.load();
this.load();
this.loadItemData();
})
},
methods: {
changeDate(e) {
var that = this;
this.search.date = e;
that.search.sdate = e[0];
that.search.edate = e[1];
this.load();
},
getCurrMonthDays() {
let date = []
let start = this.$moment().add('month', 0).format('YYYY-MM') + '-01'
let start_1 = this.$moment(start).format('YYYY-MM-DD')
let end = this.$moment(start).add('month', 1).format('YYYY-MM-DD') //因为查询条件不包含这天
date.push(start_1)
date.push(end)
return date
},
async load() {
var that = this;
await getcustomerData().then(res => {
await getcustomerData({
start_date: that.search.sdate,
end_date: that.search.edate,
}).then(res => {
that.totaldata.customer = res;
})
await getorderData().then(res => {
await getorderData({
start_date: that.search.sdate,
end_date: that.search.edate,
}).then(res => {
that.totaldata.order = res;
})
},
@ -98,15 +161,15 @@
that.lineArr.xArr.push(m.date.split('-')[1] + "-" + m.date.split('-')[2]);
that.lineArr.series[0].data.push(m.customer_total);
}
}).catch((res) => {})
getorderitemData().then((res) => {
for (var m of res) {
that.lineArr.series[1].data.push(m.order_total);
that.lineArr.series[2].data.push(m.paid_money_total);
}
}).catch((res) => {})
getorderitemData().then((res) => {
for (var m of res) {
that.lineArr.series[1].data.push(m.order_total);
that.lineArr.series[2].data.push(m.paid_money_total);
}
}).catch((res) => {})
}
}

49
src/views/order/component/orderEdit.vue
Unescape View File

@ -0,0 +1,49 @@
<template>
<div>
<xy-dialog :is-show.sync="isShow" title="商户简介" ok-text="保存" @on-ok="submit">
</xy-dialog>
</div>
</template>
<script>
import {
save
} from "@/api/order"
import {
parseTime
} from '@/utils'
export default {
props: {
id: Number,
isShow: {
type: Boolean,
default: false
}
},
data() {
return {
}
},
methods: {
submit() {
}
},
watch: {
isShow(newVal) {
if (newVal) {
}
}
}
}
</script>
<style scoped lang="scss">
</style>

772
src/views/order/orderList.vue
Unescape View File

@ -1,325 +1,459 @@
<template>
<div style="padding: 0 20px">
<div ref="lxHeader">
<lx-header icon="md-apps" text="订单管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<slot>
<div style="display: flex">
<Input v-model="select.keyword" class="select" style="width: 200px; margin-right: 10px" placeholder="关键字搜索" />
<Button class="select" type="primary" style="margin-right: 10px;" @click="getOrders">查询</Button>
<xy-selectors @search="getOrders">
<template>
<div class="select-content-item">
<div class="select-content-item-label">所属商户</div>
<div>
<el-select size="small" :value="select.merchant ? select.merchant.name : ''" placeholder="所属商户" @change="e => select.merchant = e">
<el-option v-for="item in merchants" :key="item.id" :value="item" :label="item.name"></el-option>
</el-select>
</div>
</div>
<div class="select-content-item">
<div class="select-content-item-label">产品类别</div>
<div>
<el-cascader
ref="cascader"
:value="select.productTypeName"
clearable
:show-all-levels="false"
size="small"
:options="productTypes"
:props="{checkStrictly:true,label:'name',value:'id'}"
@change="productTypeChange"></el-cascader>
</div>
</div>
<div class="select-content-item">
<div class="select-content-item-label">订单状态</div>
<div>
<template v-for="(value,key) of orderStates">
<el-tag size="small" :effect="select.orderStates.key === key ? 'dark' : 'plain'" @click="select.orderStates = {key,value}" style="margin-right: 6px;">{{value}}</el-tag>
</template>
</div>
</div>
</template>
<template v-slot:selected>
<div style="display: flex;padding: 0 0 10px 20px;">
<span style="padding-right: 6px">当前搜索条件：</span>
<div v-if="select.keyword">
<el-tag effect="light" size="small" closable @close="select.keyword = ''">
{{select.keyword}}
</el-tag>,
</div>
<div v-if="select.productType">
<el-tag effect="light" size="small" closable @close="select.productType = ''">
{{select.productTypeName}}
</el-tag>,
</div>
<div v-if="select.merchant">
<el-tag effect="light" size="small" closable @close="select.merchant = ''">
{{select.merchant.name}}
</el-tag>,
</div>
<div v-if="select.orderStates">
<el-tag effect="light" size="small" closable @close="select.orderStates = ''">
{{select.orderStates.value}}
</el-tag>
</div>
</div>
</template>
</xy-selectors>
<Button class="select" type="primary" style="margin-right: 10px;" @click="downloadExel">导出</Button>
</div>
</slot>
</lx-header>
</div>
<xy-table :list="list" :table-item="table" :total="total" @pageSizeChange="e => select.pageSize = e" @pageIndexChange="pageChange">
<template v-slot:btns>
<el-table-column fixed="right" label="操作" width="400" header-align="center">
<template slot-scope="scope">
<actions :row="scope.row" @log="showLog(scope.row)" @refresh="getOrders"></actions>
<!-- <Button icon="ios-chatbubbles-outline" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>跟进</Button>-->
<!-- <Button v-show="scope.row.state_name == '待处理'" icon="ios-paper-plane-outline" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>分发</Button>-->
<!-- <Button v-show="scope.row.state_name == '待处理'" icon="ios-close" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>取消</Button>-->
<!-- <Button v-show="scope.row.state_name == '已发布'" icon="ios-redo" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>收回</Button>-->
<!-- <Button icon="ios-clipboard-outline" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost @click="selectId = scope.row.id,isShowLog = true">日志</Button>-->
</template>
</el-table-column>
</template>
</xy-table>
<orderLog :id="selectId" :is-show.sync="isShowLog" @refresh="getOrders"></orderLog>
</div>
</template>
<script>
import {getList,index as getTypes} from "@/api/order"
import {parseTime} from "@/utils"
import {download} from '@/utils/downloadRequest'
import orderLog from '@/views/order/component/orderLog'
import actions from '@/views/order/component/actions'
export default {
components:{
orderLog,
actions
},
data() {
return {
selectId:null,
isShowLog:false,
merchants:[],
orderItemStates:[],
orderStates:[],
productTypes:[],
select:{
page:1,
pageSize:10,
merchant:'',
keyword:'',
productType:'',
orderStates:'',
productTypeName:""
},
total:0,
list:[],
table:[
{
prop: "order.serial",
label:"订单编号",
width:150,
align:'center',
fixed:'left'
},
{
prop: "order_name",
label:"订单名称",
width:340,
align:'left'
},
{
prop:'bookable_name',
label:"订购类型",
width:110
},
{
prop:"order_total",
label:"金额",
width: 140,
align:'right'
},
{
prop:"created_at",
label:"下单时间",
width: 200,
formatter:(cell,data,value,index)=>{
return parseTime(new Date(value))
}
},
{
prop:"paid_at",
label:"支付时间",
width: 200,
formatter:(cell,data,value,index)=>{
if(value)
return parseTime(new Date(value))
}
},
{
prop:"updated_at",
label:"更新时间",
width: 200,
formatter:(cell,data,value,index)=>{
return parseTime(new Date(value),"{y}-{m}-{d}")
}
},
{
prop:"memberPromotion.name",
label:"推广渠道",
width: 110
},
{
label:"用户信息",
Fprop:'member',
multiHd:[
{
prop:"name",
label:"姓名",
width:110
},
{
label:"头像",
width:80,
customFn:(row)=>{
return (<div style={{display:'flex',alignItems:'center',justifyContent:'center'}}><el-avatar src={row.member?.avatar}></el-avatar></div>)
}
<template>
<div style="padding: 0 20px">
<div ref="lxHeader">
<lx-header icon="md-apps" text="订单管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<slot>
<div style="display: flex">
<Input v-model="select.keyword" class="select" style="width: 200px; margin-right: 10px"
placeholder="关键字搜索" />
<Button class="select" type="primary" style="margin-right: 10px;" @click="searchOrder">查询</Button>
<xy-selectors @search="searchOrder">
<template>
<el-row>
<el-col :span="12">
<div class="select-content-item">
<div class="select-content-item-label">所属商户</div>
<div>
<el-select size="small" :value="select.merchant ? select.merchant.name : ''" placeholder="所属商户"
@change="e => select.merchant = e">
<el-option v-for="item in merchants" :key="item.id" :value="item" :label="item.name">
</el-option>
</el-select>
<el-checkbox style="margin-left: 10px;" v-model="select.is_merchant">包含历史服务商家</el-checkbox>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="select-content-item">
<div class="select-content-item-label">产品类别</div>
<div>
<el-cascader ref="cascader" :value="select.productTypeName" clearable :show-all-levels="false"
size="small" :options="productTypes" :props="{checkStrictly:true,label:'name',value:'id'}"
@change="productTypeChange"></el-cascader>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="select-content-item">
<div class="select-content-item-label">订单状态</div>
<div>
<template v-for="(value,key) of orderStates">
<el-tag size="small" :effect="select.orderStates.key === key ? 'dark' : 'plain'"
@click="select.orderStates = {key,value}" style="margin-right: 6px;">{{value}}</el-tag>
</template>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="select-content-item">
<div class="select-content-item-label">下单日期</div>
<div>
<el-date-picker @change="changeCreatedDate" v-model="select.createdDate" type="daterange"
:picker-options="pickerOptions" value-format="yyyy-MM-dd" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
</div>
</el-col>
<el-col :span="12"></el-col>
<el-col :span="12">
<div class="select-content-item">
<div class="select-content-item-label">支付日期</div>
<div>
<el-date-picker @change="changePayDate" v-model="select.payDate" type="daterange"
:picker-options="pickerOptions" value-format="yyyy-MM-dd" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
</div>
</el-col>
</el-row>
</template>
<template v-slot:selected>
<div style="display: flex;padding: 0 0 10px 20px;">
<span style="padding-right: 6px">当前搜索条件：</span>
<div v-if="select.keyword">
<el-tag effect="light" size="small" closable @close="select.keyword = ''">
{{select.keyword}}
</el-tag>,
</div>
<div v-if="select.productType">
<el-tag effect="light" size="small" closable @close="select.productType = ''">
{{select.productTypeName}}
</el-tag>,
</div>
<div v-if="select.merchant">
<el-tag effect="light" size="small" closable @close="select.merchant = ''">
{{select.merchant.name}}
</el-tag>,
</div>
<div v-if="select.orderStates">
<el-tag effect="light" size="small" closable @close="select.orderStates = ''">
{{select.orderStates.value}}
</el-tag>
</div>
</div>
</template>
</xy-selectors>
<Button class="select" type="primary" style="margin-right: 10px;" @click="downloadExel">导出</Button>
</div>
</slot>
</lx-header>
</div>
<xy-table :list="list" :table-item="table" :total="total" @pageSizeChange="e => select.pageSize = e"
@pageIndexChange="pageChange">
<template v-slot:btns>
<el-table-column fixed="right" label="操作" width="400" header-align="center">
<template slot-scope="scope">
<actions :row="scope.row" @log="showLog(scope.row)" @refresh="getOrders"></actions>
<!-- <Button icon="ios-chatbubbles-outline" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>跟进</Button>-->
<!-- <Button v-show="scope.row.state_name == '待处理'" icon="ios-paper-plane-outline" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>分发</Button>-->
<!-- <Button v-show="scope.row.state_name == '待处理'" icon="ios-close" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>取消</Button>-->
<!-- <Button v-show="scope.row.state_name == '已发布'" icon="ios-redo" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>收回</Button>-->
<!-- <Button icon="ios-clipboard-outline" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost @click="selectId = scope.row.id,isShowLog = true">日志</Button>-->
</template>
</el-table-column>
</template>
</xy-table>
<orderLog :id="selectId" :is-show.sync="isShowLog" @refresh="getOrders"></orderLog>
</div>
</template>
<script>
import {
getList,
index as getTypes
} from "@/api/order"
import {
parseTime
} from "@/utils"
import {
download
} from '@/utils/downloadRequest'
import orderLog from '@/views/order/component/orderLog'
import actions from '@/views/order/component/actions'
export default {
components: {
orderLog,
actions
},
data() {
return {
selectId: null,
isShowLog: false,
merchants: [],
orderItemStates: [],
orderStates: [],
productTypes: [],
select: {
page: 1,
pageSize: 10,
merchant: '',
keyword: '',
productType: '',
orderStates: '',
productTypeName: "",
is_merchant: false,
createdDate: [],
paidDate: [],
start_created: "",
end_created: "",
start_paid: "",
end_paid: "",
},
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
total: 0,
list: [],
table: [{
prop: "order.serial",
label: "订单编号",
width: 150,
align: 'center',
fixed: 'left'
},
{
prop: "order_name",
label: "订单名称",
width: 220,
align: 'left'
},
{
prop: 'bookable_name',
label: "订购类型",
width: 80
},
{
prop: "order_total",
label: "金额",
width: 80,
align: 'right'
},
{
prop: "created_at",
label: "下单时间",
width: 180,
formatter: (cell, data, value, index) => {
return parseTime(new Date(value))
}
},
{
prop: "paid_at",
label: "支付时间",
width: 180,
formatter: (cell, data, value, index) => {
if (value)
return parseTime(new Date(value))
}
},
{
prop: "updated_at",
label: "更新时间",
width: 180,
formatter: (cell, data, value, index) => {
return parseTime(new Date(value))
}
},
{
prop: "memberPromotion.name",
label: "推广渠道",
width: 110
},
{
label: "客户服务地址",
width: 220,
align:"left",
customFn: (row) => {
return ( <div style = {
{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor:'pointer',
color:"blue"
}
} > {row.order.member_address?row.order.member_address:"修改服务地址"}</div > )
}
},
{
label: "用户信息",
Fprop: 'member',
multiHd: [{
prop: "name",
label: "姓名",
width: 110
},
{
prop: "wechat_nickname",
label: "微信昵称",
width: 110
},
{
label: "头像",
width: 80,
customFn: (row) => {
return ( < div style = {
{
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}
} > <el-avatar src = {
row.member?.avatar
} > </el-avatar></div > )
}
},
{
prop: "phone",
label: "联系电话",
width: 120
},
{
prop: "area",
label: "区域",
width: 110
},
{
prop: "due_date",
label: "预产期",
width: 120
}
],
},
{
label: '订单明细',
multiHd: [{
prop: "product_type.name",
label: "产品类型",
width: 100
},
{
prop: "merchant.name",
label: "服务商家",
align: "left",
width: 220
},
{
label: "历史商家",
width: 220,
align: "left",
customFn: (row) => {
return row.assign_merchant.map(item => {
return ( < div > {
item.name
} < /div>)
})
}
},
{
prop: "state_name",
label: "状态",
width: 80
}
]
},
{
prop:"phone",
label:"联系电话",
width: 190
},
{
prop:"area",
label:"区域",
width: 110
},
{
prop:"due_date",
label:"预产期",
width: 145
}
prop: "order.remark",
label: "备注"
}
],
},
{
label:'订单明细',
multiHd: [
{
prop:"product_type.name",
label:"产品类型",
width: 200
},
{
prop:"merchant.name",
label:"服务商家",
width: 220
},
{
prop:"state_name",
label:"状态",
width: 140
}
]
}
],
}
},
methods: {
productTypeChange(e){
this.select.productType = this.$refs['cascader'].getCheckedNodes()[0].data.id;
this.select.productTypeName = this.$refs['cascader'].getCheckedNodes()[0].data.name;
},
pageChange(e){
this.select.page = e
this.getOrders()
},
async getTypes(){
const res = await getTypes()
this.merchants = res.merchants
this.orderItemStates = res.order_item_states
this.orderStates = res.order_states
this.productTypes = res.product_types
},
async getOrders(){
const res = await getList({
page:this.select.page,
page_size:this.select.pageSize,
keyword:this.select.keyword,
product_type_id:this.select.productType,
merchant_id:this.select.merchant.id,
order_state:this.select.orderStates.key
})
this.total = res.total
this.list = res.rows
},
showLog(row){
this.selectId = row.id
this.isShowLog = true
},
downloadExel(){
download(
'/api/admin/order/get-list',
'get',
{
order_state:this.select.orderStates.key,
keyword:this.select.keyword,
product_type_id:this.select.productType,
merchant_id:this.select.merchant.id,
is_export:1
},
'订单列表.xlsx')
}
},
mounted() {
this.getTypes()
this.getOrders()
}
}
</script>
<style scoped lang="scss">
.select-content-item{
display: flex;
align-items: center;
margin-bottom: 10px;
&-label{
padding: 0 20px;
}
}
$primaryColor: #bf617c;
::v-deep .ivu-alert-success{
color:#fff;
border-color: $primaryColor !important;
background: rgba(213, 120, 145, 0.8) !important;
}
},
methods: {
changePayDate(e) {
this.select.start_paid = e[0];
this.select.end_paid = e[1];
},
changeCreatedDate(e) {
this.select.start_created = e[0];
this.select.end_created = e[1];
},
productTypeChange(e) {
this.select.productType = this.$refs['cascader'].getCheckedNodes()[0].data.id;
this.select.productTypeName = this.$refs['cascader'].getCheckedNodes()[0].data.name;
},
searchOrder(){
this.select.page = 1
this.getOrders()
},
pageChange(e) {
this.select.page = e
this.getOrders()
},
async getTypes() {
const res = await getTypes()
this.merchants = res.merchants
this.orderItemStates = res.order_item_states
this.orderStates = res.order_states
this.productTypes = res.product_types
},
async getOrders() {
let is_merchant = this.select.is_merchant
margin: auto 0;
margin-right: 10px;
}
::v-deep .ivu-icon-ios-close:before{
//color: #fff;
}
this.select.is_merchant= is_merchant ? 1 : 0;
const res = await getList({
page_size: this.select.pageSize,
product_type_id: this.select.productType,
merchant_id: this.select.merchant.id,
order_state: this.select.orderStates.key,
...this.select
})
this.select.is_merchant=is_merchant;
this.total = res.total
this.list = res.rows
},
showLog(row) {
this.selectId = row.id
this.isShowLog = true
},
downloadExel() {
download(
'/api/admin/order/get-list',
'get', {
order_state: this.select.orderStates.key,
keyword: this.select.keyword,
product_type_id: this.select.productType,
merchant_id: this.select.merchant.id,
is_export: 1
},
'订单列表.xlsx')
}
},
mounted() {
this.getTypes()
this.getOrders()
}
}
</script>
<style scoped lang="scss">
.select-content-item {
display: flex;
align-items: center;
margin-bottom: 10px;
&-label {
padding: 0 20px;
}
}
$primaryColor: #bf617c;
::v-deep .ivu-alert-success {
color: #fff;
border-color: $primaryColor !important;
background: rgba(213, 120, 145, 0.8) !important;
margin: auto 0;
margin-right: 10px;
}
::v-deep .ivu-icon-ios-close:before {
//color: #fff;
}
</style>

Write Preview
Loading…
Cancel
Save