订单
This commit is contained in:
yanran200730
501
project/fengdu/app/AppIntegratingOrder/orderManagement.vue
Normal file
501
project/fengdu/app/AppIntegratingOrder/orderManagement.vue
Normal file
@@ -0,0 +1,501 @@
|
||||
<template>
|
||||
<section class="order_management">
|
||||
<ai-list isTabs>
|
||||
<template slot="content">
|
||||
<ai-search-bar>
|
||||
<template slot="left">
|
||||
<el-select
|
||||
size="small"
|
||||
v-model="searchObj.shopId"
|
||||
placeholder="请选择店铺"
|
||||
clearable
|
||||
@change="(page.current = 1), getList()">
|
||||
<el-option
|
||||
v-for="(item, i) in shopList"
|
||||
:key="i"
|
||||
:label="item.shopName"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
size="small"
|
||||
v-model="searchObj.orderStatus"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
@change="(page.current = 1), getList()">
|
||||
<el-option
|
||||
v-for="(item, i) in dict.getDict('integralOrderStatus')"
|
||||
:key="i"
|
||||
:label="item.dictName"
|
||||
:value="item.dictValue">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<ai-search label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="searchObj.createTimeStart"
|
||||
type="date"
|
||||
size="small"
|
||||
@change="(page.current = 1), getList()"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="开始日期">
|
||||
</el-date-picker>
|
||||
<el-date-picker
|
||||
v-model="searchObj.createTimeEnd"
|
||||
type="date"
|
||||
size="small"
|
||||
@change="(page.current = 1), getList()"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</ai-search>
|
||||
</template>
|
||||
|
||||
<template slot="right">
|
||||
<el-input
|
||||
v-model="searchObj.name"
|
||||
size="small"
|
||||
placeholder="订单号/商品名/兑换家庭"
|
||||
v-throttle="() => {page.current = 1, getList()}"
|
||||
@clear="page.current = 1, searchObj.name = '', getList()"
|
||||
clearable
|
||||
suffix-icon="iconfont iconSearch"
|
||||
/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-search-bar>
|
||||
<template slot="left">
|
||||
<!-- <el-button type="primary" icon="iconfont iconAdd" @click="add()">添加</el-button> -->
|
||||
<ai-download
|
||||
:instance="instance"
|
||||
url="/app/appvillagerintegralshoporder/listExport"
|
||||
:params="{ ...searchObj, areaId: areaId, ids: ids.join(',') }"
|
||||
fileName="订单管理"
|
||||
v-if="$permissions('app_appvillagerintegralshoporder_export')">
|
||||
</ai-download>
|
||||
<el-dropdown @command="handleCommand">
|
||||
<el-button type="primary">
|
||||
变更状态<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="1">批量兑换</el-dropdown-item>
|
||||
<el-dropdown-item command="2">批量取消</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
<template slot="right"></template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="page.total"
|
||||
:current.sync="page.current"
|
||||
@select="onRowClick"
|
||||
@select-all="onRowClick"
|
||||
row-key="id"
|
||||
:default-expand-all="false"
|
||||
:tree-props="{ children: 'merchandiseList' }"
|
||||
:size.sync="page.size"
|
||||
@getList="getList">
|
||||
<el-table-column
|
||||
align="center"
|
||||
type="selection"
|
||||
:selectable="(row,index)=>row.orderStatus==0"
|
||||
width="55"
|
||||
slot="selection">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="订单号/创建时间"
|
||||
slot="orderCode"
|
||||
align="center"
|
||||
width="150">
|
||||
<template v-slot="{ row }">
|
||||
<el-row>
|
||||
<el-col>{{ row.orderCode }}</el-col>
|
||||
<el-col style="color: #999999">{{ row.createTime }}</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="商品图"
|
||||
slot="merchandisePhoto"
|
||||
align="center"
|
||||
width="130">
|
||||
<template v-slot="{ row }">
|
||||
<ai-uploader
|
||||
:disabled="true"
|
||||
:instance="instance"
|
||||
v-model="row.merchandisePhoto"
|
||||
:limit="9">
|
||||
</ai-uploader>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="兑换家庭" slot="familyName" align="left">
|
||||
<template v-slot="{ row }">
|
||||
<el-row>
|
||||
<el-col style="width: 100%">{{ row.familyName }}</el-col>
|
||||
<el-col style="color: #999999">{{ row.familyPhone }}</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作人" slot="createUserName" align="left">
|
||||
<template v-slot="{ row }">
|
||||
<el-row>
|
||||
<el-col style="width: 100%">{{ row.createUserName }}</el-col>
|
||||
<el-col style="color: #999999">{{
|
||||
row.createUserPhone
|
||||
}}
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="订单状态"
|
||||
slot="orderStatus"
|
||||
align="center"
|
||||
width="130"
|
||||
fixed="right">
|
||||
<template v-slot="{ row }">
|
||||
<el-row v-if="row.isParent">
|
||||
<el-col
|
||||
style="width: 100%"
|
||||
:style="{
|
||||
color: dict.getColor(
|
||||
'integralOrderStatus',
|
||||
row.orderStatus
|
||||
),
|
||||
}"
|
||||
>{{
|
||||
dict.getLabel("integralOrderStatus", row.orderStatus)
|
||||
}}
|
||||
</el-col
|
||||
>
|
||||
<el-col style="width: 100%" v-if="row.orderStatus == 0"
|
||||
>{{ row.reserveDate }} {{ row.reserveTime }}
|
||||
</el-col
|
||||
>
|
||||
<el-col style="color: #2266ff; width: 100%" v-if="row.remark">
|
||||
<el-tooltip
|
||||
:disabled="!row.remark"
|
||||
class="item"
|
||||
effect="light"
|
||||
:content="row.remark"
|
||||
placement="left-end"
|
||||
>
|
||||
<el-link type="primary">备注</el-link>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
slot="options"
|
||||
align="center"
|
||||
width="120"
|
||||
fixed="right">
|
||||
<template v-slot="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button v-if="row.orderCode" type="text" @click="goDetail(row)" title="详情"
|
||||
:disabled="!$permissions('app_appvillagerintegralshoporder_detail')">详情
|
||||
</el-button>
|
||||
<template v-if="row.orderStatus==0 || row.orderStatus==3">
|
||||
<el-button type="text" v-if="row.orderStatus==0" @click="handlePendingOrder(row.id,1)">确认兑换</el-button>
|
||||
<el-button type="text" v-if="row.orderStatus==0 || row.orderStatus==3" @click="handlePendingOrder(row.id,2)">取消订单</el-button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "orderManagement",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
areaId: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchObj: {
|
||||
name: "",
|
||||
orderStatus: "",
|
||||
createTimeStart: null,
|
||||
createTimeEnd: null,
|
||||
shopId: "",
|
||||
},
|
||||
page: {
|
||||
size: 10,
|
||||
current: 1,
|
||||
total: 0,
|
||||
},
|
||||
tableData: [],
|
||||
shopList: [],
|
||||
ids: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
colConfigs() {
|
||||
let _ = this;
|
||||
return [
|
||||
{slot: "selection"},
|
||||
{
|
||||
prop: "orderCode",
|
||||
align: "center",
|
||||
slot: "orderCode",
|
||||
label: "订单号/创建时间",
|
||||
},
|
||||
{
|
||||
prop: "merchandisePhoto",
|
||||
slot: "merchandisePhoto",
|
||||
align: "center",
|
||||
label: "商品图",
|
||||
},
|
||||
{
|
||||
prop: "merchandiseName",
|
||||
align: "left",
|
||||
label: "商品名",
|
||||
width: 180,
|
||||
"show-overflow-tooltip": false,
|
||||
},
|
||||
{
|
||||
prop: "costIntegral",
|
||||
align: "center",
|
||||
label: "单价",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
prop: "merchandiseNumber",
|
||||
align: "center",
|
||||
label: "数量",
|
||||
},
|
||||
{
|
||||
prop: "allCostIntegral",
|
||||
align: "center",
|
||||
label: "消耗积分",
|
||||
},
|
||||
{
|
||||
prop: "familyName",
|
||||
align: "center",
|
||||
label: "兑换家庭",
|
||||
slot: "familyName",
|
||||
},
|
||||
{
|
||||
prop: "createUserName",
|
||||
align: "center",
|
||||
label: "操作人",
|
||||
slot: "createUserName",
|
||||
},
|
||||
{
|
||||
prop: "orderStatus",
|
||||
align: "center",
|
||||
label: "订单状态",
|
||||
fixed: "right",
|
||||
slot: "orderStatus",
|
||||
// render(h, {row}) {
|
||||
// return h('span', {style: {color: _.dict.getColor('integralOrderStatus', row.orderStatus)}}, _.dict.getLabel('integralOrderStatus', row.orderStatus))
|
||||
// }
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.dict.load("integralOrderStatus");
|
||||
this.getShopList();
|
||||
},
|
||||
methods: {
|
||||
onRowClick(row) {
|
||||
this.ids = row.map(e => e.id)
|
||||
},
|
||||
handleCommand(val) {
|
||||
if (this.ids.length == 0) {
|
||||
return this.$message.error("请选择商品")
|
||||
}
|
||||
this.instance.post(`/app/appvillagerintegralshoporder/changeOrderStatus`, null, {
|
||||
params: {
|
||||
ids: this.ids.join(","),
|
||||
status: val
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success(`批量${val == 1 ? '兑换' : '取消'}成功`)
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
handlePendingOrder(ids, status) {
|
||||
let text = status == 1 ? "确认兑换" : "取消订单"
|
||||
this.$confirm(`是否${text}?`).then(() => {
|
||||
this.instance.post(`/app/appvillagerintegralshoporder/changeOrderStatus`, null, {
|
||||
params: {ids, status}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success(`${text}成功`)
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}).catch(() => 0)
|
||||
},
|
||||
getList() {
|
||||
this.instance.post(`/app/appvillagerintegralshoporder/list`, null, {
|
||||
params: {
|
||||
...this.searchObj,
|
||||
...this.page,
|
||||
areaId: this.areaId,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records;
|
||||
this.tableData.map((e) => {
|
||||
e.merchandiseName = e.merchandiseList[0].merchandiseName;
|
||||
e.merchandiseNumber = e.merchandiseList[0].merchandiseNumber;
|
||||
e.merchandisePhoto = [
|
||||
{...JSON.parse(e.merchandiseList[0].merchandisePhoto)[0]},
|
||||
];
|
||||
e.idForWeb = e.merchandiseList[0].idForWeb;
|
||||
e.costIntegral = e.merchandiseList[0].costIntegral;
|
||||
e.allCostIntegral =
|
||||
Number(e.merchandiseList[0].costIntegral) *
|
||||
Number(e.merchandiseNumber);
|
||||
e.merchandiseList.splice(0, 1);
|
||||
e.isParent = true;
|
||||
if (e.merchandiseList.length > 0) {
|
||||
e.merchandiseList.map((e2) => {
|
||||
e2.createTime = "";
|
||||
let arr = JSON.parse(e2.merchandisePhoto);
|
||||
e2.merchandisePhoto = [{...arr[0]}];
|
||||
e2.allCostIntegral =
|
||||
Number(e2.costIntegral) * Number(e2.merchandiseNumber);
|
||||
e2.isParent = false;
|
||||
// e2.id = e2.orderId
|
||||
});
|
||||
}
|
||||
});
|
||||
this.page.total = res.data.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
getShopList() {
|
||||
return new Promise((reslove) => {
|
||||
this.instance
|
||||
.post(`/app/appvillagerintegralshop/list`, null, {
|
||||
params: {
|
||||
size: 100000,
|
||||
areaId: this.areaId,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.shopList = res.data.records;
|
||||
reslove();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
reset() {
|
||||
Object.keys(this.searchObj).forEach((e) => {
|
||||
this.searchObj[e] = "";
|
||||
});
|
||||
this.searchObj.createTimeStart = null;
|
||||
this.searchObj.createTimeEnd = null;
|
||||
this.getList();
|
||||
},
|
||||
add() {
|
||||
this.$emit("showDetail", {isAdd: true});
|
||||
},
|
||||
goDetail(row) {
|
||||
console.log(row);
|
||||
this.$emit("showDetail", {isAdd: false, ...row});
|
||||
},
|
||||
finishOrder(row) {
|
||||
this.$confirm(`是否完成此订单？`, {
|
||||
type: "error",
|
||||
})
|
||||
.then(() => {
|
||||
this.instance
|
||||
.post(`/app/appvillagerintegralshoporder/FinishOrder`, null, {
|
||||
params: {
|
||||
orderId: row.id,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success("已完成！");
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
});
|
||||
},
|
||||
overOrder(row) {
|
||||
this.$confirm(`是否结束此订单？`, {
|
||||
type: "error",
|
||||
})
|
||||
.then(() => {
|
||||
this.instance
|
||||
.post(`/app/appvillagerintegralshoporder/overOrder`, null, {
|
||||
params: {
|
||||
orderId: row.id,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success("已结束！");
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order_management {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background: #f3f6f9;
|
||||
|
||||
.times_div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.times {
|
||||
display: block;
|
||||
width: 72px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
background: #f5f5f5;
|
||||
border-radius: 2px 0px 0px 2px;
|
||||
border: 1px solid #d0d4dc;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.iconCorrect {
|
||||
color: #53b43b;
|
||||
}
|
||||
|
||||
.iconReject {
|
||||
color: #e75555;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user