#
whycq
2023-10-10 155f2b80f2a9b6f900c73f6e4461e9cebb7cd028
pages/business/plan/planDetails.vue
@@ -1,8 +1,383 @@
<template>
   <view>
      <scroll-view scroll-y="true" >
         <view class="header">
            <view class="detl-name">
               <image src="../../../static/image/dingdanguanli.png" mode="aspectFit"></image>
               <view>{{detl.name}}</view>
            </view>
            <view class="detl-tel">{{detl.createBy$}} | {{detl.orderId$}} | {{detl.cstmrId$}}</view>
         </view>
         <!-- 步骤条 -->
         <view style="background-color: #FFF;margin-top: 10px;padding-top: 20px;padding-bottom: 20px;">
            <uni-steps :options="list1" :active="active" />
         </view>
         <!-- 基本信息 -->
         <view class="container">
            <view><y-title title="基本信息"></y-title></view><view></view>
            <view class="list-item1">规划单号</view><view class="list-item2">{{detl.uuid}}</view>
            <view class="list-item1">申请日期</view><view class="list-item2">{{detl.appleTime$}}</view>
            <view class="list-item1">跟踪项目</view><view class="list-item2">{{detl.orderId$}}</view>
            <view class="list-item1">客户名称</view><view class="list-item2">{{detl.cstmrId$}}</view>
            <view class="list-item1">业务员</view><view class="list-item2">{{detl.userId$}}</view>
            <view class="list-item1">审批状态</view><view class="list-item2">{{detl.settle$}}</view>
            <view class="list-item1">业务类型</view><view class="list-item2">{{detl.planType$}}</view>
         </view>
         <!-- 其他信息 -->
         <view class="container">
            <view><y-title title="其他信息"></y-title></view><view></view>
         </view>
         <view class="detail-box">
            <plan-detail :info="info"></plan-detail>
         </view>
         <!-- 售前规划 -->
         <view class="container">
            <view><y-title title="售前规划"></y-title></view><view></view>
            <view class="list-item1">规划员</view><view class="list-item2">{{detl.uuid}}</view>
            <view class="list-item1">完成时间</view><view class="list-item2">{{detl.finishTime$}}</view>
            <view class="list-item1">更改方案</view><view class="list-item2">{{detl.change}}</view>
            <view class="list-item1">更改次数</view><view class="list-item2">{{detl.changeTime}}</view>
            <view class="list-item1">更改原因</view><view class="list-item2">{{detl.changeReason}}</view>
            <view class="list-item1">规格奖金</view><view class="list-item2">{{detl.planBonus}}</view>
            <view class="list-item1">组长奖金</view><view class="list-item2">{{detl.planLeaderBonus}}</view>
         </view>
         <!-- 系统信息 -->
         <view class="container">
            <view><y-title title="系统信息"></y-title></view><view></view>
            <view class="list-item1">添加人员</view><view class="list-item2">{{detl.createBy$}}</view>
            <view class="list-item1">添加时间</view><view class="list-item2">{{detl.createTime$}}</view>
            <view class="list-item1">修改人员</view><view class="list-item2">{{detl.updateBy$}}</view>
            <view class="list-item1">修改时间</view><view class="list-item2">{{detl.updateTime$}}</view>
         </view>
      </scroll-view>
      <view>
         <!-- 输入框示例 -->
         <uni-popup ref="inputDialog" type="dialog">
            <uni-popup-dialog ref="inputClose" mode="input" title="添加跟进人" value="对话框预置提示内容!"
               placeholder="请输入内容" @confirm="confirm">
                  <uni-combox :candidates="addFollower.followers" placeholder="请选择"
                  v-model="addFollower.follower" @input="autoLoad('follower',addFollower.follower)"></uni-combox>
            </uni-popup-dialog>
         </uni-popup>
      </view>
   </view>
</template>
<script>
   export default {
      data() {
         return {
            id: 0,
            detl: {
               id: '',
               name: '',
               tel: '',
               addr: '',
               cstman: ''
            },
            addFollower: {
               follower: '',
               followers: '',
               followerList: []
            },
            followers: [],
            cstmrId: '',
            active: 0,
            list1: [{
               title: '开始',
               desc: ''
            }, {
               title: '组长审核',
               desc: ''
            }, {
               title: '售前审核',
               desc: ''
            }, {
               title: '规划员审核',
               desc: ''
            },{
               title: '审核通过',
               desc: ''
            }],
            info: []
         }
      },
      onLoad(option) {
         this.id = option.id
         this.init()
         this.autoLoad('follower','')
         setTimeout(()=>{
            // this.getFollowers()
         },500)
      },
      methods: {
         init() {
            let that = this
            that.info = []
            uni.request({
               url: that.baseUrl + '/plan/' + that.id +'/auth',
               header: {'token' : uni.getStorageSync('token')},
               method: 'GET',
               success(res) {
                  console.log(res);
                  res = res.data
                  that.detl = res.data
                  that.active = res.data.settle
                  if (res.data.planType == 4) {
                     that.info.push(
                     {name:'货物规格',val:res.data.input_1},
                     {name:'货物重量',val:res.data.input_2},
                     {name:'仓库温度',val:res.data.input_6},
                     {name:'顶部最低点离地距离',val:res.data.input_8},
                     {name:'进叉方向',val:res.data.input_4},
                     {name:'厂房可用高度',val:res.data.input_5},
                     {name:'通道大小有无要求',val:res.data.input_7},
                     {name:'平库货架类型',val:res.data.select_2},
                     {name:'是否需要跨梁',val:res.data.radio_1 == 'value1' ? '是' : '否'},
                     {name:'是否需要网层板',val:res.data.radio_2 == 'value1' ? '是' : '否'},
                     {name:'是否需要层板',val:res.data.radio_8 == 'value1' ? '是' : '否'},
                     {name:'地面有无电缆沟',val:res.data.radio_3 == 'value1' ? '是' : '否'},
                     {name:'地面平整度和地面沉降是否满足标准',val:res.data.radio_5 == 'value1' ? '是' : '否'},
                     {name:'布局区域是否提供CAD场地图纸/场地',val:res.data.radio_7 == 'value1' ? '是' : '否'},
                     {name:'其他要求及注意点',val:res.data.textarea_2 ? res.data.textarea_2 : '--'},
                     )
                  } else if(res.data.planType == 5) {
                     that.info.push(
                     {name:'货物规格',val:res.data.input_2},
                     {name:'货物重量',val:res.data.input_5},
                     {name:'厂房可用高度',val:res.data.input_4},
                     {name:'顶部最低点离地距离',val:res.data.input_9},
                     {name:'进叉方向',val:res.data.input_3},
                     {name:'仓库温度',val:res.data.input_7},
                     {name:'抗震设防烈度',val:res.data.input_6},
                     {name:'基本地震加速度',val:res.data.input_11},
                     {name:'客户技术对接联系方式(选填)',val:res.data.input_8},
                     {name:'立体库货架类型',val:res.data.select_3},
                     {name:'是否有消防要求',val:res.data.radio_5 == 'value1' ? '是' : '否'},
                     {name:'否需要货架背网',val:res.data.radio_8 == 'value1' ? '是' : '否'},
                     {name:'地面有无电缆沟',val:res.data.radio_7 == 'value1' ? '是' : '否'},
                     {name:'布局区域是否提供CAD场地图纸/场地',val:res.data.radio_6 == 'value1' ? '是' : '否'},
                     {name:'地面平整度和地面沉降是否满足标准',val:res.data.radio_10 == 'value1' ? '是' : '否'},
                     {name:'其他要求及注意点',val:res.data.textarea_2 ? res.data.textarea_2 : '--'},
                     )
                  }
                  // that.cstmrId = that.cstmr.id
               }
            })
         },
         del(e) {
            let that = this
            e = Number(e)
            uni.request({
               url: that.baseUrl + '/detl/delete/one/' + e,
               header: {'token' : uni.getStorageSync('token'),
               },
               method: 'GET',
               success(res) {
                  console.log(res);
                  res = res.data
                  if (res.code === 200) {
                     uni.navigateBack()
                  } else if (res.code === 403) {
                     uni.showToast({title: res.msg, icon: "none", position: 'top'})
                     setTimeout(() => {
                        uni.reLaunch({
                           url: '../../login/login'
                        });
                     }, 1000);
                  } else {
                     uni.showToast({title: res.msg, icon: "none",position: 'top'})
                  }
               }
            })
         },
         addPerson() {
            this.$refs.inputDialog.open()
         },
         // 确认选择工作人
         confirm() {
            let that = this
            var followerId
            var followerList = that.addFollower.followerList
            for (var i = 0;i < followerList.length; i++) {
               if (followerList[i].name == this.addFollower.follower) {
                  followerId =followerList[i].value
               }
            }
            uni.request({
               url: that.baseUrl + '/detl/followers/add/json',
               header:{'token':uni.getStorageSync('token'),
                  // 'content-type':'application/x-www-form-urlencoded',
                  },
               data: {
                  cstmrId: that.cstmrId,
                  followerIds:followerId},
               method: 'POST',
               success(result) {
                  var res = result.data
                  that.getFollowers()
               }
            })
            this.addFollower.follower = ''
         },
         // 工作人列表
         autoLoad(type,condition) {
            let that = this
            that.addFollower.followers = []
            that.addFollower.followerList = []
            uni.request({
               url: that.baseUrl + '/user/all/get/kv',
               header:{'token':uni.getStorageSync('token')},
               data: {condition:condition},
               method: 'POST',
               success(result) {
                  var res = result.data
                  if (res.code === 200) {
                     var element;
                     if (type == 'follower') {
                        for(element of res.data) {
                           that.addFollower.followers.push(element.name)
                           that.addFollower.followerList.push(element)
                        }
                        return
                     }
                  }
               }
            })
         },
         getFollowers() {
            let that = this
            uni.request({
               url: that.baseUrl + '/detl/followers/table/auth',
               header:{'token':uni.getStorageSync('token')},
               data: {cstmrId:that.cstmrId},
               method:'GET',
               success(res) {
                  res = res.data
                  that.followers = res.data
               }
            })
         },
         removeFollowers(userId) {
            let that = this
            uni.request({
               url: that.baseUrl + '/cstmr/followers/remove/auth',
               header:{
                  'token':uni.getStorageSync('token'),
                  'content-type': 'application/x-www-form-urlencoded'
               },
               data: {
                  cstmrId:that.cstmrId,
                  userId: userId
                  },
               method:'POST',
               success(res) {
                  res = res.data
                  that.getFollowers()
               }
            })
         }
      }
   }
</script>
<style>
   .header {
      width: auto;
      min-height: 110rpx;
      background-color: #fff;
      padding: 30px 20px 10px 20px;
   }
   .detl-name {
      display: flex;
      height: 35rpx;
      line-height: 35rpx;
      text-indent: 10rpx;
      font-size: 36rpx;
      color: #606266;
   }
   .detl-name image {
      width: 35rpx;
      height: 35rpx;
   }
   .detl-tel {
      min-height: 60rpx;
      line-height: 60rpx;
      font-size: 24rpx;
      color: #303133;
   }
   .container {
      margin-top: 10px;
      padding: 10rpx 20rpx 0 20rpx;
      background-color: #fff;
      display: grid;
      grid-template-columns: 1fr 3fr;
   }
   .container:last-child {
      /* grid-template-columns: 5fr 5fr 2fr; */
      margin-bottom: 120rpx;
   }
   .list-item1 {
      min-height: 45rpx;
      line-height: 45rpx;
      color: #909399;
      text-indent: 30rpx;
   }
   .list-item2 {
      min-height: 45rpx;
      line-height: 45rpx;
      color: black;
   }
   .color-main {
      color: #55aaff
   }
   .foot {
      position: fixed;
      width: 100%;
      min-height: 100rpx;
      bottom: 0;
      margin-bottom: 0;
      background-color: #fff;
      border-top: 1px solid #efefef;
      display: flex;
      align-items: center;
   }
   .list {
      min-height: 60rpx;
      margin-top: 20rpx;
      grid-column: 1 / 10;
      display: grid;
      grid-template-columns: 1fr 1fr;
      position: relative;
   }
   .list-left {
      min-height: 60rpx;
      line-height: 60rpx;
      padding-left: 20rpx;
      color: #55aaff
   }
   .list-right {
      min-height: 60rpx;
      line-height: 60rpx;
      /* background-color: #222; */
      padding-right: 30rpx;
   }
   .list-none {
      min-height: 60rpx;
      margin-top: 20rpx;
      text-align: center;
      /* background-color: #303133; */
      color: #b1b3b8;
      grid-column: 1 / 10;
      display: grid;
      position: relative;
   }
   .detail-box {
      background-color: #fff;
   }
</style>