Browse Source

picker优化

seimin 3 years ago
parent
commit
e4effc11a0
3 changed files with 69 additions and 24 deletions
  1. 4 0
      components/seiminPicker/seiminPicker.vue
  2. 2 0
      pages/index/index.vue
  3. 63 24
      pages/orderList/orderList.vue

+ 4 - 0
components/seiminPicker/seiminPicker.vue

@@ -80,6 +80,10 @@
80
         let checkedObj = this.pickerList[this.pickerValue]
80
         let checkedObj = this.pickerList[this.pickerValue]
81
         this.$emit('onConfirm', checkedObj)
81
         this.$emit('onConfirm', checkedObj)
82
       },
82
       },
83
+      // 选择初始选项
84
+      _changeValue(index){
85
+        this.pickerValue = [index];
86
+      },
83
       //滑动picker
87
       //滑动picker
84
       changePicker(e) {
88
       changePicker(e) {
85
         this.pickerValue = e.detail.value
89
         this.pickerValue = e.detail.value

+ 2 - 0
pages/index/index.vue

@@ -458,6 +458,8 @@
458
       //打开
458
       //打开
459
       openPicker() {
459
       openPicker() {
460
         this.$refs.sPicker._open();
460
         this.$refs.sPicker._open();
461
+        let index = this.hospitalList.findIndex(v => v.value == this.loginInfo.user.currentHospital.id);
462
+        this.$refs.sPicker._changeValue(index);
461
       },
463
       },
462
       //确定:接收子组件传来的参数
464
       //确定:接收子组件传来的参数
463
       confirmPicker(checkedObj) {
465
       confirmPicker(checkedObj) {

+ 63 - 24
pages/orderList/orderList.vue

@@ -3,11 +3,11 @@
3
     <!-- 头部筛选 -->
3
     <!-- 头部筛选 -->
4
     <view class="orderList_header">
4
     <view class="orderList_header">
5
       <view class="orderList_header_item" @click="openPicker('gdState')">
5
       <view class="orderList_header_item" @click="openPicker('gdState')">
6
-        <text class="orderList_header_itemText">全部</text>
6
+        <text class="orderList_header_itemText">{{selectedGdState}}</text>
7
         <text class="pda pda-xiala"></text>
7
         <text class="pda pda-xiala"></text>
8
       </view>
8
       </view>
9
-      <view class="orderList_header_item">
10
-        <text class="orderList_header_itemText" @click="openPicker('associationType')">全部</text>
9
+      <view class="orderList_header_item" @click="openPicker('associationType')">
10
+        <text class="orderList_header_itemText">{{selectedAssociationType}}</text>
11
         <text class="pda pda-xiala"></text>
11
         <text class="pda pda-xiala"></text>
12
       </view>
12
       </view>
13
     </view>
13
     </view>
@@ -80,6 +80,8 @@
80
     name: 'orderList',
80
     name: 'orderList',
81
     data() {
81
     data() {
82
       return {
82
       return {
83
+        selectedGdState: '执行中',
84
+        selectedAssociationType: '全部',
83
         gdStates: [{
85
         gdStates: [{
84
             value: -1,
86
             value: -1,
85
             label: '全部'
87
             label: '全部'
@@ -93,12 +95,16 @@
93
             label: '待评价'
95
             label: '待评价'
94
           },
96
           },
95
         ], //工单状态筛选列表
97
         ], //工单状态筛选列表
96
-        associationTypes: [], //关联类型筛选列表
98
+        associationTypes: [{
99
+          value: -1,
100
+          label: '全部'
101
+        }, ], //关联类型筛选列表
97
         newOrderList: [], //工单列表
102
         newOrderList: [], //工单列表
98
         totalNum: 0, //工单总数量
103
         totalNum: 0, //工单总数量
99
         idx: 0, //页码
104
         idx: 0, //页码
100
         pageNum: 20, //每页的工单数量
105
         pageNum: 20, //每页的工单数量
101
         pickerList: [], //picker列表
106
         pickerList: [], //picker列表
107
+        type: '',
102
       };
108
       };
103
     },
109
     },
104
     computed: {
110
     computed: {
@@ -106,34 +112,42 @@
106
     },
112
     },
107
     methods: {
113
     methods: {
108
       ...mapActions("dictionary", ["vxDictionary"]),
114
       ...mapActions("dictionary", ["vxDictionary"]),
109
-      // 获取数据字典
110
-      getDictionary(key) {
111
-        let postData = {
112
-          "type": "list",
113
-          key
114
-        };
115
-        this.vxDictionary(postData).then(res => {
116
-          console.log(res);
117
-        })
118
-      },
119
       //关闭
115
       //关闭
120
       closePicker() {
116
       closePicker() {
121
         this.$refs.sPicker._close();
117
         this.$refs.sPicker._close();
122
       },
118
       },
123
       //打开
119
       //打开
124
-      openPicker() {
120
+      openPicker(type) {
121
+        this.type = type;
125
         this.$refs.sPicker._open();
122
         this.$refs.sPicker._open();
123
+        if (type === 'gdState') {
124
+          //工单状态
125
+          this.pickerList = this.gdStates;
126
+          let index = this.pickerList.findIndex(v => v.label === this.selectedGdState);
127
+          let obj = this.pickerList.find(v => v.label === this.selectedGdState);
128
+          this.$refs.sPicker._changeValue(index);
129
+          this.selectedGdState = obj && obj.label;
130
+        } else if (type === 'associationType') {
131
+          //关联类型
132
+          this.pickerList = this.associationTypes;
133
+          let index = this.pickerList.findIndex(v => v.label === this.selectedAssociationType);
134
+          let obj = this.pickerList.find(v => v.label === this.selectedAssociationType);
135
+          this.$refs.sPicker._changeValue(index);
136
+          this.selectedAssociationType = obj && obj.label;
137
+        }
126
       },
138
       },
127
       //确定:接收子组件传来的参数
139
       //确定:接收子组件传来的参数
128
       confirmPicker(checkedObj) {
140
       confirmPicker(checkedObj) {
129
-        // this.changeSearchDeptParams({
130
-        //   backUrl: "/pages/index/index", //返回的url
131
-        //   type: "changeDept_index", //首页切换科室
132
-        //   hospital: checkedObj, //先选择院区
133
-        // });
134
-        // uni.navigateTo({
135
-        //   url: "/pages/searchDept/searchDept",
136
-        // });
141
+        if (this.type === 'gdState') {
142
+          //工单状态
143
+          this.selectedGdState = checkedObj.label;
144
+        } else if (this.type === 'associationType') {
145
+          //关联类型
146
+          this.selectedAssociationType = checkedObj.label;
147
+        }
148
+        let index = this.pickerList.findIndex(v => v.label === checkedObj.label);
149
+        this.$refs.sPicker._changeValue(index);
150
+        this.init();
137
       },
151
       },
138
       // 获取页面数据
152
       // 获取页面数据
139
       init() {
153
       init() {
@@ -143,10 +157,12 @@
143
         });
157
         });
144
         Promise.all([
158
         Promise.all([
145
           this.queryWorkOrdersRequest(), //查询最新工单列表
159
           this.queryWorkOrdersRequest(), //查询最新工单列表
160
+          this.queryDictionary('association_types'), //获取数据字典
146
         ]).then((values) => {
161
         ]).then((values) => {
147
           uni.hideLoading();
162
           uni.hideLoading();
148
           uni.stopPullDownRefresh();
163
           uni.stopPullDownRefresh();
149
           this.queryWorkOrdersResponse(values[0]);
164
           this.queryWorkOrdersResponse(values[0]);
165
+          this.queryDictionaryResponse(values[1], 'association_types');
150
         });
166
         });
151
       },
167
       },
152
       // 查询最新工单列表(上拉)
168
       // 查询最新工单列表(上拉)
@@ -226,9 +242,32 @@
226
           throw new Error(res.msg || '获取数据失败');
242
           throw new Error(res.msg || '获取数据失败');
227
         }
243
         }
228
       },
244
       },
245
+      // 获取数据字典
246
+      queryDictionary(key) {
247
+        let postData = {
248
+          "type": "list",
249
+          key
250
+        };
251
+        return this.vxDictionary(postData);
252
+      },
253
+      // 获取数据字典
254
+      queryDictionaryResponse(res, type) {
255
+        console.log(res, type);
256
+        switch (type) {
257
+          case 'association_types':
258
+            let arr = res.map(v => ({
259
+              value: v.id,
260
+              label: v.name
261
+            }));
262
+            this.associationTypes = [{
263
+              label: '全部',
264
+              value: -1
265
+            }, ...arr];
266
+            break;
267
+        }
268
+      },
229
     },
269
     },
230
     mounted() {
270
     mounted() {
231
-      this.getDictionary('association_types');
232
       this.init();
271
       this.init();
233
     },
272
     },
234
     onPullDownRefresh() {
273
     onPullDownRefresh() {