<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="5">
<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="5">
<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="5">
<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="5">
<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="4">
<el-form-item>
<el-input placeholder="请输入订单号/客户名称/订单名称" prefix-icon="el-icon-search" v-model="keyword" @keyup.enter.native="onSearch" 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" size="small" round class="mag" @click="addOrder()">新建订单</el-button>
<el-button type="primary" size="small" 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">
</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,
setTime:'',
};
},
watch: {
keyword: function(val) {
clearTimeout(this.setTime)
this.setTime = setTimeout(()=>{
this.onSearch()
},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('/addorder');
},
handle(val,row){
this.$router.push('/addorder?'+val+'='+row.orderId);
},
// 删除订单
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('删除成功');
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.multipleSelection = [];
this.$message.success('删除成功');
this.getData()
}).catch(err => {});
}).catch(err => {});
}else{
this.$message.error('请先选择订单 ！');
}
},
onSearch(){
this.pageNo = 1
this.getData()
},
handleCurrentChange(val) {
this.pageNo = val;
this.getData();
},
// 选择客户触发
gotoClient(){
this.$router.push('')
}
}
};
</script>
<style scoped>
.mag{
margin-right: 20px;
}
</style>