<template>
|
<div class="main_index">
|
<div class="search_from">
|
<el-form
|
:model="formInline"
|
inline
|
label-width="100px"
|
class="form-flex"
|
size="small"
|
>
|
<div style="width: 90%">
|
<el-form-item label="订单编号：">
|
<el-input
|
v-model.trim="formInline.orderId"
|
style="width: 240px"
|
@keyup.native="keyupEvent($event)"
|
type="tel"
|
clearable
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="电话号码：">
|
<el-input
|
v-model.trim="formInline.mblNo"
|
style="width: 240px"
|
@keyup.native="keyupEvent($event)"
|
type="tel"
|
clearable
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="签约时间：">
|
<el-date-picker
|
v-model="createdTime"
|
style="width: 240px"
|
format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
type="daterange"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="推广位：">
|
<el-select
|
v-model="formInline.promId"
|
style="width:240px"
|
clearable
|
placeholder="请选择"
|
>
|
<el-option label="全部" value="all"></el-option>
|
<el-option
|
v-for="item in relustObj.promoteList"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="订单状态：">
|
<el-select
|
v-model="formInline.orderStatus"
|
style="width:240px"
|
clearable
|
placeholder="请选择"
|
>
|
<el-option label="全部" value="all"></el-option>
|
<el-option
|
v-for="item in relustObj.orderStatusList"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<el-form-item style="text-align: right;">
|
<!-- v-if='filterBtnById("150102")' -->
|
<el-button type="primary" style="margin-left: 10px;margin-bottom: 8px;" @click="onSearch">查 询</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="table_box">
|
<div style="margin-left: 10px;text-align: right;">
|
<el-button type="primary" size="small" @click="addProduct">导出excel</el-button>
|
</div>
|
<Etable
|
hasIndex
|
hasSelection
|
rowKey="orderId"
|
httpUrl="orderList"
|
:columns="columns"
|
:searchData="searchData"
|
@getDataList="getDataList"
|
@handleSelectionChange="handleSelectionChange"
|
:exportUrl="{
|
url: '/qyp/order/orderExport',
|
powerId: '',
|
name: '订单列表',
|
}"
|
></Etable>
|
</div>
|
<el-dialog top="2vh" :title="title" :visible.sync="addProd" width="60%">
|
<el-descriptions>
|
<el-descriptions-item label="订单编号">{{ orderDetail.orderId }}</el-descriptions-item>
|
<el-descriptions-item label="订单创建时间">{{ orderDetail.creTime }}</el-descriptions-item>
|
<el-descriptions-item label="订单状态">{{ orderDetail.orderStatusStr }}</el-descriptions-item>
|
<el-descriptions-item label="电话号码">{{ orderDetail.mblNo }}</el-descriptions-item>
|
<el-descriptions-item label="代理名称">{{ orderDetail.agencyName }}</el-descriptions-item>
|
<el-descriptions-item label="推广位名称">{{ orderDetail.promName }}</el-descriptions-item>
|
<el-descriptions-item label="签约时间">{{ orderDetail.signTime }}</el-descriptions-item>
|
<el-descriptions-item label="解约时间">{{ orderDetail.terminateTime }}</el-descriptions-item>
|
<el-descriptions-item label="项目名称">{{ orderDetail.projName }}</el-descriptions-item>
|
</el-descriptions>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import Etable from "../../components/table.vue";
|
import {orderInit,orderDtl} from "@/api/credit";
|
import uploadImg from "@/components/upload.vue";
|
export default {
|
name: "order",
|
components: { Etable,uploadImg },
|
data() {
|
return {
|
formInline: {status:"all"},
|
searchData: {},
|
columns: [
|
{
|
lable: "订单编号",
|
prop: "orderId",
|
align: "center",
|
width: "300",
|
},
|
{
|
lable: "签约时间",
|
prop: "signTime",
|
align: "center",
|
width: "180",
|
},
|
{
|
lable: "订单状态",
|
prop: "orderStatusStr",
|
align: "center"
|
},
|
{
|
lable: "电话号码",
|
prop: "mblNo",
|
align: "center",
|
width: "150",
|
},
|
{
|
lable: "代理名称",
|
prop: "agencyName",
|
align: "center",
|
width: "180",
|
},
|
{
|
lable: "推广位名称",
|
prop: "promName",
|
align: "center",
|
width: "180"
|
},
|
{
|
lable: "",
|
},
|
{
|
lable: "操作",
|
align: "center",
|
width: "200",
|
fixed: "right",
|
render: (h, scope) => {
|
return h("div", [
|
h(
|
"el-button",
|
{
|
props:{
|
type:'text'
|
},
|
style: {
|
// display: this.filterBtnById(150101)
|
// ? "inline-block"
|
// : "none",
|
},
|
on: {
|
click: () => {
|
this.title = '订单详情';
|
let {orderId} = scope.row;
|
this.getProductDetail(orderId);
|
},
|
},
|
},
|
"查看详情"
|
)
|
]);
|
},
|
},
|
],
|
relustObj: {},
|
addProd:false,
|
createdTime:[],
|
title:"新增项目",
|
orderDetail:{},
|
exportExcelList:[]
|
}
|
},
|
watch:{
|
addProd:{
|
handler: function(val) {
|
if(!val){
|
}
|
},
|
deep: true
|
}
|
},
|
//生命周期 - 创建完成（可以访问当前this实例）
|
created() {
|
this.initSerch();
|
},
|
methods: {
|
addProduct(){
|
if(!this.exportExcelList.length){
|
return this.$message.error("请选择订单后导出");
|
}
|
},
|
keyupEvent(e) {
|
//只能输入整数
|
e.target.value = e.target.value.replace(/[^\d]/g, "");
|
},
|
onSearch() {
|
if (this.createdTime && this.createdTime.length) {
|
this.formInline.signStartTime = this.createdTime[0];
|
this.formInline.signEndTime = this.createdTime[1];
|
} else {
|
this.formInline.signStartTime = null;
|
this.formInline.signEndTime = null;
|
}
|
let objForm = JSON.parse(JSON.stringify(this.formInline));
|
for (let key in objForm) {
|
if (objForm[key] === "all") {
|
delete objForm[key];
|
}
|
}
|
this.searchData = { ...objForm };
|
},
|
initSerch() {
|
orderInit().then(({ body }) => {
|
this.relustObj = body;
|
});
|
},
|
getDataList(e) {
|
},
|
handleSelectionChange(list){
|
this.exportExcelList = list;
|
},
|
getProductDetail(orderId){
|
orderDtl({orderId:orderId}).then(({body})=>{
|
this.orderDetail = body;
|
this.addProd = true;
|
})
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.main_index {
|
background-color: #f0f2f5;
|
.table_box_num {
|
margin-top: 5px;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
color: #666;
|
font-size: 14px;
|
font-weight: bold;
|
padding-right: 16px;
|
box-sizing: border-box;
|
span {
|
display: inline-block;
|
&:nth-child(even) {
|
margin-right: 20px;
|
color: #333;
|
}
|
}
|
}
|
.el-form-div {
|
width: 100%;
|
display: flex;
|
}
|
.tips{
|
color: #f56c6c;
|
}
|
}
|
</style>
|
|
