You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
358 lines
14 KiB
358 lines
14 KiB
<template> |
|
<div> |
|
<el-row :gutter="20"> |
|
<el-col :span="24"> |
|
<el-card shadow="hover" class="mgb20"> |
|
<div> |
|
<div class="flex-center mgb20"> |
|
<p class="hr_tag"></p> |
|
<span>筛选</span> |
|
</div> |
|
<div> |
|
<el-form label-width="80px"> |
|
<el-col :span="4"> |
|
<el-form-item label="省份"> |
|
<el-select v-model="form.provinces" clearable placeholder="请选择省份" |
|
@change="getCity()" @clear="clearprovince()"> |
|
<el-option v-for="(item,index) in provinceList" :key="index" |
|
:label="item.provinceName" :value="item.provinceId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="4"> |
|
<el-form-item label="城市"> |
|
<el-select v-model="form.city" clearable placeholder="请选择城市" |
|
:disabled="form.provinces ? false : true" @change="getData()"> |
|
<el-option v-for="(item,index) in cityList" :key="index" |
|
:label="item.cityName" :value="item.cityId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="4"> |
|
<el-form-item label="订单类型"> |
|
<el-select v-model="form.orderType" clearable placeholder="请选择订单类型" |
|
@change="getData()"> |
|
<el-option v-for="(item,index) in orderTypeList" :key="index" |
|
:label="item.name" :value="item.value"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="4"> |
|
<el-form-item label="订单状态"> |
|
<el-select v-model="form.orderStatus" clearable placeholder="请选择订单状态" |
|
@change="getData()"> |
|
<el-option v-for="(item,index) in orderStatusList" :key="index" |
|
:label="item.name" :value="item.value"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item> |
|
<el-input placeholder="请输入订单号/客户名称/订单名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
|
</el-form-item> |
|
</el-col> |
|
</el-form> |
|
</div> |
|
</div> |
|
</el-card> |
|
</el-col> |
|
|
|
<el-col :span="24"> |
|
<el-card shadow="hover" class="mgb20"> |
|
<div class="flex-between mgb20"> |
|
<div class="flex-center"> |
|
<p class="hr_tag"></p> |
|
<span>订单列表</span> |
|
</div> |
|
<div> |
|
<el-button type="primary" round class="mag" @click="addOrder()">新建订单</el-button> |
|
<el-button type="primary" round @click="delAllSelection">批量删除</el-button> |
|
</div> |
|
</div> |
|
<el-table :data="orderData" class="table" stripe header-align="center" |
|
@selection-change="handleSelectionChange" :row-key="getRowKeys"> |
|
<el-table-column type="selection" width="55" align="center" |
|
:reserve-selection="true"></el-table-column> |
|
<el-table-column type="index" width="100" label="序号" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="orderNumber" label="订单编号" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="customerName" label="客户名称" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="orderContent" label="订单内容" align="center"> |
|
<template slot-scope="scope"> |
|
<el-popover trigger="hover" placement="top" style='width: 500px' v-if='scope.row.orderContent.length >14'> |
|
<p> {{ scope.row.orderContent }}</p> |
|
<div slot="reference" class="name-wrapper"> |
|
<el-tag size="medium" class='tags'>{{ scope.row.orderContent }}</el-tag> |
|
</div> |
|
</el-popover> |
|
<span v-else> |
|
{{ scope.row.orderContent }} |
|
</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="orderAmount" label="订单金额（元）" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="createTime" label="订单日期" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="orderType" label="订单类型" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="orderStatus" label="订单状态" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="orderNature" label="订单性质" align="center"> |
|
</el-table-column> |
|
<el-table-column label="操作" align="center"> |
|
<template slot-scope="scope"> |
|
<el-button type="text" v-if="scope.row.isDel!==1" @click="handle('edit',scope.row)"> |
|
{{ scope.row.orderStatus === "已完成" ? "修改" : "处理" }} |
|
</el-button> |
|
<el-button type="text" @click="handle('watch',scope.row)">查看</el-button> |
|
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button> |
|
<el-button type="text" v-if="scope.row.orderStatus==='已完成'&&scope.row.isDel!==1" |
|
@click="handle('renew',scope.row)">续费 |
|
</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="pagination"> |
|
<el-pagination background layout="total, prev, pager, next" |
|
@current-change="handleCurrentChange" :current-page="pageNo" :total="totals"> |
|
</el-pagination> |
|
</div> |
|
</el-card> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
form: { |
|
provinces: "", |
|
city: "", |
|
orderType: "", |
|
orderStatus: "" |
|
}, |
|
keyword: "", |
|
orderData: [], |
|
multipleSelection: [], |
|
provinceList: this.$store.state.provinceList, |
|
cityList: [], |
|
orderTypeList: [{ |
|
name: "正式", |
|
value: 1 |
|
}, |
|
{ |
|
name: "试用", |
|
value: 2 |
|
}], |
|
orderStatusList: [{ |
|
name: "待发货", |
|
value: 0 |
|
}, |
|
{ |
|
name: "已完成", |
|
value: 1 |
|
}, |
|
{ |
|
name: "已取消", |
|
value: 2 |
|
}], |
|
pageNo: 1, |
|
pageSize: 10, |
|
totals: 1, |
|
searchTimer: null |
|
}; |
|
}, |
|
watch: { |
|
keyword: function(val) { |
|
clearTimeout(this.searchTimer); |
|
this.searchTimer = setTimeout(() => { |
|
this.initData(); |
|
}, 500); |
|
} |
|
}, |
|
created() { |
|
this.getData(); |
|
}, |
|
methods: { |
|
test(val) { |
|
if (val.length > 5) { |
|
val = 5; |
|
} |
|
}, |
|
getData() { |
|
let data = { |
|
cityId: this.form.city, |
|
customerName: this.keyword, |
|
orderStatus: this.form.orderStatus, |
|
orderType: this.form.orderType, |
|
pageNo: this.pageNo, |
|
pageSize: this.pageSize, |
|
provinceId: this.form.provinces |
|
}; |
|
this.$post(this.api.orderList, data).then(res => { |
|
res.orderPage.orders.forEach(e => { |
|
e.orderType = this.orderTypeFn(e.orderType); |
|
e.orderStatus = this.orderStatusFn(e.orderStatus); |
|
e.orderNature = this.orderNatureFn(e.orderNature); |
|
}); |
|
this.orderData = res.orderPage.orders; |
|
this.totals = res.orderPage.total; |
|
}).catch(res => { |
|
}); |
|
}, |
|
// 清除省份 |
|
clearprovince() { |
|
this.form.city = ""; |
|
}, |
|
// 获取城市 |
|
getCity() { |
|
this.clearprovince(); |
|
this.getCityData(); |
|
this.pageNo = 1; |
|
this.getData(); |
|
}, |
|
getCityData() { |
|
let data = { |
|
provinceId: this.form.provinces |
|
}; |
|
this.$get(this.api.queryCity, data).then(res => { |
|
this.cityList = res.list; |
|
}).catch(res => { |
|
}); |
|
}, |
|
addOrder() { |
|
this.$store.commit("systemData", { order_id: "" }); |
|
this.$router.push({ |
|
path:'/AddOrder', |
|
query:{ |
|
val:'isAdd', |
|
} |
|
}) |
|
}, |
|
handle(val, row) { |
|
let orderStatus |
|
if(row.orderStatus == '已完成'){ |
|
orderStatus = 1 |
|
}else{ |
|
orderStatus = 0 |
|
} |
|
this.$router.push({ |
|
path:'/AddOrder', |
|
query:{ |
|
val:val, |
|
orderId:row.orderId, |
|
orderStatus:orderStatus |
|
} |
|
}) |
|
// this.$router.push("/addorder?" + val + "=" + row.orderId+"&orderStatus="+orderStatus); |
|
}, |
|
// 删除订单 |
|
handleDelete(row) { |
|
this.$confirm("确定要删除吗？", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
var arr = []; |
|
arr.push(row.orderId); |
|
this.$post(this.api.orderDelete, { ids: arr }).then(res => { |
|
this.$message.success("删除成功"); |
|
if(this.orderData.length == 2){ |
|
|
|
}else{ |
|
if(this.pageNo > 1){ |
|
this.pageNo = this.pageNo-1 |
|
} |
|
} |
|
this.getData(); |
|
}).catch(res => { |
|
}); |
|
}).catch(() => { |
|
}); |
|
}, |
|
// 续签 |
|
handleRenew(row) { |
|
|
|
}, |
|
getRowKeys(row) { |
|
return row.orderId; |
|
}, |
|
handleSelectionChange(val) { |
|
if (val.length > 0) { |
|
this.multipleSelection = val.map(e => e.orderId); |
|
} else { |
|
this.multipleSelection = []; |
|
} |
|
}, |
|
delAllSelection() { |
|
if (this.multipleSelection.length != "") { |
|
// 批量删除 |
|
this.$confirm("确定要删除吗？", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
this.$post(this.api.orderDelete, { ids: this.multipleSelection }).then(res => { |
|
this.$message.success("删除成功"); |
|
if(this.multipleSelection.length == this.orderData.length){ |
|
if(this.pageNo > 1){ |
|
this.pageNo = this.pageNo-1 |
|
} |
|
this.multipleSelection = []; |
|
}else{ |
|
this.multipleSelection = []; |
|
} |
|
this.getData(); |
|
}).catch(err => { |
|
}); |
|
}).catch(err => { |
|
}); |
|
} else { |
|
this.$message.error("请先选择订单 ！"); |
|
} |
|
}, |
|
initData() { |
|
this.pageNo = 1; |
|
this.getData(); |
|
}, |
|
handleCurrentChange(val) { |
|
this.pageNo = val; |
|
this.getData(); |
|
}, |
|
// 选择客户触发 |
|
gotoClient() { |
|
this.$router.push(""); |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style scoped> |
|
.mag { |
|
margin-right: 20px; |
|
} |
|
.cell{ |
|
white-space:pre-wrap; |
|
width: 140px; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 2; |
|
line-clamp: 2; |
|
-webkit-box-orient: vertical; |
|
} |
|
.tags{ |
|
border: none; |
|
background: none;color: #000; |
|
white-space:pre-wrap; |
|
width: 140px; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 2; |
|
line-clamp: 2; |
|
-webkit-box-orient: vertical; |
|
} |
|
</style> |
|
|
|
|