<template>
|
<div class="order-mng" v-if="!isShowDetail">
|
<div class="head-name">订单管理</div>
|
<div class="search">
|
<div class="left">
|
<div class="id">
|
订单编号/产品名称
|
<el-input v-model="inputText" placeholder="请输入"></el-input>
|
</div>
|
|
<div class="cluster">
|
创建时间
|
<el-date-picker
|
size="small"
|
v-model="searchTime"
|
@change="save"
|
type="datetimerange"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:default-time="['00:00:00', '23:59:59']"
|
></el-date-picker>
|
</div>
|
</div>
|
|
<div class="right">
|
<div class="button searchBtn" @click="save">搜索</div>
|
<div class="button resetBtn" @click="save">重置</div>
|
</div>
|
<div class="to-excel">
|
<span class="iconfont"></span> <span>导出</span>
|
</div>
|
</div>
|
|
<div class="table-area">
|
<el-table
|
id="multipleTable"
|
ref="multipleTable"
|
tooltip-effect="dark"
|
:data="dataList"
|
:fit="true"
|
:default-sort="{ prop: 'createTime', order: 'descending' }"
|
:stripe="true"
|
>
|
<el-table-column label="序号" width="55" class-name="index">
|
<template slot-scope="scope">{{
|
scope.$index + 1 + (page - 1) * size
|
}}</template>
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="姓名"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
prop="phone"
|
label="手机号"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column prop="userType" label="用户类型"></el-table-column>
|
<el-table-column prop="duration" label="授权时长"></el-table-column>
|
<el-table-column prop="authList" label="权限"></el-table-column>
|
|
<el-table-column label="状态">
|
<template slot-scope="scope">
|
<div v-if="scope.row.isBind == 1" class="status green">已绑定</div>
|
<div v-else class="status">未绑定</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<span class="option" @click="showDetail(scope.row)">订单详情</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div>
|
<el-pagination
|
@current-change="refrash"
|
@size-change="handleSizeChange"
|
:current-page="page"
|
:page-size="size"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page-sizes="[5, 10, 15, 20, 25]"
|
:total="total"
|
background
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
<div class="order-detail" v-else>
|
<div class="banner">
|
<span class="iconfont"></span> <span class="t">订单详情</span>
|
</div>
|
<div class="block">
|
<div class="head-name">订单信息</div>
|
|
<div class="order-general-view">
|
|
<div class="detail-list">
|
<div class="item">
|
<label>订单编号：</label>
|
<span>{{ form.sn }}</span>
|
</div>
|
<div class="item">
|
<label>创建时间：</label>
|
<span>{{ form.createTime }}</span>
|
</div>
|
<div class="item">
|
<label>创建人：</label>
|
<span>{{ form.createUserName }}</span>
|
</div>
|
<div class="item">
|
<label>付款方式：</label>
|
<span>{{ form.source == 0 ? "激活码下载" : "线上购买" }}</span>
|
</div>
|
<div class="item">
|
<label>订单状态：</label>
|
<span>{{ form.status }}</span>
|
</div>
|
|
<div class="item">
|
<label>订单金额：</label>
|
<span>{{
|
form.source == 0 ? "--" : "￥ " + form.orderMoney + " 元"
|
}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="block">
|
<div class="head-name">订单详情</div>
|
<el-table
|
id="multipleTable"
|
ref="multipleTable"
|
tooltip-effect="dark"
|
:data="form.products"
|
style="width: 100%"
|
:fit="true"
|
:max-height="tableHeight"
|
:default-sort="{ prop: 'createTime', order: 'descending' }"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column prop="productName" label="产品名称" width="220"></el-table-column>
|
<el-table-column prop="productTypeName" label="产品类型" width="140"></el-table-column>
|
<el-table-column prop="productVersion" label="版本号" width="140"></el-table-column>
|
<el-table-column label="配置详情" min-width="180">
|
<template slot-scope="scope">
|
<div style="text-align: left">
|
<p v-if="scope.row.productType != 3 && scope.row.productType != 4 && scope.row.modules.length">
|
模块：
|
<span v-for="item in scope.row.modules" :key="item">{{ item + " " }}</span>
|
</p>
|
<p v-if="scope.row.productBaseDetail.hasChUnitPrice">
|
通道数量：
|
<span>{{ scope.row.ChCount }}</span>
|
</p>
|
<p v-if="scope.row.productBaseDetail.hasAuthPrice">
|
授权数量：
|
<span>{{ scope.row.authCount }}</span>
|
</p>
|
<p v-if="scope.row.productType != 3 && scope.row.productType != 4 && scope.row.sdks.length">
|
算法：
|
<span v-for="item in scope.row.sdks" :key="item">{{ item + " " }}</span>
|
</p>
|
<p>
|
服务时长：
|
<span>{{ scope.row.serveYear + "年" }}</span>
|
</p>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="devCount" label="数量" width="110"></el-table-column>
|
<el-table-column label="服务起止时间" min-width="180">
|
<template slot-scope="scope">
|
<p>{{ scope.row.startTime }}</p>
|
<p>{{ scope.row.endTime }}</p>
|
</template>
|
</el-table-column>
|
<el-table-column label="金额" prop="price" width="130">
|
<template slot-scope="scope">{{ form.source == 0 ? "--" : "￥ " + scope.row.price + " 元" }}</template>
|
</el-table-column>
|
<el-table-column label="操作" min-width="200">
|
<template slot-scope="scope">
|
<div class="operation">
|
<span style="cursor: pointer" @click="downLoadEnclosure(scope.row)" v-if="scope.row.appendix.length"
|
>下载附件</span
|
>
|
<span
|
style="cursor: pointer"
|
v-if="scope.row.orderStatus == 2 && (scope.row.productType == 3 || scope.row.productType == 4)"
|
@click="downLoadSoftware(scope.row)"
|
>下载软件</span
|
>
|
<span
|
style="cursor: pointer"
|
v-if="scope.row.orderStatus == 2 && (scope.row.productType == 2 || scope.row.productType == 1)"
|
@click="downLoadSoftware(scope.row)"
|
>下载安装包</span
|
>
|
<span
|
style="cursor: pointer"
|
v-if="scope.row.orderStatus == 2 && scope.row.productType == 5"
|
@click="downLoadAuth(scope.row)"
|
>下载产品密钥</span
|
>
|
<span style="cursor: pointer" v-if="scope.row.productType != 2" @click="toDevice(scope.row)"
|
>查看设备</span
|
>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="block">
|
<div class="head-name">支付信息</div>
|
<el-table
|
tooltip-effect="dark"
|
:data="form.payInfo"
|
:fit="true"
|
:max-height="tableHeight"
|
:default-sort="{ prop: 'createTime', order: 'descending' }"
|
:span-method="tableSpanMethod"
|
>
|
<el-table-column prop="payMethod" label="支付渠道" width="150">
|
<template slot-scope="scope">
|
<div v-if="scope.row.payMethod == 1">线下汇款</div>
|
<div v-if="scope.row.payMethod == 2">支付宝</div>
|
<div v-if="scope.row.payMethod == 3">微信</div>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column prop="payTime" label="付款时间" align="center" min-width="150" ></el-table-column> -->
|
<el-table-column prop="updateTime" label="付款时间" width="180"></el-table-column>
|
<el-table-column prop="payMoney" label="付款金额" width="150"></el-table-column>
|
<el-table-column
|
prop="tradeNo"
|
label="附件凭证号/流水号"
|
v-if="form.payMethod == 2"
|
width="200"
|
></el-table-column>
|
<el-table-column prop="payAccount" label="付款账号" width="190"></el-table-column>
|
<el-table-column label="付款单位/姓名" prop="payUser" width="220"></el-table-column>
|
<el-table-column label="查看付款凭证" width="200">
|
<template slot-scope="scope">
|
<div>
|
<el-image
|
style="width: 100px"
|
:fit="imageFit"
|
:src="`/httpImage/${scope.row.appendix}`"
|
:preview-src-list="[`/httpImage/${scope.row.appendix}`]"
|
></el-image>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="审核状态" width="180">
|
<template slot-scope="scope">
|
<div>
|
<span v-if="scope.row.orderStatus == 11">审核中</span>
|
<span v-if="scope.row.orderStatus == 12">已驳回</span>
|
<span v-if="scope.row.orderStatus == 2">审核通过</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" min-width="170">
|
<template slot-scope="scope">
|
<div v-if="scope.row.orderStatus !== 2">
|
<span class="cursor-pointer" @click="checkOrder(1)">审核通过</span>
|
<span class="cursor-pointer" @click="checkOrder(2)">驳回</span>
|
</div>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import Steps from "./Steps";
|
// import StepsCard from "./StepCard";
|
// import TreeBox from "./TreeBox";
|
export default {
|
components: {},
|
data() {
|
return {
|
searchTime: [
|
this.$moment().format("YYYY-MM-DD 00:00:00"),
|
this.$moment().format("YYYY-MM-DD HH:mm:ss"),
|
], //搜索时间
|
page: 1,
|
size: 10, //分页相关
|
inputText: "", //输入框内容
|
activeStep: 0,
|
activeIndex: 0,
|
total: 0, //总数
|
dataList: [
|
{
|
name: "basic",
|
phone: "1121313232",
|
userType: "个人",
|
duration: "永久",
|
authList: "集群1，集群2",
|
isBind: 1,
|
},
|
],
|
isShowAdd: false, //是否展示新增弹窗
|
isShowUnbind: false, //是否展示解绑弹窗
|
unbindId: "",
|
durationArr: [
|
{
|
value: 0,
|
label: "一年",
|
},
|
{
|
value: 1,
|
label: "两年",
|
},
|
], //所属集群下拉框
|
cluster: null, //选中的集群类型
|
showQuit: false, //展示退出集群的弹窗
|
showJoin: false, //展示加入集群的弹窗
|
activeEquipment: null, //处理中的设备
|
isShowDetail: false,
|
form: {
|
id: "",
|
createTime: "",
|
createUserName: "",
|
payTime: "",
|
payMethod: "",
|
payAble: 0,
|
orderMoney: 0,
|
price: "",
|
serveYear: 1,
|
source: 0,
|
status: "",
|
products: [],
|
activeCodes: [],
|
payInfo: [],
|
},
|
};
|
},
|
methods: {
|
goback() {
|
this.isShowAdd = false;
|
this.activeIndex = 0;
|
},
|
goto(i) {
|
this.activeIndex = i;
|
},
|
// 跳到设备详情
|
checkDetail(row) {
|
this.$router.push({
|
path: "/equipmentDetail",
|
query: {
|
id: row.devId,
|
ip: row.devIp,
|
port: row.serverPort,
|
ndid: row.id,
|
},
|
});
|
},
|
|
// 跳到算法详情
|
algorithmDetail(row) {
|
this.$router.push({
|
path: "/algorithmDetail",
|
query: {
|
id: row.devId,
|
ip: row.devIp,
|
port: row.serverPort,
|
},
|
});
|
},
|
|
// 查询列表
|
|
save() {},
|
//分页功能
|
handleSizeChange(size) {
|
this.size = size;
|
},
|
//分页功能
|
refrash(page) {
|
this.page = page;
|
},
|
|
//解绑按钮
|
Untying(row) {
|
console.log(row);
|
this.unbindId = row.id;
|
this.isShowUnbind = true;
|
},
|
|
//获得默认时间
|
getDateInit() {
|
// 要求 默认一个月
|
const end = new Date();
|
const start = new Date();
|
const nowDate = new Date();
|
nowDate.setHours(0);
|
nowDate.setMinutes(0);
|
nowDate.setSeconds(0);
|
nowDate.setMilliseconds(0);
|
start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30);
|
end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1);
|
return [
|
this.$moment(start).format("YYYY-MM-DD HH:mm:ss"),
|
this.$moment(end).format("YYYY-MM-DD HH:mm:ss"),
|
];
|
},
|
|
//关闭新增弹窗
|
closeAddBox() {
|
this.isShowAdd = false;
|
},
|
// 关闭解绑弹窗
|
closeUnbindBox() {
|
this.isShowUnbind = false;
|
},
|
|
//解绑成功回调
|
reflash() {
|
this.isShowUnbind = false;
|
},
|
|
clearSearch() {
|
this.searchTime = this.getDateInit();
|
this.inputText = "";
|
},
|
|
//退出集群
|
quitCluster(equipment) {
|
this.activeEquipment = equipment;
|
this.showQuit = true;
|
},
|
|
//加入集群
|
showDetail(equipment) {
|
this.activeEquipment = equipment;
|
this.isShowDetail = true;
|
},
|
},
|
mounted() {},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.order-mng {
|
padding: 20px;
|
.head-name {
|
font-weight: 700;
|
font-size: 16px;
|
line-height: 22px;
|
color: #3d3d3d;
|
border-left: 4px solid #0065ff;
|
padding-left: 10px;
|
}
|
.add-title {
|
font-weight: 700;
|
font-size: 16px;
|
cursor: pointer;
|
line-height: 22px;
|
color: #3d3d3d;
|
margin-bottom: 30px;
|
.iconfont {
|
margin-right: 10px;
|
}
|
}
|
.steps {
|
}
|
|
.searchBtn {
|
width: 60px;
|
height: 32px;
|
line-height: 32px;
|
text-align: center;
|
color: #fff;
|
background: #0065ff;
|
border-radius: 3px;
|
margin-right: 20px;
|
}
|
.right {
|
display: flex;
|
justify-content: space-between;
|
}
|
.to-excel {
|
box-sizing: border-box;
|
border-radius: 3px;
|
background: #0064ff;
|
display: flex;
|
width: 84px;
|
height: 32px;
|
color: #fff;
|
align-items: center;
|
justify-content: center;
|
margin-left: 195px;
|
}
|
.resetBtn {
|
width: 60px;
|
height: 32px;
|
line-height: 32px;
|
text-align: center;
|
color: #0065ff;
|
box-sizing: border-box;
|
border: 1px solid #0065ff;
|
border-radius: 3px;
|
}
|
.search {
|
display: flex;
|
font-size: 14px;
|
border-bottom: 1px solid #e9ebee;
|
margin-top: 30px;
|
border-radius: 3px;
|
box-sizing: border-box;
|
padding-bottom: 20px;
|
.left,
|
.right,
|
.id,
|
.time,
|
.cluster {
|
display: flex;
|
align-items: center;
|
.el-date-editor {
|
width: 300px;
|
height: 32px;
|
border-radius: 3px;
|
border: 1px solid #c0c5cc;
|
}
|
}
|
|
.id .el-input ::v-deep {
|
width: 200px;
|
}
|
|
.cluster::v-deep .el-input {
|
width: 300px;
|
|
margin-left: 10px;
|
margin-right: 20px;
|
.el-input__icon {
|
line-height: 32px;
|
}
|
input {
|
border-radius: 0;
|
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-input ::v-deep {
|
width: 200px;
|
margin-left: 10px;
|
margin-right: 20px;
|
height: 32px;
|
line-height: 32px;
|
input {
|
border-radius: 3px;
|
height: 32px;
|
line-height: 32px;
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-date-editor {
|
width: 318px;
|
height: 40px;
|
margin-left: 10px;
|
margin-right: 20px;
|
border-radius: 0;
|
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&.is-active {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.btns {
|
display: flex;
|
margin: 20px 0;
|
text-align: center;
|
.add {
|
margin-right: 20px;
|
width: 126px;
|
height: 32px;
|
background: #0065ff;
|
color: #fff;
|
span {
|
margin-right: 5px;
|
line-height: 32px;
|
font-size: 14px;
|
}
|
}
|
|
.export {
|
width: 126px;
|
height: 32px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
box-sizing: border-box;
|
span {
|
margin-right: 5px;
|
line-height: 32px;
|
font-size: 14px;
|
}
|
}
|
}
|
|
.el-table ::v-deep {
|
background-color: rgb(233, 235, 238);
|
padding: 1px;
|
|
&::after {
|
display: none;
|
}
|
|
td.index .cell {
|
padding-left: 16px;
|
padding-right: 4px;
|
}
|
|
.has-gutter tr th {
|
background: #f0f3f5;
|
font-size: 16px;
|
color: #3d3d3d;
|
font-weight: 700;
|
}
|
|
td .cell {
|
color: #3d3d3d;
|
}
|
|
tr:hover > td.el-table__cell {
|
background-color: #fff;
|
}
|
|
.el-table__row--striped .el-table__cell {
|
background-color: #f0f5fa !important;
|
}
|
tr:hover > td.el-table__cell {
|
background-color: #fff;
|
}
|
|
.el-table__row--striped .el-table__cell {
|
background-color: #f0f5fa !important;
|
}
|
|
.status {
|
color: #ff4b33;
|
|
&.green {
|
color: #36b24a;
|
}
|
}
|
|
.option {
|
margin-right: 10px;
|
color: rgb(0, 101, 255);
|
cursor: pointer;
|
}
|
}
|
|
.el-pagination ::v-deep {
|
margin-top: 30px;
|
text-align: center;
|
height: 24px;
|
.el-pagination__sizes {
|
margin-right: 0;
|
}
|
|
button {
|
margin: 0;
|
background-color: #fff;
|
border: 1px solid #c0c5cc;
|
border-radius: 2px;
|
}
|
|
.number {
|
background-color: #fff;
|
|
&:not(.disabled):hover {
|
color: #0065ff;
|
}
|
|
&:not(.disabled).active {
|
background-color: #0065ff;
|
color: #fff;
|
}
|
}
|
|
.el-input .el-input__inner {
|
padding-left: 0;
|
|
&:hover,
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
}
|
.order-detail {
|
.el-table ::v-deep {
|
background-color: rgb(233, 235, 238);
|
padding: 1px;
|
|
&::after {
|
display: none;
|
}
|
|
td.index .cell {
|
padding-left: 16px;
|
padding-right: 4px;
|
}
|
|
.has-gutter tr th {
|
background: #f0f3f5;
|
font-size: 16px;
|
color: #3d3d3d;
|
font-weight: 700;
|
}
|
|
td .cell {
|
color: #3d3d3d;
|
}
|
|
tr:hover > td.el-table__cell {
|
background-color: #fff;
|
}
|
|
.el-table__row--striped .el-table__cell {
|
background-color: #f0f5fa !important;
|
}
|
tr:hover > td.el-table__cell {
|
background-color: #fff;
|
}
|
|
.el-table__row--striped .el-table__cell {
|
background-color: #f0f5fa !important;
|
}
|
|
.status {
|
color: #ff4b33;
|
|
&.green {
|
color: #36b24a;
|
}
|
}
|
|
.option {
|
margin-right: 10px;
|
font-size: 24px;
|
color: rgb(0, 101, 255);
|
cursor: pointer;
|
}
|
}
|
// padding: 0 20px;
|
background-color: #f3f5f8;
|
min-height: 856px;
|
.banner {
|
margin-bottom: 24px;
|
height: 64px;
|
background: #ffffff;
|
box-sizing: border-box;
|
padding: 20px;
|
.iconfont {
|
margin-right: 10px;
|
font-size: 18px;
|
}
|
.t {
|
font-size: 16px;
|
color: #666666;
|
line-height: 24px;
|
font-weight: 700;
|
}
|
}
|
.block {
|
box-sizing: border-box;
|
padding: 20px ;
|
padding-bottom: 30px;
|
margin-bottom: 24px;
|
background: #ffffff;
|
.head-name {
|
font-weight: 700;
|
font-size: 16px;
|
line-height: 22px;
|
color: #3d3d3d;
|
border-left: 4px solid #0065ff;
|
padding-left: 10px;
|
}
|
.order-general-view {
|
background: #fff;
|
.order-num {
|
text-align: left;
|
height: 22px;
|
font-size: 16px;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: bold;
|
color: #111111;
|
line-height: 22px;
|
}
|
.detail-list {
|
display: flex;
|
flex-wrap: wrap;
|
text-align: left;
|
.item {
|
width: 25%;
|
// margin: 15px 0 0;
|
margin-top: 30px;
|
label {
|
height: 20px;
|
font-size: 14px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
line-height: 20px;color: #666666;
|
}
|
span {
|
height: 20px;
|
font-size: 14px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 700;
|
color: #3D3D3D;
|
line-height: 20px;
|
}
|
}
|
span.reserved {
|
color: #ccc;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
|
<style >
|
.el-date-table td.start-date span,
|
.el-date-table td.end-date span {
|
background-color: #0065ff;
|
}
|
|
.el-button--text span {
|
color: #0065ff;
|
}
|
|
.el-button.is-plain:hover,
|
.el-button.is-plain:focus {
|
color: #0065ff;
|
border-color: #0065ff;
|
}
|
|
</style>
|
