add-car.vue

<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>&ensp; &ensp; 挖掘机
                    <span class="to-right">
                      <span class="name">产品种类</span>&ensp; &ensp; *****
                    </span>
                  </li>
                  <li>
                    <span class="name">参数项</span>&ensp; &ensp; GTZ226
                    <span class="to-right">
                      <span class="name">产品名称</span>&ensp; &ensp; *****
                    </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>