543 lines
19 KiB
Vue
543 lines
19 KiB
Vue
<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="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"
|
|
type="datetimerange"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
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>
|
|
<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-checkbox>
|
|
</div>
|
|
</el-col>
|
|
<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="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-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>租金：{{ goods.lease_pic }}{{" "+"元/天"}}</div>
|
|
<div>数量：{{ goods.goods_num }}{{" "+"台"}}</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>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getPurchaseList } from "@/api/purchase/goodsAccept";
|
|
export default {
|
|
name: "order",
|
|
// dicts: ['purchase_task_status'],
|
|
data() {
|
|
return {
|
|
// 遮罩层
|
|
loading: false,
|
|
// 非单个禁用
|
|
single: true,
|
|
// 非多个禁用
|
|
multiple: true,
|
|
// 显示搜索条件
|
|
showSearch: true,
|
|
statusList:[{id:'1',name:'状态1'},{id:'2',name:'状态2'},{id:'3',name:'状态3'}],
|
|
ids:[],
|
|
// 总条数
|
|
total: 0,
|
|
//表格数据
|
|
tableList: [],
|
|
// 弹出层标题
|
|
title: "",
|
|
// 是否显示弹出层
|
|
open: false,
|
|
// 查询参数
|
|
dateRange:[],
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
keyWord:undefined,
|
|
status:undefined,
|
|
},
|
|
//卡片集合
|
|
cardList:[],
|
|
status:0,
|
|
};
|
|
},
|
|
created() {
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
/** 查询列表 */
|
|
getList() {
|
|
this.loading = true;
|
|
if(this.dateRange.length>0){
|
|
this.queryParams.startTime=this.dateRange[0]
|
|
this.queryParams.endTime=this.dateRange[1]
|
|
}else{
|
|
this.queryParams.startTime=undefined
|
|
this.queryParams.endTime=undefined
|
|
}
|
|
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.loading = false;
|
|
},
|
|
|
|
//订单详情
|
|
handleViewOrder(row){
|
|
this.$router.push({
|
|
path: '/lessor/order/detail',
|
|
query: { Id:Number(3),isView:"true" }
|
|
})
|
|
},
|
|
|
|
/** 重置按钮操作 */
|
|
resetQuery() {
|
|
this.resetForm("queryForm");
|
|
this.dateRange=[]
|
|
this.queryParams.keyWord=null;
|
|
this.handleQuery();
|
|
},
|
|
/** 搜索按钮操作 */
|
|
handleQuery() {
|
|
this.queryParams.pageNum = 1;
|
|
this.getList();
|
|
},
|
|
// 多选框选中数据
|
|
handleSelectionChange(selection) {
|
|
this.ids = selection.map(item => item.taskId)
|
|
this.single = selection.length != 1
|
|
this.multiple = !selection.length
|
|
},
|
|
handleExport() {
|
|
// this.download('/material/ma_machine/export', {
|
|
// ...this.queryParams
|
|
// }, `仓库管理_${new Date().getTime()}.xlsx`)
|
|
},
|
|
|
|
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.uploadImg {
|
|
padding-top: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.deviceCode {
|
|
margin-top: 10px;
|
|
padding-bottom: 20px;
|
|
font-size: 18px;
|
|
}
|
|
::v-deep.el-table .fixed-width .el-button--mini {
|
|
width: 60px !important;
|
|
margin-bottom: 10px;
|
|
}
|
|
//隐藏图片上传框的css
|
|
::v-deep.disabled {
|
|
.el-upload--picture-card {
|
|
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> |