项目详情和客户编辑接口对接

src/views/GBC/projectDetail.vue

@@ -6,27 +6,40 @@
       <van-tab title="产品列表" name="productList"></van-tab>
     </van-tabs>
     <div v-if="tabActive == 'customerList'">
-      <div style="display: flex;align-items: center;margin-left: 10px;">
+      <div style="display: flex;align-items: center;padding-left: 10px;background: #fff;">
         <div style="width: 30%;">
           <van-dropdown-menu :overlay="dropdownmenuoverlay">
-            <van-dropdown-item v-model="chooseType" :options="chooseTypeOption" />
+            <van-dropdown-item v-model="filterType" :options="filterTypeOption" @change="dropdownMenuChange"/>
           </van-dropdown-menu>
         </div>
-        <van-search v-model="searchvalue" shape="round" background="#f5f5f5" placeholder="搜索客户姓名/部门/科室/服务人员" style="width: 70%;"/>
+        <van-search v-if="filterType == 1 || filterType == 2 || filterType == 3" v-model="searchvalue" shape="round" @search="getGBCappntlist" placeholder="搜索客户姓名/部门/科室/服务人员" style="width: 70%;"/>
+        <div v-if="filterType == 4" style="display: flex;align-items: center;height: 54px;">
+          <div @click="toChooseDate('startDate')" style="background: #f5f5f5;height: 34px;border-radius: 17px;width: 90px;display: flex;align-items: center;padding:0px 10px;">
+            <van-icon name="notes-o" />
+            <span v-if="!startDate" style="font-size: 12px;margin-left: 5px;color: #666;">请选择日期</span>
+            <span v-if="startDate" style="font-size: 12px;margin-left: 5px;color: #333;">{{startDate}}</span>
+          </div>
+          <span style="margin: 0px 5px;font-size: 14px;">至</span>
+          <div @click="toChooseDate('endDate')" style="background: #f5f5f5;height: 34px;border-radius: 17px;width: 90px;display: flex;align-items: center;padding: 0px 10px;">
+            <van-icon name="notes-o" />
+            <span v-if="!endDate" style="font-size: 12px;margin-left: 5px;color: #666;">请选择日期</span>
+            <span v-if="endDate" style="font-size: 12px;margin-left: 5px;color: #333;">{{endDate}}</span>
+          </div>
+        </div>
       </div>
       <div style="padding: 0px 10px 10px;">
-        <div v-for="item in customerList">
+        <div v-for="(item,index) in customerList" :key="index">
           <div style="padding: 20px 20px 10px;border-radius: 5px;background: #fff;margin-top: 20px;">
             <div style="display: flex;font-size: 14px;line-height: 30px;border-bottom: 1px solid #eee;padding-bottom: 10px;">
-              <div style="width: 55%;overflow: hidden;">
-                <p>客户姓名：{{item.name}}</p>
-                <p>手机号码：{{item.phone}}</p>
-                <p>服务组长：{{item.leader}}</p>
+              <div style="width: 55%;overflow: hidden;white-space: nowrap;">
+                <p>客户姓名：{{item.appntName}}</p>
+                <p>手机号码：{{item.mobile}}</p>
+                <p>服务组长：{{item.teamLeader}}</p>
               </div>
-              <div style="width: 45%;overflow: hidden;">
-                <p>部门/科室：{{item.department}}</p>
-                <p>承包保单：{{item.policyNums}}</p>
-                <p>服务组员：{{item.serviceName}}</p>
+              <div style="width: 45%;overflow: hidden;white-space: nowrap;">
+                <p>部门/科室：{{item.departmentName}}</p>
+                <p>承包保单：{{item.contSize}}份</p>
+                <p>服务组员：{{item.teamMember}}</p>
               </div>
             </div>
             <div style="display: flex;justify-content: flex-end;margin-top: 10px;">
@@ -117,12 +130,17 @@
         </div>
       </div>
     </div>
+
+    <van-popup v-model="showDataPicker" position="bottom">
+      <van-datetime-picker type="date" v-model="currentDate" @confirm="onConfirmDate" @cancel="cancelDate" :max-date="maxDate" :min-date="minDate" />
+    </van-popup>
   </div>
 </template>
 
 <script>
 import { Tab, Tabs, Search, DropdownMenu, DropdownItem, Circle } from 'vant'
 import { getList } from '@/api/ebiz/product/product.js'
+import { getGBCappntlist } from '@/api/GBC/GBC.js'
 export default {
   components: {
     [Tab.name]: Tab,
@@ -136,57 +154,22 @@ export default {
     return {
       tabActive:1,
       searchvalue:'',
-      chooseType: 0,
-      chooseTypeOption: [
-        { text: '请选择', value: 0 },
+      filterType: 1,
+      startDate:'',
+      endDate:'',
+      showDataPicker:false,
+      minDate: new Date(2000, 0, 1),
+      maxDate: new Date(2050, 11, 31),
+      currentDate:new Date(),
+      datePickerType:'',
+      filterTypeOption: [
         { text: '按客户', value: 1 },
         { text: '按科室', value: 2 },
         { text: '按小组', value: 3 },
         { text: '按日期', value: 4 },
       ],
       dropdownmenuoverlay:false,
-      customerList:[
-        {
-          name:'赵燕燕',
-          department:'财务部',
-          phone:'15825826959',
-          policyNums:'10份',
-          leader:'李斯',
-          serviceName:'刘艺'
-        },
-        {
-          name:'赵燕燕',
-          department:'财务部',
-          phone:'15825826959',
-          policyNums:'10份',
-          leader:'李斯',
-          serviceName:'刘艺'
-        },
-        {
-          name:'赵燕燕',
-          department:'财务部',
-          phone:'15825826959',
-          policyNums:'10份',
-          leader:'李斯',
-          serviceName:'刘艺'
-        },
-        {
-          name:'赵燕燕',
-          department:'财务部',
-          phone:'15825826959',
-          policyNums:'10份',
-          leader:'李斯',
-          serviceName:'刘艺'
-        },
-        {
-          name:'赵燕燕',
-          department:'财务部',
-          phone:'15825826959',
-          policyNums:'10份',
-          leader:'李斯',
-          serviceName:'刘艺'
-        },
-      ],
+      customerList:[],
       currentRate: 0,
       colorList:['#E9332E','#CB9BFF','#54C6FA','#FF9B39','#60D64D','#4045F3','#FF59D9','#E8C0A2','#FCD338','#7584A2'],
       dataList1:[
@@ -223,14 +206,92 @@ export default {
 
   },
   mounted(){
+    this.getGBCappntlist()
     this.getProductList()
   },
   methods: {
+    dropdownMenuChange(value){
+      this.filterType = value
+      this.searchvalue = ''
+      this.startDate = ''
+      this.endDate = ''
+      if(value == 1 || value == 2 || value == 3) {
+        this.getGBCappntlist()
+      }
+    },
+    getGBCappntlist(){
+      let params = {
+        "projectCode": this.$route.query.projectCode,
+        "filterType": this.filterType,
+        "appntName": "",
+        "departmentName": "",
+        "teamMemberName": "",
+        "startDate": "",
+        "endDate": ""
+      }
+      if(this.filterType == 1){
+        params.appntName = this.searchvalue
+      }
+      if(this.filterType == 2){
+        params.departmentName = this.searchvalue
+      }
+      if(this.filterType == 3){
+        params.teamMemberName = this.searchvalue
+      }
+      if(this.filterType == 4) {
+        params.startDate = this.startDate
+        params.endDate = this.endDate
+      }
+      getGBCappntlist(params).then(res=>{
+        if(res.result == '0') {
+          this.customerList = []
+          if(res.content && res.content.length != 0) {
+            this.customerList = res.content
+          }
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    toChooseDate(type){
+      this.datePickerType = type
+      if(type == 'startDate') {
+        this.showDataPicker = true
+      }
+      if(type == 'endDate') {
+        this.showDataPicker = true
+      }
+    },
+    onConfirmDate(date){
+      if(this.datePickerType == 'startDate') {
+        let year = date.getFullYear()
+        let month = String(date.getMonth() + 1).padStart(2, '0');
+        let day = String(date.getDate()).padStart(2, '0');
+        this.startDate = year + '-' + month + '-' + day;
+        if(this.endDate) {
+          this.getGBCappntlist()
+        }
+      }
+      if(this.datePickerType == 'endDate') {
+        let year = date.getFullYear()
+        let month = String(date.getMonth() + 1).padStart(2, '0');
+        let day = String(date.getDate()).padStart(2, '0');
+        this.endDate = year + '-' + month + '-' + day;
+        if(this.startDate) {
+          this.getGBCappntlist()
+        }
+      }
+      this.showDataPicker = false
+    },
+    cancelDate(){
+      this.showDataPicker = false
+    },
     goCustomerDetail(data){
       this.$router.push({
         path:'/GBC/customerDetail',
         query:{
-          serviceName:data.serviceName
+          projectCode:this.$route.query.projectCode,
+          appntId:data.appntId
         },
       })
     },
@@ -262,6 +323,13 @@ export default {
       })
     },
   },
+  // watch: {
+  //   isShowOthenSalarySource(nVal) {
+  //     if (!nVal) {
+  //       this.userInfo.otherSalarySource = ''
+  //     }
+  //   },
+  // },
   computed: {
     text() {
       return this.currentRate.toFixed(0) + '%';
@@ -296,4 +364,16 @@ export default {
     border-radius: 3px;
     margin-right: 3px;
   }
+  /deep/ .van-hairline--top-bottom::after{
+    border: none;
+  }
+  /deep/ .van-dropdown-menu{
+    background: #fff;
+  }
+  /deep/ .van-search__content{
+    background: #f5f5f5;
+  }
+  /deep/ [data-v-3f765cce] .van-dropdown-item__content{
+    box-shadow: 0px 0px 5px 5px #f5f5f5;
+  }
 </style>