into-list.vue 8.18 KB
Newer Older
786817560's avatar
786817560 committed
1 2 3 4
<!--
 * @Description: 修改部分样式和数据筛选
 * @Author: your name
 * @Date: 2019-09-27 11:23:25
5
 * @LastEditTime: 2019-10-10 10:41:10
786817560's avatar
786817560 committed
6 7
 * @LastEditors: Please set LastEditors
 -->
linxin's avatar
linxin committed
8 9 10 11 12 13 14 15 16
<template>
  <h-view id="sign" class="public-style">
    <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>
    <Tab @getTabNum="getTabNum" />
李晓兵's avatar
李晓兵 committed
17 18
    <div class="hinput">
      <div class="search-box">
linxin's avatar
linxin committed
19
        <input v-model="keyWords" type="text" placeholder="请输入进件号/承租人名称">
李晓兵's avatar
李晓兵 committed
20
        <img src="@/assets/distributorSign/search.png" alt="">
linxin's avatar
linxin committed
21
      </div>
李晓兵's avatar
李晓兵 committed
22
    </div>
786817560's avatar
786817560 committed
23 24
    <h-content v-if="tabNum === 0">
      <div v-for="(item,index) in submitLists" :key="index" class="contract-list" @click="goDetails (item)">
linxin's avatar
linxin committed
25 26 27
        <div class="item">
          <img src="@/assets/distributorSign/icon-进件合同.png" alt="">
          <p class="incoming-num">进件号</p>
linxin's avatar
linxin committed
28
          <p class="code">{{ item.project_number }}</p>
linxin's avatar
linxin committed
29
        </div>
linxin's avatar
linxin committed
30
        <div class="details">
linxin's avatar
linxin committed
31 32
          <div class="option">
            <p class="name">承租人</p>
linxin's avatar
linxin committed
33
            <p class="full-name normal">{{ item.bp_name }}</p>
linxin's avatar
linxin committed
34
          </div>
786817560's avatar
786817560 committed
35
          <div class="option">
786817560's avatar
786817560 committed
36
            <p class="name">合同金额</p>
37
            <p class="normal money">{{ item.total_price|NumFormat }}</p>
786817560's avatar
786817560 committed
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
            <img src="@/assets/distributorSign/goDetails.png" alt="">
          </div>
          <div class="option">
            <p class="name">申请时间</p>
            <p class="normal">{{ item.confirm_start_date|timeFormat }}</p>
          </div>
        </div>
      </div>
    </h-content>

    <h-content v-if="tabNum === 1">
      <div v-for="(item,index) in approvedLists" :key="index" class="contract-list" @click="goDetails (item)">
        <div class="item">
          <img src="@/assets/distributorSign/icon-进件合同.png" alt="">
          <p class="incoming-num">进件号</p>
          <p class="code">{{ item.project_number }}</p>
        </div>
        <div class="details">
          <div class="option">
            <p class="name">承租人</p>
            <p class="full-name normal">{{ item.bp_name }}</p>
          </div>
          <div class="option">
786817560's avatar
786817560 committed
61
            <p class="name">合同金额</p>
62
            <p class="normal money">{{ item.total_price|currency }}</p>
linxin's avatar
linxin committed
63
            <img src="@/assets/distributorSign/goDetails.png" alt="">
linxin's avatar
linxin committed
64 65 66
          </div>
          <div class="option">
            <p class="name">申请时间</p>
linxin's avatar
linxin committed
67
            <p class="normal">{{ item.confirm_start_date|timeFormat }}</p>
linxin's avatar
linxin committed
68 69 70 71 72 73 74
          </div>
        </div>
      </div>
    </h-content>
  </h-view>
</template>
<script>
75
import Tab from '@/pages/intoApproval/intoApproval/into-tab'
linxin's avatar
linxin committed
76 77 78 79 80
export default {
  name: 'ContractList',
  components: {
    Tab,
  },
linxin's avatar
linxin committed
81 82 83 84 85 86
  filters: {
    'timeFormat': function (time) {
      var date = new Date(time)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()
linxin's avatar
linxin committed
87 88 89 90 91 92
      if (m < 10) {
        m = `0${m}`
      }
      if (d < 10) {
        d = `0${d}`
      }
linxin's avatar
linxin committed
93 94 95
      return `${y}-${m}-${d}`
    },
  },
linxin's avatar
linxin committed
96 97 98
  data () {
    return {
      tabNum: 0,
linxin's avatar
linxin committed
99
      keyWords: '',
linxin's avatar
linxin committed
100
      contractMsg: [],
linxin's avatar
linxin committed
101 102 103
      showList: [],
      unConfirm: [],
      confirm: [],
786817560's avatar
786817560 committed
104 105
      submitLists: [],
      approvedLists: [],
linxin's avatar
linxin committed
106 107
    }
  },
linxin's avatar
linxin committed
108 109 110 111 112 113 114 115
  watch: {
    'tabNum': function (newVal, oldVal) {
      if (newVal === 0) {
        this.showList = this.contractMsg
      } else if (newVal === 1) {
        this.showList = this.contractMsg
      }
    },
linxin's avatar
linxin committed
116
    'keyWords': function (newVal, oldVal) {
linxin's avatar
linxin committed
117 118
      let newL = []
      let vm = this
linxin's avatar
linxin committed
119

linxin's avatar
linxin committed
120 121 122 123 124 125 126 127 128 129
      vm.contractMsg.forEach(item => {
        if (item.bp_name.indexOf(newVal) !== -1 || item.project_number.indexOf(newVal) !== -1) {
          newL.push(item)
        }
      })
      if (newVal === '') {
        vm.showList = vm.contractMsg
      } else {
        vm.showList = newL
      }
linxin's avatar
linxin committed
130
    },
linxin's avatar
linxin committed
131
  },
linxin's avatar
linxin committed
132 133 134
  created () {
    this.getList()
  },
linxin's avatar
linxin committed
135
  methods: {
linxin's avatar
linxin committed
136 137 138 139
    getList () {
      let vm = this
      let url = process.env.basePath + 'prj_confirm_list_query'
      let param = {
linxin's avatar
linxin committed
140
        user_phone: window.localStorage.user_phone,
linxin's avatar
linxin committed
141
      }
linxin's avatar
linxin committed
142
      vm.hlsPopup.showLoading('数据加载中,请稍后!')
linxin's avatar
linxin committed
143 144 145
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
786817560's avatar
786817560 committed
146 147 148
          vm.submitLists = res.lists.filter(item => item.confirm_status === 'SUBMIT')
          vm.approvedLists = res.lists.filter(item => item.confirm_status === 'APPROVED')

linxin's avatar
linxin committed
149
          vm.contractMsg = res.lists
linxin's avatar
linxin committed
150
          vm.showList = res.lists
linxin's avatar
linxin committed
151 152 153
        }
      })
    },
linxin's avatar
linxin committed
154 155 156 157 158 159 160 161 162 163 164
    selectUnConfirm () {
      let vm = this
      let list = vm.contractMsg.filter(item => {
        return item.confirm_status === 'SUBMIT'
      })
      vm.unConfirm = list
      let list1 = vm.contractMsg.filter(item => {
        return item.confirm_status === 'APPROVED'
      })
      vm.confirm = list1
    },
linxin's avatar
linxin committed
165 166 167
    getTabNum (i) {
      this.tabNum = i
    },
linxin's avatar
linxin committed
168
    goDetails (item) {
linxin's avatar
linxin committed
169 170 171
      window.localStorage.setItem('confirm_id', item.confirm_id)
      window.localStorage.setItem('bp_class', item.bp_class)
      window.localStorage.setItem('project_id', item.project_id)
linxin's avatar
linxin committed
172 173
      this.$router.push({
        name: 'Base',
174 175
        params: {
          confirm_status: item.confirm_status,
linxin's avatar
linxin committed
176
          hasButtom: true,
177
        },
linxin's avatar
linxin committed
178 179 180 181 182 183 184
      })
    },
  },
}
</script>
<style lang="less" scoped>
#sign {
185 186 187
  .bar-custom{
  background-color: #00469c;
  }
linxin's avatar
linxin committed
188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203
.h-header-btn {
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }
      span {
        font-family: PingFangSC-Semibold;
        margin-left: 16px;
        font-size: 17px;
        letter-spacing: 0.61px;
        line-height: 24px;
      }
}

.hinput {
李晓兵's avatar
李晓兵 committed
204 205
    position: relative;
    z-index: 50;
linxin's avatar
linxin committed
206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229
    width: 100%;
    height: 68px;
    border-bottom:1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3px;
    background: #fff;
    .search-box {
        width: 93.6%;
        height: 36px;
        font-size: 14px;
        color: #B4B4B5;
        letter-spacing: 0;
        font-family: PingFangSC-Regular;
        border: 1px solid rgba(56,63,69,0.60);
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        input {
            width: 90%;height: 100%;
            opacity: 0.4;
李晓兵's avatar
李晓兵 committed
230 231
            border: none;
          line-height: 34px;
linxin's avatar
linxin committed
232 233 234
        }
    }
}
李晓兵's avatar
李晓兵 committed
235 236 237
  .content{
    padding-bottom: 14px;
  }
linxin's avatar
linxin committed
238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269
.contract-list {
    width: 100%;
    height: 120px;
    background: #fff;
    .item {
        width: 100%;
        height: 34px;
        background: rgba(00, 70, 156, 0.1);
        display: flex;
        flex-direction: row;
        align-items: center;
        img {
            margin-left: 16.6px;
        }
        .incoming-num {
            font-family: PingFangSC-Semibold;
            height: 20px;
            font-weight: bolder;
            line-height: 20px;
            font-size: 14px;
            color: #00469C;
            letter-spacing: 0;
            margin-left: 8.8px;
        }
        .code {
            font-family: PingFangSC-Semibold;
            font-size: 14px;
            color: #00469C;
            margin-left: 8px;
            font-weight: bolder
        }
    }
李晓兵's avatar
李晓兵 committed
270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304
  .details {
    width: 100%;
    height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 6px 0;
    .option {
      width: 100%;
      height: 18px;
      display: flex;
      flex-direction: row;
      .name {
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: rgba(56,63,69,0.60);
        width: 80px;
        height: 18px;
        line-height: 18px;
        text-align: right
      }
      .normal {
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: #383F45;
        height: 18px;
        line-height: 18px;
        margin-left: 8px;
      }
      .money {
        color: #FCC800;
      }
      img {
        margin-left: 55%
      }
linxin's avatar
linxin committed
305

李晓兵's avatar
李晓兵 committed
306
    }
786817560's avatar
786817560 committed
307 308 309 310 311 312 313
    .option:nth-of-type(2) {
      position: relative;
          img{
            position: absolute;
            right: 10px;
          }
    }
李晓兵's avatar
李晓兵 committed
314
  }
linxin's avatar
linxin committed
315 316 317
    }
}
</style>