<template>
<h-view id="addCar">
<transition name="trans">
<div v-show="downNum" class="modal-show">
<div class="down">
<div class="top">
录入产品信息
<img src="@/assets/intoApproval/close.png" @click="downNum=false" >
</div>
<div class="down-content">
<span>请上传照片</span>
<div class="photo">
<!-- <img src=""> -->
</div>
<list-item :item-height="44">
<item>
<div slot="name">车架号</div>
<input slot="content" v-model="info.frame_number" placeholder="自动识别车架号" >
</item>
<item>
<div slot="name">发动机号</div>
<input slot="content" v-model="info.engine" placeholder="自动识别发动机号" >
</item>
<item>
<div slot="name">车辆型号 </div>
<input slot="content" v-model="info.type" placeholder="自动识别车辆型号" >
</item>
<item>
<div slot="name">合格证编号 </div>
<input slot="content" v-model="info.number" placeholder="自动识别合格证编号" >
</item>
<item>
<div slot="name">厂商型号</div>
<input
slot="content"
v-model="info.manufacturer"
class="write"
placeholder="请输入厂商型号"
>
</item>
<item>
<div slot="name">车牌号</div>
<input slot="content" v-model="info.license_plate_number" placeholder="请输入车牌号" >
</item>
<item>
<div slot="name">发车日期</div>
<input slot="content" v-model="showDate" placeholder="请输入发车日期" @click="showTime('YYYY-MM-DD')">
</item>
<!-- <item :showArrow="true" @click.native="showModalValue=true">
<div slot="name">产品参数</div>
<input slot="content" v-model="info.bank_branch_name" placeholder="请选择产品参数" @click="changeHeight">
</item>-->
</list-item>
</div>
<button @click="isSave">保存</button>
</div>
</div>
</transition>
<h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
<span>合同明细</span>
</div>
</h-header>
<h-content>
<div class="userInfo">承租人信息</div>
<list-item :item-height="44">
<item v-if="!read" :showArrow="true">
<div slot="name">合同号</div>
<input
slot="content"
v-model="detail.project_number"
placeholder="请选择合同号"
@click="selectContruct"
>
</item>
<item v-if="read">
<div slot="name">合同号</div>
<input slot="content" v-model="detail.project_number" readonly placeholder="暂无数据" >
</item>
<item v-if="!read" :showArrow="true">
<div slot="name">经销商</div>
<input
slot="content"
v-model="detail.bp_agent_name"
placeholder="请选择经销商"
@click="selectAgent"
>
</item>
<item v-if="read">
<div slot="name">经销商</div>
<input slot="content" v-model="detail.bp_agent_name" readonly placeholder="暂无数据" >
</item>
<item>
<div slot="name">承租人</div>
<input
slot="content"
v-model="detail.bp_name"
:placeholder="read?'暂无数据':'请输入承租人姓名'"
readonly="read"
>
</item>
<item v-if="!read" :showArrow="true">
<div slot="name">产品线</div>
<input
slot="content"
v-model="detail.division_n"
placeholder="请选择产品线"
@click="selectProductLine"
>
</item>
<item v-if="read">
<div slot="name">产品线</div>
<input slot="content" v-model="detail.division_n" readonly placeholder="暂无数据" >
</item>
<item>
<div slot="name">合同金额</div>
<input
slot="content"
v-model="detail.total_price"
:placeholder="read?'暂无数据':'请输入合同金额'"
readonly="read"
>
</item>
<item v-if="!read" :showArrow="true">
<div slot="name">商务政策</div>
<input
slot="content"
v-model="detail.product_plan_name"
placeholder="请选择合同政策"
@click="selectProductPlan"
>
</item>
<item v-if="read">
<div slot="name">商务政策</div>
<input slot="content" v-model="detail.product_plan_name" readonly placeholder="暂无数据" >
</item>
<item>
<div slot="name">租赁物数量</div>
<input slot="content" v-model="detail.product_num" readonly="read" placeholder="请输入租赁物数量" >
</item>
</list-item>
<div class="userInfo">设备清单</div>
<div
v-for="(item,index) in equip"
:key="index"
class="equipment"
@click="downNum = true;getRent(item.contract_id)"
>
<div class="left">
<span>
<img src="@/assets/contractStart/list.png" >
</span>
</div>
<div class="center">
<span>租赁物信息</span>
<span class="status">已维护</span>
<p>
参数项
<span>{{ item.product_code }}</span>
</p>
</div>
<div class="right">
<img src="@/assets/contractStart/into.png" >
</div>
</div>
</h-content>
<bottom-tab>
<tab-button class="approve" @click.native="isApprove">发车申请</tab-button>
</bottom-tab>
<div class="bottom-pop">
<div class="bottom-content">
<div class="box">
<div class="fix">
<div class="hide">
<div class="userInfo">产品查询</div>
<img src="@/assets/contractStart/delete.png" @click="hideBox" >
</div>
<div class="bottom-top">
<input placeholder="请输入产品线" >
<img src="@/assets/contractStart/delete.png" >
<input placeholder="请输入参数项" >
<img src="@/assets/contractStart/delete.png" >
<span />
</div>
</div>
<div class="wrap">
<div v-for="(item,index) in 8" :key="index" class="bottom-item">
<div class="left">
<p>
<img src="@/assets/contractStart/product.png" >
</p>
</div>
<div class="right">
<ul>
<li>
<span class="name">产品线</span>    挖掘机
<span class="to-right">
<span class="name">产品种类</span>    *****
</span>
</li>
<li>
<span class="name">参数项</span>    GTZ226
<span class="to-right">
<span class="name">产品名称</span>    *****
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</h-view>
</template>
<script>
export default {
data () {
return {
num: null,
downNum: false,
show: false,
read: false, // 表示只读
showDate: '',
productLine: [
{
code: '5',
code_name: '测试3',
},
{
code: '9',
code_name: 'PDJ',
},
{
code: '6',
code_name: '测试1',
},
],
productPlan: [
{
code: '5',
code_name: '测试3',
},
{
code: '9',
code_name: 'PDJ',
},
{
code: '6',
code_name: '测试1',
},
],
contract: [
{
code: '5',
code_name: 'PRJ2019003',
},
{
code: '9',
code_name: 'PRJ2019025',
},
{
code: '6',
code_name: 'PRJ2019067',
},
],
agent: [
{
code: '7475',
code_name: '北京去楼下科技有限公司',
},
{
code: '7709',
code_name: '主机厂法人',
},
{
code: '7436',
code_name: '北京雪族科技有限公司',
},
],
info: {
contract_id: '',
frame_number: '',
engine: '',
manufacturer: '',
license_plate_number: '',
type: '',
number: '',
date: '',
},
detail: {
product_num: '',
first_pay: '',
gps_fee: '',
bp_name: '',
project_number: '',
bp_agent_name: '',
product_plan_id_n: '',
division: '',
division_n: '',
product_plan_id: '',
product_plan_name: '',
project_id: '',
bp_id: '',
},
equip: [],
// {
// product_id: '3',
// product_code: 'GTC389',
// contract_id: '231',
// },
}
},
computed: {
numInt () { // 添加设备的时候处理值为空或者nul的情况
if (this.detail.product_num !== null && this.detail.product_num !== '') {
return parseInt(this.detail.product_num)
} else {
return 0
}
},
carDate () {
let date = new Date()
let y = date.getFullYear()
let m = date.getMonth() + 1
let d = date.getDate()
if ((m.toString()).length < 2) {
m = `0${m}`
} else if ((d.toString()).length < 2) {
d = `0${d}`
}
return `${y}-${m}-${d}`
},
},
created () {
this.showDate = this.carDate
},
beforeRouteEnter (to, from, next) {
next(vm => {
// if (from.name === 'StartList') {
// vm.getProductLine()
// vm.getProductPlan()
// vm.getContractNum()
// }
if (vm.$route.params.project_id) {
vm.read = true
vm.getDetail()
vm.getEquipment()
}
})
},
methods: {
showTime (format) {
this.hlsPopup.showTime({
nowDate: `${this.carDate}`,
format: format,
callback: (date) => {
this.showDate = date
},
})
},
save () {
let vm = this
let url = process.env.basePath + 'leases_info_save'
this.info.date = this.showDate
let param = {
master: this.info,
}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.hlsPopup.showSuccess('保存成功')
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
isSave () {
this.hlsPopup.showConfirm({
title: '提示',
content: '您确定保存吗？',
onConfirm: data => {
if (data === 1) {
this.save()
}
},
})
},
isApprove () {
this.hlsPopup.showConfirm({
title: '提示',
content: '您确定申请发车吗？',
onConfirm: data => {
if (data === 1) {
this.approve()
}
},
})
},
getRent (e) {
let vm = this
vm.info.contract_id = e
let url = process.env.basePath + 'leases_info_query'
let param = {
contract_id: e,
}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
Object.assign(vm.info, res.info)
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
approve () {
let vm = this
let url = process.env.basePath + 'car_apply_submit'
let param = {
master: {
project_id: this.$route.params.project_id,
},
}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.hlsPopup.showSuccess('申请成功')
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
getEquipment () {
let vm = this
let url = process.env.basePath + 'car_equip_list_query'
let param = {
project_id: this.$route.params.project_id,
}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.equip = res.lists
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
getContractNum () {
let vm = this
let url = process.env.basePath + 'linked_contract_query'
let param = {
user_phone: window.localStorage.getItem('user_phone'),
}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.contract = res.lists.map(item => {
return {
code: item.project_id,
code_name: item.project_number,
}
})
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
selectContruct () {
let vm = this
vm.hlsPopup.selectList({
list: vm.contract,
code: 'bp_type',
object: {},
returnItem: function (index, obj) {
vm.detail.project_id = obj.bp_type
vm.detail.project_number = obj.bp_type_n
},
})
},
getAgent () {
let vm = this
let url = process.env.basePath + 'vendor_list_query'
let param = {}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.agent = res.lists.map(item => {
return {
code: item.factory_bp_id,
code_name: item.bp_name,
}
})
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
selectAgent () {
let vm = this
vm.hlsPopup.selectList({
list: vm.agent,
code: 'bp_type',
object: {},
returnItem: function (index, obj) {
vm.detail.bp_id = obj.bp_type
vm.detail.bp_agent_name = obj.bp_type_n
},
})
},
getDetail () {
// let obj = {
// product_plan_id: '29',
// product_num: '1',
// first_pay: '102500',
// division_n: '平地机',
// gps_fee: '500',
// bp_name: '黄冲',
// project_number: 'PJ2019050043',
// bp_agent_name: '上海汉得信息技术股份有限公司 ',
// product_plan_id_n: 'PDJ',
// total_price: '1111111111',
// }
// Object.assign(this.detail, obj)
let vm = this
let url = process.env.basePath + 'con_contract_detial'
let param = {
project_id: this.$route.params.project_id,
}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
Object.assign(vm.detail, res.info)
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
changeHeight () {
let popClient = document.querySelector('.bottom-content')
let bottomPop = document.querySelector('.bottom-pop')
bottomPop.style.height = '100%'
popClient.style.height = '500px'
},
getProductLine () {
let vm = this
let url = process.env.basePath + 'division_query'
let param = {}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.productLine = res.lists.map(item => {
return {
code: item.division,
code_name: item.division_n,
}
})
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
selectProductLine () {
let vm = this
vm.hlsPopup.selectList({
list: vm.productLine,
code: 'bp_type',
object: {},
returnItem: function (index, obj) {
vm.detail.division = obj.bp_type
vm.detail.division_n = obj.bp_type_n
},
})
},
getProductPlan () {
let vm = this
let url = process.env.basePath + 'prd_plan_defintion'
let param = {}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.productPlan = res.lists.map(item => {
return {
code: item.product_plan_id,
code_name: item.product_plan_name,
}
})
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
selectProductPlan () {
let vm = this
vm.hlsPopup.selectList({
list: vm.productPlan,
code: 'bp_type',
object: {},
returnItem: function (index, obj) {
vm.detail.product_plan_id = obj.bp_type
vm.detail.product_plan_name = obj.bp_type_n
},
})
},
hideBox () {
let popClient = document.querySelector('.bottom-content')
let bottomPop = document.querySelector('.bottom-pop')
bottomPop.style.height = '0'
popClient.style.height = '0'
},
},
}
</script>
<style lang="less" scoped>
#addCar {
input::placeholder {
color: #888c8f;
}
.trans-enter-active,
.trans-leave-active {
transition: opacity 0.5s;
}
.trans-enter,
.trans-leave-active {
opacity: 0;
}
.hide {
display: flex;
justify-content: flex-start;
align-items: center;
img {
width: 30px;
height: 30px;
margin-left: 65%;
}
}
.wrap {
padding-top: 92px;
}
.modal-show {
width: 100%;
height: 100%;
position: absolute;
display: flex;
z-index: 900;
background-color: rgba(56, 63, 69, 0.3);
justify-content: center;
align-items: center;
.down {
position: relative;
width: 314px;
height: 586px;
background-size: 301px 24.7px;
background-color: #fff;
}
.top {
width: 100%;
height: 44px;
font-family: PingFangSC-Semibold;
font-size: 16px;
letter-spacing: 0;
text-align: center;
line-height: 44px;
color: #fff;
background: #0041c4;
img {
width: 16px;
height: 16px;
float: right;
margin-top: 13px;
margin-right: 20px;
}
}
.down-content {
margin-top: 8px;
span:first-child {
font-family: PingFangSC-Regular;
font-size: 13px;
color: #656464;
letter-spacing: 0;
margin-left: 15px;
}
.photo {
width: 172px;
height: 120px;
border: 1px solid #dcdcdd;
border-radius: 2px;
margin: 0 auto;
margin-top: 12px;
background: url("../../assets/contractStart/photo.png") 70px no-repeat;
background-size: 24px 20px;
img {
width: 100%;
height: 100%;
}
}
}
button {
width: 240px;
height: 40px;
position: absolute;
color: #fff;
bottom: 16px;
left: 30.5px;
background-color: #0041c4;
border-radius: 4px;
}
}
.userInfo {
height: 45px;
line-height: 45px;
color: #0041c4;
font-size: 15px;
margin-left: 16px;
position: relative;
}
.userInfo::before {
content: "";
display: block;
width: 4px;
height: 20px;
background-color: #0041c4;
position: absolute;
left: -15px;
top: 12px;
}
.equipment:not(:first-child) {
margin-top: 2px;
}
.equipment {
width: 359px;
height: 72px;
background-color: #fff;
margin: 0 auto;
display: flex;
.left {
flex: 1;
span {
display: block;
width: 30px;
height: 30px;
background-color: #e8e9ed;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-top: 8px;
img {
width: 11px;
height: 14px;
}
}
}
.center {
flex: 6;
span:first-child {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #383f45;
letter-spacing: 0.43px;
margin-left: 10px;
margin-top: 12px;
}
.status {
display: inline-block;
width: 46px;
height: 16px;
text-align: center;
line-height: 16px;
font-family: PingFangSC-Medium;
font-size: 12px;
color: #ffffff;
letter-spacing: 0;
background-color: #1d3fff;
margin-left: 21px;
margin-top: 12px;
}
p {
font-family: PingFangSC-Regular;
font-size: 13px;
color: rgba(56, 63, 69, 0.6);
letter-spacing: 0.4px;
margin-left: 10px;
margin-top: 10px;
span {
font-family: Helvetica;
font-size: 13px;
color: rgba(56, 63, 69, 0.6);
}
}
}
.right {
flex: 1;
display: flex;
align-items: center;
img {
width: 13px;
height: 13px;
}
}
}
.approve {
color: #fff;
background-color: #0041c4;
}
.bottom-pop {
width: 100%;
height: 0;
position: absolute;
bottom: 0px;
z-index: 999;
background-color: rgba(56, 63, 69, 0.3);
display: flex;
justify-content: center;
align-items: center;
.bottom-content {
width: 100%;
height: 0px;
transition: 0.3s linear;
border-radius: 20px 20px 0 0;
position: absolute;
bottom: 0px;
background-color: #fff;
overflow-y: scroll;
.box {
width: 359px;
margin: 0 auto;
.fix {
position: fixed;
background-color: #fff;
border-radius: 20px;
z-index: 999;
}
.bottom-top {
width: 100%;
display: flex;
justify-content: flex-start;
padding-bottom: 10px;
border-bottom: 1px solid #d9dbdf;
input {
width: 148px;
height: 36px;
background-color: rgba(239, 239, 239, 0.55);
border-radius: 4px;
text-indent: 14px;
}
input:last-of-type {
margin-left: -5px;
}
img {
width: 15px;
height: 15px;
position: relative;
top: 10px;
left: -26px;
}
span {
display: inline-block;
width: 40px;
height: 36px;
border-radius: 4px;
background: url("../../assets/contractStart/select.png") 10px
no-repeat #1d3fff;
background-size: 16px 16px;
}
}
.bottom-item {
width: 100%;
height: 80px;
background: #f7f7f7;
border-radius: 4px;
margin-top: 10px;
display: flex;
justify-content: flex-start;
.left {
width: 17%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
p {
width: 30px;
height: 30px;
background: #e0e1e5;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 14px;
height: 14px;
}
}
}
.right {
width: 83%;
height: 100%;
ul {
height: 100%;
li {
width: 100%;
height: 50%;
line-height: 36px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #383f45;
.name {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(56, 63, 69, 0.6);
letter-spacing: 0.43px;
}
}
.to-right {
float: right;
margin-right: 36px;
}
li:first-child {
border-bottom: 1px solid #fff;
}
}
}
}
}
}
}
}
</style>