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.
262 lines
11 KiB
262 lines
11 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="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" @click="handle('edit',scope.row)">修改</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" @click="handleRenew(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: 1 |
|
}, |
|
{ |
|
name: '已完成', |
|
value: 2 |
|
}, |
|
{ |
|
name: '已取消', |
|
value: 3 |
|
}], |
|
pageNo: 1, |
|
pageSize: 10, |
|
totals: 1 |
|
}; |
|
}, |
|
created() { |
|
this.getData() |
|
}, |
|
methods: { |
|
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 => { |
|
console.log(res,'list'); |
|
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) { |
|
console.log(val,'xuan'); |
|
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> |
|
|
|
|