bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

订单出租页面搭建

This commit is contained in:
jjLv 2024-11-25 13:14:13 +08:00
parent f9fa2c5c71
commit 3a5652e51d
1 changed files with 395 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

504
src/views/lessor/order/index.vue
View File

@ -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,83 +31,182 @@
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"
>
订单新建
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning" plain
icon="el-icon-download"
size="mini"
>批量上架</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning" plain
icon="el-icon-download"
size="mini"
>批量下架</el-button>
</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>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</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-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="12" 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.goods_code }}</div>
<div class="item" style="width:50%">
<span>租金：</span>
{{ goods.goods_type }}{{" "+"元/天"}}
</div>
<div class="item" style="width:50%">
<span>租金：</span>
{{ goods.goods_type }}{{" "+"元/天"}}
</div>
</div>
</el-col>
<el-col :span="4">
<div class="lease-date">
<div>{{ goods.lease_date_string }}</div>
<el-date-picker
style="width: 100px; margin-top: 10px"
v-model="goods.lease_date"
type="daterange"
size="small"
value-format="YYYY-MM-DD"
@change="onLeaseDateChange($event, goods)"
/>
</div>
</el-col>
<el-col :span="2">
<div class="red-font">
{{ goods.lease_pic }}
</div>
</el-col>
<el-col :span="2">
<div class="red-font" style="color: #0062ff">
{{ goods.lease_day }}
</div>
</el-col>
<el-col :span="2">
<div>
<el-input-number
v-model="goods.goods_num"
style="width: 100px"
:min="1"
size="small"
/>
</div>
</el-col>
<el-col :span="2">
<div class="red-font">
{{ goods.goods_num * goods.lease_pic * goods.lease_day }}
</div>
</el-col>
<el-col :span="2">
<div>
<el-button
@click="onDeleteGoods(j)"
type="text"
style="color: #ff4800; font-weight: bold"
>
删除
</el-button>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
@ -172,10 +243,12 @@
keyWord:undefined,
status:undefined,
},
//卡片集合
cardList:[],
};
},
created() {
// this.getList();
this.getList();
},
methods: {
/** 查询列表 */
@ -188,11 +261,119 @@
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.loading = false;
},
/** 重置按钮操作 */
resetQuery() {
@ -262,4 +443,109 @@
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;
font-size: 13px;
div {
text-align: center;
}
.goods-info {
display: flex;
align-content: center;
img {
width: 160px;
height: 100px;
}
.goods-code {
margin-left: 10px;
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>