gx

queenwuli

2021-01-11 7113b4f2dd47a313c6fbc85c21f4756da42b212a

 hive-app/pages/workbench/followRecords/filter.vue

@@ -5,19 +5,21 @@
         <view class="popup-content">
            <view class="filter-content-time">
               <text>开始时间</text>
               <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
                  <view class="gray flex align-center">
                     <text>请选择</text>
                     <text class="iconfont iconarrow-backimg"></text>
               <picker mode="date" @change="bindStartTimeChange" :end="endDate">
                  <view class=" flex align-center">
                     <text v-if="startTime">{{startTime}}</text>
                     <text v-else class="gray">请选择</text>
                     <text class="iconfont iconarrow-backimg gray"></text>
                  </view>
               </picker>
            </view>
            <view class="filter-content-time">
               <text>结束时间</text>
               <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
                  <view class="gray flex align-center">
                     <text>请选择</text>
                     <text class="iconfont iconarrow-backimg"></text>
               <picker mode="date" @change="bindEndTimeChange" :start="startTime" :end="endDate">
                  <view class="flex align-center">
                     <text v-if="endTime">{{endTime}}</text>
                     <text v-else class="gray">请选择</text>
                     <text class="iconfont iconarrow-backimg gray"></text>
                  </view>
               </picker>
            </view>
@@ -26,9 +28,13 @@
                  <text>客户</text>
               </view>
               <view class="img-box">
                  <image class="header-img mr-20" src="../../../static/images/default-avatar.png"></image>
                  <navigator url="../../member/selectCustomer" hover-class="none">
                     <text class="iconfont iconjia gray-outline-btn-circle ml-5"></text>
                  <view v-for="item in vipList" class="flex align-center flex-v mr-10">
                     <image v-if="item.photo" class="header-img" :src="item.photo"></image>
                     <text v-else class="first-name">{{item.vipName | formatName}}</text>
                     <text class="font-12 gray ellipsis">{{item.vipName || '-'}}</text>
                  </view>
                  <navigator :url="'../../member/selectCustomer?multiSelect=true&selectId='+vipIds" hover-class="none">
                     <text class="iconfont iconjia gray-outline-btn-circle ml-5" :class="vipList.length?'mb-20':''"></text>
                  </navigator>
               </view>
            </view>
@@ -37,16 +43,20 @@
                  <text>员工</text>
               </view>
               <view class="img-box">
                  <image class="header-img mr-20" src="../../../static/images/default-avatar.png"></image>
                  <navigator url="../../manager/selectEmployee" hover-class="none">
                     <text class="iconfont iconjia gray-outline-btn-circle ml-5"></text>
                  <view v-for="item in staffList" class="flex align-center flex-v mr-10">
                     <image v-if="item.photo" class="header-img" :src="item.photo"></image>
                     <text v-else class="first-name">{{item.name | formatName}}</text>
                     <text class="font-12 gray ellipsis">{{item.name || '-'}}</text>
                  </view>
                  <navigator :url="'../../manager/selectEmployee?multiSelect=true&selectId='+staffIds" hover-class="none">
                     <text class="iconfont iconjia gray-outline-btn-circle ml-5" :class="staffList.length?'mb-20':''"></text>
                  </navigator>
               </view>
            </view>
         </view>
         <view class="btn-group">
            <button class="white-btn flex-1">重置</button>
            <button class="blue-btn flex-1 ml-10">确定</button>
            <button class="white-btn flex-1" @click="_reset()">重置</button>
            <button class="blue-btn flex-1 ml-10" @click="_confirm()">确定</button>
         </view>
      </view>
   </uni-popup>
@@ -60,14 +70,22 @@
         uniPopup,
         DateTimePicker
      },
      data() {
         return{
            windowHeight: "200px",
         }
      },
      props:{
         isShow: {
            default: false
         },
         staffList: {
            default: []
         },
         vipList: {
            default:[]
         }
      },
      data() {
         return{
            windowHeight: "200px",
            startTime: '',
            endTime: ''
         }
      },
      watch:{
@@ -79,15 +97,60 @@
            }
         }
      },
      computed:{
         vipIds(){
            let idArr = this.vipList.map((item) => {
               return item.id;
            });
            return idArr.join(',')
         },
         staffIds(){
            let idArr = this.staffList.map((item) => {
               return item.id;
            });
            return idArr.join(',')
         }
      },
      created() {
         this.endDate = this.$utils.formmatTime('YY-mm-dd')
      },
      mounted() {
         uni.getSystemInfo({
             success: (res) => {
                 this.windowHeight = res.windowHeight+"px";
         } })
         }})
      },
      methods:{
         showTime () {
            this.$refs['date-time'].show();
         bindStartTimeChange(e){
            this.startTime = e.detail.value;
            if(this.$utils.compareData(this.startTime, this.endTime)){
               this.endTime = '';
            }
         },
         bindEndTimeChange(e){
            this.endTime = e.detail.value;
         },
         _reset(){
            this.startTime = '';
            this.endTime = '';
            this.$emit('reset')
            this.$refs.popup.close()
         },
         _confirm(){
            this.$refs.popup.close();
            this.$emit('change', {
               startTime: this.startTime,
               endTime: this.endTime
            })
         }
      },
      filters:{
         formatName(val){
            if(!val){
               return '无'
            }
            val = val.trim();
            return val.substr(0, 1)
         }
      }
   }
@@ -107,21 +170,43 @@
      justify-content: space-between;
      border-bottom: 1px solid #EDEAF4;
      padding: 10px 0;
      font-size: 14px;
   }
   .filter-content-row{
      padding: 10px 0;
      font-size: 14px;
      border-bottom: 1px solid #EDEAF4;
   }
   .img-box{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 0 10px;
      margin-top: 10px;
   }
   .header-img{
      width: 45px;
      height: 45px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      margin-bottom: 5px;
   }
   .first-name{
      display: inline-block;
      width: 42px;
      height: 42px;
      line-height: 42px;
      margin-bottom: 5px;
      border-radius: 50%;
      text-align: center;
      background: #518EFF;
      color: #FFFFFF;
      font-size: 16px;
   }
   .ellipsis{
      max-width: 40px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      margin-bottom: 6px;
   }
   .btn-group{
      display: flex;