承租方订单
This commit is contained in:
parent
9f8650b8cc
commit
cfaa20bd68
|
|
@ -17,11 +17,11 @@
|
|||
</el-header>
|
||||
|
||||
<el-steps class="step" :space="400" :active="Id" finish-status="success">
|
||||
<el-step :title="getStepTitle(1)"></el-step>
|
||||
<el-step :title="getStepTitle(2)"></el-step>
|
||||
<el-step :title="getStepTitle(3)"></el-step>
|
||||
<el-step :title="getStepTitle(4)"></el-step>
|
||||
<el-step :title="getStepTitle(5)"></el-step>
|
||||
<el-step :title="getStepTitle(1)" :description="getDescription(1)" ></el-step>
|
||||
<el-step :title="getStepTitle(2)" :description="getDescription(2)" ></el-step>
|
||||
<el-step :title="getStepTitle(3)" :description="getDescription(3)" ></el-step>
|
||||
<el-step :title="getStepTitle(4)" :description="getDescription(4)" ></el-step>
|
||||
<el-step :title="getStepTitle(5)" :description="getDescription(5)" ></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
|
||||
|
|
@ -34,13 +34,17 @@
|
|||
style="margin-top: 10px; display: flex; flex-wrap: wrap;"
|
||||
|
||||
>
|
||||
<div class="item" style="width: 35%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;margin-left: 80px;opacity: 0.7">
|
||||
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;margin-left: 80px;opacity: 0.7">
|
||||
<span>订单编号：</span>
|
||||
</div>
|
||||
<div class="item" style="width: 35%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;opacity: 0.7">
|
||||
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;opacity: 0.7">
|
||||
<span>下单时间：</span>
|
||||
</div>
|
||||
|
||||
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;opacity: 0.7">
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;margin-left: 80px;opacity: 0.7">
|
||||
<span>出租单位：</span>
|
||||
</div>
|
||||
|
|
@ -72,7 +76,7 @@
|
|||
</div>
|
||||
|
||||
<div class="cart-tbody" >
|
||||
<el-row class="cart-list" v-for="(goods, j) in cardList[0].good_list" :key="j">
|
||||
<el-row class="cart-list" v-for="(goods, j) in this.cardList[0].good_list" :key="j">
|
||||
<el-col :span="10" class="goods-info">
|
||||
<el-col :span="7">
|
||||
<img :src="goods.goods_pic" alt="" />
|
||||
|
|
@ -158,6 +162,14 @@ export default {
|
|||
productionTime: undefined,
|
||||
},
|
||||
cardList:[],
|
||||
//描述信息
|
||||
operationDetails: {
|
||||
1: { title: '已出库', operator: '张三', date: '2024-10-10 10:00:00' },
|
||||
2: { title: '已收货', operator: '李四', date: '2024-10-10 11:00:00' },
|
||||
3: { title: '租赁结束', operator: '王五', date: '2024-10-10 12:00:00' },
|
||||
4: { title: '已退租', operator: '赵六', date: '2024-10-10 13:00:00' },
|
||||
5: { title: '已完成', operator: '钱七', date: '2024-10-10 14:00:00' },
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -181,26 +193,37 @@ export default {
|
|||
|
||||
// 根据步骤的 Id 返回对应的标题
|
||||
getStepTitle(stepId) {
|
||||
console.log("id",this.Id)
|
||||
if (this.Id === 1) {
|
||||
this.titleStaus= stepId === 1 ? '待出库' : '';
|
||||
this.titleStaus= '待出库' ;
|
||||
return stepId === 1 ? '待出库' : '';
|
||||
} else if (this.Id === 2) {
|
||||
this.titleStaus= stepId === 1 ? '已出库' : stepId === 2 ? '待收货' : '';
|
||||
this.titleStaus= '待收货' ;
|
||||
return stepId === 1 ? '已出库' : stepId === 2 ? '待收货' : '';
|
||||
} else if (this.Id === 3) {
|
||||
this.titleStaus= 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁中' : '';
|
||||
this.titleStaus= '租赁中' ;
|
||||
return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁中' : '';
|
||||
} else if (this.Id === 4) {
|
||||
this.titleStaus= 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁中' : stepId === 4 ? '发起费用结算' : '';
|
||||
return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁中' : stepId === 4 ? '发起费用结算' : '';
|
||||
this.titleStaus= '发起费用结算' ;
|
||||
return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁结束' : stepId === 4 ? '发起费用结算' : '';
|
||||
} else if (this.Id === 5) {
|
||||
this.titleStaus= 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁中' : stepId === 4 ? '发起费用结算' : stepId === 5 ? '已完成' : '';
|
||||
return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁中' : stepId === 4 ? '发起费用结算' : stepId === 5 ? '已完成' : '';
|
||||
this.titleStaus= '已完成' ;
|
||||
return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁结束' : stepId === 4 ? '已退租' : stepId === 5 ? '已完成' : '';
|
||||
}
|
||||
this.titleStaus=''
|
||||
return ''; // 默认返回空字符串
|
||||
},
|
||||
|
||||
// 根据步骤的 Id 返回对应的描述
|
||||
getDescription(desId){
|
||||
const operation = this.operationDetails[desId];
|
||||
if (operation) {
|
||||
return `
|
||||
操作人：${operation.operator}<br>
|
||||
操作时间：${operation.date}
|
||||
`;
|
||||
}
|
||||
return ''; // 默认返回空描述
|
||||
},
|
||||
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
|
|
|
|||
|
|
@ -211,7 +211,15 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -377,15 +385,30 @@
|
|||
],
|
||||
},
|
||||
];
|
||||
|
||||
this.total = this.cardList.length;
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
// 公司全选事件
|
||||
onChangeCompany(e, index, item) {
|
||||
this.cardList[index].good_list.forEach(item=>{
|
||||
item.isChecked = e;
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
// 公司子级list全选事件
|
||||
onChangeGoods(index) {
|
||||
this.cardList[index].isChecked = this.cardList[index].good_list.every(
|
||||
(e) => e.isChecked === true,
|
||||
)
|
||||
},
|
||||
|
||||
//订单详情
|
||||
handleViewOrder(row){
|
||||
this.$router.push({
|
||||
path: '/lessor/order/detail',
|
||||
query: { Id:Number(3),isView:"true" }
|
||||
query: { Id:Number(5),isView:"true" }
|
||||
})
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,361 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item :to="{ path: '/lessor/order' }">订单管理</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>订单明细</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<div class="section">
|
||||
<el-header>
|
||||
<el-row type="flex" justify="space-between" align="middle">
|
||||
<el-col :span="3">
|
||||
<span>订单流程</span>
|
||||
</el-col>
|
||||
<el-col :span="1" style="text-align:right;margin-right:300px;font-size: 20px;">
|
||||
<div style="color:green;border: 1px solid #ccc;">{{titleStaus}}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-header>
|
||||
|
||||
<el-steps class="step" :space="400" :active="Id" finish-status="success">
|
||||
<el-step :title="getStepTitle(1)" :description="getDescription(1)" ></el-step>
|
||||
<el-step :title="getStepTitle(2)" :description="getDescription(2)" ></el-step>
|
||||
<el-step :title="getStepTitle(3)" :description="getDescription(3)" ></el-step>
|
||||
<el-step :title="getStepTitle(4)" :description="getDescription(4)" ></el-step>
|
||||
<el-step :title="getStepTitle(5)" :description="getDescription(5)" ></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<el-header>租赁信息
|
||||
</el-header>
|
||||
<div style="height: 120px; overflow-y: scroll">
|
||||
<div
|
||||
class="info"
|
||||
style="margin-top: 10px; display: flex; flex-wrap: wrap;"
|
||||
|
||||
>
|
||||
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;margin-left: 80px;opacity: 0.7">
|
||||
<span>订单编号：</span>
|
||||
</div>
|
||||
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;opacity: 0.7">
|
||||
<span>下单时间：</span>
|
||||
</div>
|
||||
|
||||
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;opacity: 0.7">
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;margin-left: 80px;opacity: 0.7">
|
||||
<span>出租单位：</span>
|
||||
</div>
|
||||
|
||||
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;opacity: 0.7">
|
||||
<span>出租人：</span>
|
||||
</div>
|
||||
|
||||
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;opacity: 0.7">
|
||||
<span>出租人联系电话：</span>
|
||||
</div>
|
||||
|
||||
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;margin-left: 80px;opacity: 0.7">
|
||||
<span>承租单位：</span>
|
||||
</div>
|
||||
|
||||
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;opacity: 0.7">
|
||||
<span>承租人：</span>
|
||||
</div>
|
||||
|
||||
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;opacity: 0.7">
|
||||
<span>承租人联系电话：</span>
|
||||
</div>
|
||||
|
||||
<div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 16px;margin-left: 80px;opacity: 0.7">
|
||||
<span>租赁协议：</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cart-tbody" >
|
||||
<el-row class="cart-list" v-for="(goods, j) in this.cardList[0].good_list" :key="j">
|
||||
<el-col :span="10" class="goods-info">
|
||||
<el-col :span="7">
|
||||
<img :src="goods.goods_pic" alt="" />
|
||||
</el-col>
|
||||
<div class="goods-code">
|
||||
<div style="font-size: 14px; font-weight: bold">{{ goods.goods_name }}</div>
|
||||
<div>租期： {{ goods.lease_day }}{{" "+"天"}}</div>
|
||||
<div style="display: flex; justify-content: space-between; width: 100%;">
|
||||
<div style="display:flex:1;text-align:left;">租金：{{ goods.lease_pic }}{{" "+"元/天"}}</div>
|
||||
<div style="display:flex:1;text-align:left;margin-left:100px">数量：{{ goods.goods_num }}{{" "+"台"}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div style="font-size: 14px; font-weight: bold;margin-bottom:10px">总费用</div>
|
||||
<div class="red-font">1500</div>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div style="font-size: 14px; font-weight: bold;margin-bottom:10px">租期</div>
|
||||
<div style="color:black;font-weight: bold;">
|
||||
{{ "2024-10-11"+" " }}{{"至"}}{{ " "+"2024-10-11" }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div style="font-size: 14px; font-weight: bold;margin-bottom:10px">
|
||||
{{ "待出租"}}
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- <el-col :span="1.1">
|
||||
<div>
|
||||
<el-button
|
||||
@click="handleViewOrder(j)"
|
||||
type="text"
|
||||
size="mini"
|
||||
style="color: #blue; font-weight: bold"
|
||||
>
|
||||
出库
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="handleViewOrder(j)"
|
||||
type="text"
|
||||
size="mini"
|
||||
style="color: #blue; font-weight: bold"
|
||||
>
|
||||
驳回
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "orderDetail",
|
||||
data() {
|
||||
return {
|
||||
Id: 1,
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
dialogLoading: false,
|
||||
isView: false,
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
ids: [],
|
||||
checkList: [],
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
titleStaus:"",
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
typeId: undefined,
|
||||
supplierId: undefined,
|
||||
productionTime: undefined,
|
||||
},
|
||||
cardList:[],
|
||||
//描述信息
|
||||
operationDetails: {
|
||||
1: { title: '已出库', operator: '张三', date: '2024-10-10 10:00:00' },
|
||||
2: { title: '已收货', operator: '李四', date: '2024-10-10 11:00:00' },
|
||||
3: { title: '租赁结束', operator: '王五', date: '2024-10-10 12:00:00' },
|
||||
4: { title: '已退租', operator: '赵六', date: '2024-10-10 13:00:00' },
|
||||
5: { title: '已完成', operator: '钱七', date: '2024-10-10 14:00:00' },
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const Id = Number(this.$route.query && this.$route.query.Id);
|
||||
const isView = this.$route.query && this.$route.query.isView;
|
||||
this.Id = Id || 1;
|
||||
if (isView == "true") {
|
||||
this.isView = true;
|
||||
} else {
|
||||
this.isView = false;
|
||||
}
|
||||
this.$forceUpdate();
|
||||
this.getList();
|
||||
},
|
||||
watch:{
|
||||
Id(newId){
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 根据步骤的 Id 返回对应的标题
|
||||
getStepTitle(stepId) {
|
||||
if (this.Id === 1) {
|
||||
this.titleStaus= '待出库' ;
|
||||
return stepId === 1 ? '待出库' : '';
|
||||
} else if (this.Id === 2) {
|
||||
this.titleStaus= '待收货' ;
|
||||
return stepId === 1 ? '已出库' : stepId === 2 ? '待收货' : '';
|
||||
} else if (this.Id === 3) {
|
||||
this.titleStaus= '租赁中' ;
|
||||
return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁中' : '';
|
||||
} else if (this.Id === 4) {
|
||||
this.titleStaus= '发起费用结算' ;
|
||||
return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁结束' : stepId === 4 ? '发起费用结算' : '';
|
||||
} else if (this.Id === 5) {
|
||||
this.titleStaus= '已完成' ;
|
||||
return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁结束' : stepId === 4 ? '已退租' : stepId === 5 ? '已完成' : '';
|
||||
}
|
||||
this.titleStaus=''
|
||||
return ''; // 默认返回空字符串
|
||||
},
|
||||
|
||||
// 根据步骤的 Id 返回对应的描述
|
||||
getDescription(desId){
|
||||
const operation = this.operationDetails[desId];
|
||||
if (operation) {
|
||||
return `
|
||||
操作人：${operation.operator}<br>
|
||||
操作时间：${operation.date}
|
||||
`;
|
||||
}
|
||||
return ''; // 默认返回空描述
|
||||
},
|
||||
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.cardList = [
|
||||
{
|
||||
company_name: '安徽博诺斯有限公司',
|
||||
user_name: '王先生',
|
||||
user_phone: '18725632356',
|
||||
isChecked: false,
|
||||
good_list: [
|
||||
{
|
||||
goods_pic:
|
||||
'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
||||
goods_name: 'W190挖掘机',
|
||||
goods_code: '995221_JHL',
|
||||
goods_type: '挖地型号996',
|
||||
lease_date: '',
|
||||
lease_pic: 300,
|
||||
lease_day: 0,
|
||||
goods_num: 0,
|
||||
totalAmount: 0,
|
||||
isChecked: false,
|
||||
lease_date_string: '',
|
||||
},
|
||||
{
|
||||
goods_pic:
|
||||
'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
||||
goods_name: 'W190挖掘机',
|
||||
goods_code: '995221_JHL',
|
||||
goods_type: '挖地型号996',
|
||||
lease_date: '',
|
||||
lease_pic: 300,
|
||||
lease_day: 0,
|
||||
goods_num: 0,
|
||||
totalAmount: 0,
|
||||
isChecked: false,
|
||||
lease_date_string: '',
|
||||
},
|
||||
{
|
||||
goods_pic:
|
||||
'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
||||
goods_name: 'W190挖掘机',
|
||||
goods_code: '995221_JHL',
|
||||
goods_type: '挖地型号996',
|
||||
lease_date: '',
|
||||
lease_pic: 300,
|
||||
lease_day: 0,
|
||||
goods_num: 0,
|
||||
totalAmount: 0,
|
||||
isChecked: false,
|
||||
lease_date_string: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.section {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 20px;
|
||||
.step{
|
||||
margin-left:80px;;
|
||||
}
|
||||
}
|
||||
.cart-tbody {
|
||||
background: #fff;
|
||||
padding: 8px 12px;
|
||||
margin: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 20px;
|
||||
.cart-user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
|
||||
.user-name,
|
||||
.user-phone {
|
||||
padding: 3px 18px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
margin-left: 20px;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-list {
|
||||
margin: 15px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
img {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.goods-code {
|
||||
margin-left: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
div {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lease-date {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.red-font {
|
||||
color: #ff4800;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,19 +1,11 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-row>
|
||||
<el-form-item prop="keyWord">
|
||||
<el-input
|
||||
v-model="queryParams.keyWord"
|
||||
placeholder="请输入订单名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
maxlength="20"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="keyWord1">
|
||||
<el-input
|
||||
v-model="queryParams.keyWord"
|
||||
placeholder="请输入订单编码"
|
||||
placeholder="请输入装备名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
maxlength="20"
|
||||
|
|
@ -29,26 +21,6 @@
|
|||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择订单分类" clearable>
|
||||
<el-option
|
||||
v-for="item in statusList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择订单型号" clearable>
|
||||
<el-option
|
||||
v-for="item in statusList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
|
|
@ -59,90 +31,201 @@
|
|||
end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item prop="keyWord1">
|
||||
<el-input
|
||||
v-model="queryParams.keyWord"
|
||||
placeholder="请输入出租单位"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
maxlength="20"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="keyWord2">
|
||||
<el-input
|
||||
v-model="queryParams.keyWord"
|
||||
placeholder="请输入承租单位"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
maxlength="20"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-form-item prop="keyWord2">
|
||||
<el-input
|
||||
v-model="queryParams.keyWord"
|
||||
placeholder="租金/元"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
maxlength="20"
|
||||
style="width:100px"
|
||||
/>
|
||||
<span> ——</span>
|
||||
</el-form-item>
|
||||
<el-form-item prop="keyWord2">
|
||||
<el-input
|
||||
v-model="queryParams.keyWord"
|
||||
placeholder="租金/元"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
maxlength="20"
|
||||
style="width:100px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success" plain
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
<div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
|
||||
<el-row style="border-bottom: 1px solid #ccc">
|
||||
<el-col :span="1">
|
||||
<div style="text-align: center">
|
||||
<el-checkbox
|
||||
v-model="item.isChecked"
|
||||
@change="onChangeCompany($event, index, item)"
|
||||
>
|
||||
订单新建
|
||||
</el-button>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning" plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
>批量上架</el-button>
|
||||
<el-col :span="22">
|
||||
<el-row>
|
||||
<el-col :span="7">
|
||||
<div class="item" style="flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span>订单编号:</span>
|
||||
{{ item.company_name }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning" plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
>批量下架</el-button>
|
||||
<el-col :span="7">
|
||||
<div class="item" style="flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span class="user-name">下单时间:</span>
|
||||
{{ item.user_name }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<div class="item" style="flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span class="user-phone">装备所属公司:</span>
|
||||
{{ item.user_phone }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div style="flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<el-button v-if="status==0" class="item" type="primary" size="mini">出库</el-button>
|
||||
<el-button v-if="status==0" class="item" type="primary" size="mini">驳回</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table v-loading="loading" :data="tableList" ref="multipleTable" row-key="taskId" @selection-change="handleSelectionChange" border>
|
||||
<el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
|
||||
<el-table-column label="序号" align="center" width="80" type="index">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="订单名称" align="center" prop="" width="150" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="订单编码" align="center" prop="" width="150" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="订单类目" align="center" prop="" width="150" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="订单型号" align="center" prop="" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="订单状态" align="center" prop="status" :show-overflow-tooltip="true">
|
||||
<!-- <template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.purchase_task_status" :value="scope.row.status"/>
|
||||
</template> -->
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="" width="150" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="操作" align="center" width="250">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="handleView(scope.row)">
|
||||
查看
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini" type="primary"
|
||||
@click="handleUpdate(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini" type="warning" >
|
||||
下架
|
||||
</el-button>
|
||||
<el-button size="mini" type="danger" >
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="7">
|
||||
<div class="item" style="flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span>出租方联系电话:</span>
|
||||
{{ item.company_name }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<div class="item" style="flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span class="user-name">承租方联系电话:</span>
|
||||
{{ item.user_name }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<div class="item" style="flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||||
<span class="user-phone">承租方地址:</span>
|
||||
{{ item.user_phone }}
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="cart-list" v-for="(goods, j) in item.good_list" :key="j">
|
||||
<el-col :span="1">
|
||||
<div style="text-align: center">
|
||||
<el-checkbox v-model="goods.isChecked" @change="onChangeGoods(index)">
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="10" class="goods-info">
|
||||
<el-col :span="7">
|
||||
<img :src="goods.goods_pic" alt="" />
|
||||
</el-col>
|
||||
<div class="goods-code">
|
||||
<div style="font-size: 14px; font-weight: bold">{{ goods.goods_name }}</div>
|
||||
<div>租期： {{ goods.lease_day }}{{" "+"天"}}</div>
|
||||
<div style="display: flex; justify-content: space-between; width: 100%;">
|
||||
<div style="display:flex:1;text-align:left;">租金：{{ goods.lease_pic }}{{" "+"元/天"}}</div>
|
||||
<div style="display:flex:1;text-align:left;margin-left:100px">数量：{{ goods.goods_num }}{{" "+"台"}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div style="font-size: 14px; font-weight: bold;margin-bottom:10px">总费用</div>
|
||||
<div class="red-font">1500</div>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div style="font-size: 14px; font-weight: bold;margin-bottom:10px">租期</div>
|
||||
<div style="color:black;font-weight: bold;">
|
||||
{{ "2024-10-11"+" " }}{{"至"}}{{ " "+"2024-10-11" }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div style="font-size: 14px; font-weight: bold;margin-bottom:10px">
|
||||
{{ "待出租"}}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="1.1">
|
||||
<div>
|
||||
<el-button
|
||||
@click="handleViewOrder(j)"
|
||||
type="text"
|
||||
size="mini"
|
||||
style="color: #blue; font-weight: bold"
|
||||
>
|
||||
订单详情
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="handleViewOrder(j)"
|
||||
type="text"
|
||||
size="mini"
|
||||
style="color: #blue; font-weight: bold"
|
||||
>
|
||||
租赁协议
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="handleViewOrder(j)"
|
||||
type="text"
|
||||
size="mini"
|
||||
style="color: #blue; font-weight: bold"
|
||||
>
|
||||
退租检修
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="handleViewOrder(j)"
|
||||
type="text"
|
||||
size="mini"
|
||||
style="color: #blue; font-weight: bold"
|
||||
>
|
||||
费用结算
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPurchaseList } from "@/api/purchase/goodsAccept";
|
||||
export default {
|
||||
name: "",
|
||||
name: "order",
|
||||
// dicts: ['purchase_task_status'],
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -172,10 +255,13 @@
|
|||
keyWord:undefined,
|
||||
status:undefined,
|
||||
},
|
||||
//卡片集合
|
||||
cardList:[],
|
||||
status:0,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// this.getList();
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
|
|
@ -188,12 +274,144 @@
|
|||
this.queryParams.startTime=undefined
|
||||
this.queryParams.endTime=undefined
|
||||
}
|
||||
getPurchaseList(this.queryParams).then(response => {
|
||||
this.tableList = response.data.rows;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
this.cardList = [
|
||||
{
|
||||
company_name: '安徽博诺斯有限公司',
|
||||
user_name: '王先生',
|
||||
user_phone: '18725632356',
|
||||
isChecked: false,
|
||||
good_list: [
|
||||
{
|
||||
goods_pic:
|
||||
'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
||||
goods_name: 'W190挖掘机',
|
||||
goods_code: '995221_JHL',
|
||||
goods_type: '挖地型号996',
|
||||
lease_date: '',
|
||||
lease_pic: 300,
|
||||
lease_day: 1,
|
||||
goods_num: 0,
|
||||
totalAmount: 0,
|
||||
isChecked: false,
|
||||
lease_date_string: '',
|
||||
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
company_name: '安徽博诺斯有限公司',
|
||||
user_name: '王先生',
|
||||
user_phone: '18725632356',
|
||||
isChecked: false,
|
||||
good_list: [
|
||||
{
|
||||
goods_pic:
|
||||
'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
||||
goods_name: 'W190挖掘机',
|
||||
goods_code: '995221_JHL',
|
||||
goods_type: '挖地型号996',
|
||||
lease_date: '',
|
||||
lease_pic: 300,
|
||||
lease_day: 0,
|
||||
goods_num: 0,
|
||||
totalAmount: 0,
|
||||
isChecked: false,
|
||||
lease_date_string: '',
|
||||
},
|
||||
{
|
||||
goods_pic:
|
||||
'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
||||
goods_name: 'W190挖掘机',
|
||||
goods_code: '995221_JHL',
|
||||
goods_type: '挖地型号996',
|
||||
lease_date: '',
|
||||
lease_pic: 300,
|
||||
lease_day: 0,
|
||||
goods_num: 0,
|
||||
totalAmount: 0,
|
||||
isChecked: false,
|
||||
lease_date_string: '',
|
||||
},
|
||||
{
|
||||
goods_pic:
|
||||
'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
||||
goods_name: 'W190挖掘机',
|
||||
goods_code: '995221_JHL',
|
||||
goods_type: '挖地型号996',
|
||||
lease_date: '',
|
||||
lease_pic: 300,
|
||||
lease_day: 0,
|
||||
goods_num: 0,
|
||||
totalAmount: 0,
|
||||
isChecked: false,
|
||||
lease_date_string: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
company_name: '安徽博诺斯有限公司',
|
||||
user_name: '王先生',
|
||||
user_phone: '18725632356',
|
||||
isChecked: false,
|
||||
good_list: [
|
||||
{
|
||||
goods_pic:
|
||||
'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
||||
goods_name: 'W190挖掘机',
|
||||
goods_code: '995221_JHL',
|
||||
goods_type: '挖地型号996',
|
||||
lease_date: '',
|
||||
lease_pic: 300,
|
||||
lease_day: 0,
|
||||
goods_num: 0,
|
||||
totalAmount: 0,
|
||||
isChecked: false,
|
||||
lease_date_string: '',
|
||||
},
|
||||
{
|
||||
goods_pic:
|
||||
'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
||||
goods_name: 'W190挖掘机',
|
||||
goods_code: '995221_JHL',
|
||||
goods_type: '挖地型号996',
|
||||
lease_date: '',
|
||||
lease_pic: 300,
|
||||
lease_day: 0,
|
||||
goods_num: 0,
|
||||
totalAmount: 0,
|
||||
isChecked: false,
|
||||
lease_date_string: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
this.total = this.cardList.length;
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
// 公司全选事件
|
||||
onChangeCompany(e, index, item) {
|
||||
this.cardList[index].good_list.forEach(item=>{
|
||||
item.isChecked = e;
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
// 公司子级list全选事件
|
||||
onChangeGoods(index) {
|
||||
this.cardList[index].isChecked = this.cardList[index].good_list.every(
|
||||
(e) => e.isChecked === true,
|
||||
)
|
||||
},
|
||||
|
||||
//订单详情
|
||||
handleViewOrder(row){
|
||||
this.$router.push({
|
||||
path: '/tenantry/order/detail',
|
||||
query: { Id:Number(5),isView:"true" }
|
||||
})
|
||||
},
|
||||
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
|
|
@ -212,24 +430,6 @@
|
|||
this.single = selection.length != 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
//编辑
|
||||
handleUpdate(row){
|
||||
console.log(row)
|
||||
// let query = { Id:row.id,taskId: row.taskId,isView:"false" }
|
||||
// this.$tab.closeOpenPage({
|
||||
// path: '/purchase/goodsAcceptDetail',
|
||||
// query,
|
||||
// })
|
||||
},
|
||||
//查看
|
||||
handleView(row){
|
||||
console.log(row)
|
||||
// let query = { Id:row.id,taskId: row.taskId,isView:"true" }
|
||||
// this.$tab.closeOpenPage({
|
||||
// path: '/purchase/goodsAcceptDetail',
|
||||
// query,
|
||||
// })
|
||||
},
|
||||
handleExport() {
|
||||
// this.download('/material/ma_machine/export', {
|
||||
// ...this.queryParams
|
||||
|
|
@ -262,4 +462,107 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
.app-container {
|
||||
|
||||
.cart-title {
|
||||
margin-top: 20px;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.cart-title div:first-child {
|
||||
width: 5px;
|
||||
height: 20px;
|
||||
background-color: #4fabfe;
|
||||
}
|
||||
|
||||
.cart-th {
|
||||
margin: 15px 0;
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-tbody {
|
||||
background: #fff;
|
||||
padding: 8px 12px;
|
||||
margin: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 20px;
|
||||
.cart-user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
|
||||
.user-name,
|
||||
.user-phone {
|
||||
padding: 3px 18px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
margin-left: 20px;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-list {
|
||||
margin: 15px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
img {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.goods-code {
|
||||
margin-left: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
div {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lease-date {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.red-font {
|
||||
color: #ff4800;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.protocol-handle {
|
||||
background: #fff;
|
||||
padding: 8px 12px;
|
||||
margin: 10px;
|
||||
font-size: 13px;
|
||||
|
||||
.checkbox-container a {
|
||||
color: #ff4800;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue