1、选择器

2、状态查询

src/components/PickerField.vue

+<template>
+    <div>
+        <!--https://youzan.github.io/vant/#/zh-CN/form#biao-dan-xiang-lei-xing---shi-jian-xuan-ze-qi-->
+        <van-field
+                readonly
+                v-model="fieldValue"
+                :label="label"
+                :placeholder="'点击选择'+label"
+                @click="showPicker = true"
+        ></van-field>
+        <van-popup v-model="showPicker" position="bottom"
+                   :safe-area-inset-bottom="true"
+                   :close-on-popstate="true">
+            <van-picker
+                    show-toolbar
+                    :columns="columns"
+                    :value-key="showKey"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+            ></van-picker>
+        </van-popup>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            label: String,
+            value: {type: String, default: ''},  //默认值
+            columns: Array,
+            showKey: {type: String, default: ''}
+        },
+        data() {
+            return {
+                showPicker: false,
+            }
+        },
+        computed: {
+            fieldValue: {
+                get() {
+                    return this.value
+                },
+                set(val) {
+                    this.$emit('input', val)
+                }
+            },
+        },
+        methods: {
+            onConfirm(value) {
+                this.fieldValue = this.showKey ? value[this.showKey] : value
+                this.showPicker = false
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -24,11 +24,13 @@ import '@/styles/main.less'
 
 import SearchBar from '@/components/SearchBar.vue'
 import DatetimeField from '@/components/DatetimeField.vue'
+import PickerField from '@/components/PickerField.vue'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
 import CustomerNavBarLayout from '@/layout/CustomerNavBarLayout.vue'
 
 Vue.component('search-bar', SearchBar)
 Vue.component('datetime-field', DatetimeField)
+Vue.component('picker-field', PickerField)
 Vue.component('confirm-dialog', ConfirmDialog)
 Vue.component('customer-navBar-layout', CustomerNavBarLayout)
 

src/page/Home.vue

 <template>
     <div>
-        <!--https://youzan.github.io/vant/#/zh-CN/grid-->
         <div class="layout-cont home-cont">
-            <!--todo  首页布局 颜色-->
             <div class="box-c box-c-1" @click="_goto('/sampling_plan/sampling_plan')">
                 <div>
                     <img src="@/assets/home/plan.png"></div>

src/page/sampling-plan/SamplingPlan.vue

@@ -28,6 +28,8 @@
                     <van-field v-model="formObj.uname" label="登记人" placeholder="请输入登记人"></van-field>
                     <datetime-field label="登记开始日期" v-model="formObj.ctimeBegin"></datetime-field>
                     <datetime-field label="登记结束日期" v-model="formObj.ctimeEnd"></datetime-field>
+                    <picker-field label="状态" v-model="formObj.progress" :columns="statusList"
+                                  show-key="text"></picker-field>
                     <!--todo 状态查询-->
                 </template>
             </search-bar>
@@ -66,10 +68,8 @@
                                 <template #right v-if="item.progress==='草稿'||item.progress==='审批驳回'">
                                     <van-button square type="info" text="编辑" class="swipe-cell-btn"
                                                 @click="_edit(item)"></van-button>
-                                    <!--todo  管理人-->
                                     <van-button square type="primary" text="管理人员" class="swipe-cell-btn"
                                                 @click="_peopleManage(item)"></van-button>
-                                    <!--todo 管理地点-->
                                     <van-button square type="warning" text="管理地点" class="swipe-cell-btn"
                                                 @click="_locManage(item)"></van-button>
                                     <van-button square type="danger" text="删除" class="swipe-cell-btn"
@@ -107,6 +107,14 @@
                     progress: '',
                     flag: 0
                 },
+                statusList: [
+                    {value: 1, text: '草稿'},
+                    {value: 2, text: '审批中'},
+                    {value: 3, text: '审批通过'},
+                    {value: 4, text: '审批驳回'},
+                    {value: 5, text: '实施中'},
+                    {value: 6, text: '完成'},
+                ],
                 key: '',
                 showPopup: true,
                 showCheck: false,
@@ -277,7 +285,7 @@
                     this.$toast('请至少选择一条数据！')
                 } else {
                     // this._delOk(ids)
-                //    todo 提交
+                    //    todo 提交
                 }
             },
             _goFile(id) {

src/router/sampling-plan-routes.js

@@ -15,7 +15,6 @@ import FileUpload from '@/page/sampling-plan/file/FileUpload.vue'
 
 export default [
     {path: 'sampling_plan', component: SamplingPlan, meta: {title: '抽样计划', hideNavBar: true}},
-    //todo  自定义标题
     {path: 'sampling_plan_add', component: SamplingPlanAdd, meta: {customerNavBarTitle: true}},
 
     {path: 'sampler_checked', component: SamplerChecked, meta: {title: '管理抽样人员'}},