(*) 更换picker组件，自动弹出选择巡检计划

.gitignore

@@ -148,3 +148,4 @@ web/log
 
 # weapp
 project.private.config.json
+miniprogram_npm

weapp/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "xunjian-weapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": ".eslintrc.js",
+  "dependencies": {
+    "tdesign-miniprogram": "^1.0.0-rc.2"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

weapp/package/startInspection/startInspection.js

@@ -17,7 +17,7 @@ Page({
   data: {
     scenePointId: null,
     planList: null,
-    index: null,
+    planListVisible: true,
     dataList: '',
     imgs: [], //上传图片
     imgUrl: getApp().globalData.imgUrl,
@@ -28,11 +28,17 @@ Page({
     address: '', //当前位置
   },
 
-  bindPickerChange: function (e) {
+  onPickerChange(e) {
+    const { key } = e.currentTarget.dataset;
+    const { value } = e.detail;
+
     this.setData({
-      index: e.detail.value
-    })
-    const curPlan = this.data.planList[e.detail.value];
+      [`${key}Visible`]: false,
+      [`${key}Value`]: value,
+      [`${key}Text`]: value.join(' '),
+    });
+
+    const curPlan = this.data.planList[e.detail.columns[0].index];
     let points = curPlan.points.map(e => {
       return e.name
     }).join('、')
@@ -45,6 +51,17 @@ Page({
     this.getPatrolRecord();
   },
 
+  onPickerCancel(e) {
+    const { key } = e.currentTarget.dataset;
+    this.setData({
+      [`${key}Visible`]: false,
+    });
+  },
+
+  onPlanListPicker() {
+    this.setData({ planListVisible: true });
+  },
+
   handleChangeTwo(e) {
     this.setData({
       changeTwo: e.detail.value
@@ -398,14 +415,18 @@ Page({
     const userInfo = wx.getStorageSync('userInfo');
     Request.get(getPatrolPlan(), { userId: userInfo.id }).then(res => {
       wx.hideLoading();
-      const pointPlan = res.rows.filter(plan => {
+      let pointPlan = res.rows.filter(plan => {
         for (const point of plan.points) {
           if (point.id == scenePointId) {
             return true;
           }
         }
         return false;
-      })
+      }).map(p => ({
+        label: p.name,
+        value: p.name,
+        ...p
+      }))
       if (!pointPlan.length) {
         wx.showModal({
           title: '提示',

weapp/package/startInspection/startInspection.json

@@ -2,5 +2,12 @@
   "navigationBarBackgroundColor": "#1979ff",
   "navigationBarTextStyle": "white",
   "navigationBarTitleText": "开始巡检",
-  "enablePullDownRefresh": false
+  "enablePullDownRefresh": false,
+  "component": true,
+  "usingComponents": {
+    "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-picker": "tdesign-miniprogram/picker/picker",
+    "t-picker-item": "tdesign-miniprogram/picker-item/picker-item"
+  }
 }

weapp/package/startInspection/startInspection.wxml

@@ -1,12 +1,10 @@
 <!-- package/startInspection/startInspection.wxml -->
 <view class="box">
-  <view wx:if="{{planList}}">
-    <picker bindchange="bindPickerChange" value="{{index}}" range="{{planList}}" range-key="name">
-      <view class="picker" style="{{index===null ? 'color:red' : 'color:black'}}">
-        {{index===null ? '请选择巡检计划：' : '巡检计划：'}}{{planList[index].name}}
-      </view>
-    </picker>
-    <view class="line"></view>
+  <view class="plan-list" wx:if="{{planList}}">
+    <t-cell class="block" title="选择巡检计划" arrow hover note="{{planListText}}" bind:click="onPlanListPicker" />
+    <t-picker visible="{{planListVisible}}" value="{{planListValue}}" data-key="planList" title="选择巡检计划" cancelBtn="取消" confirmBtn="确认" bindchange="onPickerChange" bindcancel="onPickerCancel">
+      <t-picker-item options="{{planList}}" format></t-picker-item>
+    </t-picker>
   </view>
   <view class="titleFirst">巡检要求</view>
   <view class="txt">

weapp/package/startInspection/startInspection.wxss

@@ -5,8 +5,9 @@
   padding: 30rpx 0;
 }
 
-.picker {
-  margin-bottom: 40rpx;
+.plan-list {
+  margin-bottom: 30rpx;
+
 }
 
 .titleFirst {
@@ -109,4 +110,8 @@
 .upload {
   width: 160rpx;
   height: 160rpx;
+}
+
+.block {
+  display: block;
 }