儿童类型和帮扶单位多选

src/views/weibao/components/vanFieldCheckbox.vue

@@ -0,0 +1,205 @@
+<template>
+    <div class="dh-field">
+        <!-- class="van-hairline--bottom" -->
+        <div>
+            <!-- :is-link="$attrs.disabled === undefined" -->
+            <van-field v-model="resultLabel" v-bind="$attrs" readonly
+                error-message-align='right' input-align="left" class="dh-cell" @click="showPopu($attrs.disabled)" />
+            <van-popup v-model="show" position="bottom" class="">
+                <div class="van-picker__toolbar">
+                    <button type="button" class="van-picker__cancel" @click="cancel">取消</button>
+                    <div class="van-ellipsis van-picker__title">{{ $attrs.label }}</div>
+                    <button type="button" class="van-picker__confirm" @click="onConfirm">确认</button>
+                </div>
+                <div style="max-height:264px; overflow-y:auto;">
+                    <van-field v-if="isSearch" v-model="searchVal" input-align="left" placeholder="搜索" @input="search" />
+                    <van-cell title="全选">
+                        <template #right-icon>
+                            <van-checkbox v-model="checkedAll" name="all" @click="toggleAll" />
+                        </template>
+                    </van-cell>
+                    <van-checkbox-group ref="checkboxGroup" v-model="checkboxValue" @change="change">
+                        <van-cell-group>
+                            <van-cell v-for="(item, index) in columnsData" :key="item[option.value]"
+                                :title="item[option.label]" clickable @click="toggle(index)">
+                                <template #right-icon>
+                                    <van-checkbox ref="checkboxes" :name="item[option.value]" />
+                                </template>
+                            </van-cell>
+                        </van-cell-group>
+                    </van-checkbox-group>
+                </div>
+            </van-popup>
+        </div>
+    </div>
+</template>
+   
+<script>
+export default {
+    name: 'VanFieldCheckbox',
+    model: {
+        // prop: 'selectValue'
+    },
+    props: {
+        columns: {
+            type: Array,
+            default: function () {
+                return []
+            }
+        },
+        selectValue: {
+            type: Array,
+            default: function () {
+                return []
+            }
+        },
+        option: {
+            type: Object,
+            default: function () {
+                return { label: 'label', value: 'value' }
+            }
+        },
+        // 是否支持搜索
+        isSearch: {
+            type: Boolean,
+            default: true
+        }
+    },
+    computed: {
+        resultLabel: {
+            get() {
+                const res = this.columns.filter(item => {
+                    return this.resultValue.indexOf(item[this.option.value]) > -1
+                })
+                const resLabel = res.map(item => {
+                    return item[this.option.label]
+                })
+                return resLabel.join(',')
+            },
+            set() {
+
+            }
+        }
+    },
+    data() {
+        return {
+            show: false,
+            searchVal: '',
+            columnsData: JSON.parse(JSON.stringify(this.columns)),
+            checkboxValue: JSON.parse(JSON.stringify(this.selectValue)),
+            checkedAll: false,
+            resultValue: JSON.parse(JSON.stringify(this.selectValue))
+        }
+    },
+    methods: {
+        // 搜索
+        search(val) {
+            if (val) {
+                this.columnsData = this.columnsData.filter(item => {
+                    return item[this.option.label].indexOf(val) > -1
+                })
+            } else {
+                this.columnsData = JSON.parse(JSON.stringify(this.columns))
+            }
+        },
+        getData(val) {
+            const res = this.columnsData.filter(item => {
+                return val.indexOf(item[this.option.value]) > -1
+            })
+            return res
+        },
+        onConfirm() {
+            this.resultValue = this.checkboxValue
+            this.show = !this.show
+
+            let res = this.columns.filter(item => {
+                return this.resultValue.indexOf(item[this.option.value]) > -1
+            })
+            let resLabel = res.map(item => {
+                return item[this.option.label]
+            })
+            let resValue = res.map(item => {
+                return item[this.option.value]
+            })
+
+            // this.$emit('confirm', this.resultValue,this.resultValue)
+            this.$emit('confirm', resLabel.join(','),resValue.join(','))
+        },
+        change(val) {
+            this.$emit('change', val, this.getData(this.resultValue))
+        },
+        cancel() {
+            this.show = !this.show
+            this.$emit('cancel', this.resultValue)
+        },
+        toggle(index) {
+            this.$refs.checkboxes[index].toggle()
+        },
+        toggleAll(all) {
+            this.$refs.checkboxGroup.toggleAll(this.checkedAll)
+        },
+        showPopu(disabled) {
+            this.columnsData = JSON.parse(JSON.stringify(this.columns))
+            this.checkboxValue = JSON.parse(JSON.stringify(this.selectValue))
+            this.resultValue = JSON.parse(JSON.stringify(this.selectValue))
+            if (disabled !== undefined && disabled !== false) {
+                return false
+            } else {
+                this.show = !this.show
+            }
+        }
+    },
+    watch: {
+        selectValue: function (newVal) {
+            this.resultValue = newVal
+        },
+        resultValue(val) {
+            this.searchVal = ''
+            this.columnsData = JSON.parse(JSON.stringify(this.columns))
+            this.$emit('input', val)
+        },
+        columnsData: {
+            handler(val) {
+                if (val.length && val.length === this.checkboxValue.length) {
+                    this.checkedAll = true
+                } else {
+                    this.checkedAll = false
+                }
+            },
+            immediate: true
+        },
+        checkboxValue: {
+            handler(val) {
+                if (val.length && val.length === this.columnsData.length) {
+                    this.checkedAll = true
+                } else {
+                    this.checkedAll = false
+                }
+            },
+            immediate: true
+        }
+    }
+}
+</script>
+   
+<style lang="scss" scoped>
+.dh-field {
+    width: 100%;
+    padding-left: 30px;
+    box-sizing: border-box;
+    background: #fff;
+
+    .dh-cell.van-cell {
+        width: 100%;
+        padding: 10px 0;
+    }
+
+    .dh-cell.van-cell--required::before {
+        left: -8px;
+    }
+
+    .van-popup {
+        border-radius: 20px 20px 0 0;
+    }
+}
+</style>

src/views/weibao/views/collect/index.vue

@@ -33,7 +33,7 @@
                 <van-row class="cell">
                     <van-col span="6">身份证号<span>*</span>：</van-col>
                     <van-col span="18">
-                        <van-field name="idcard" type="number" v-model="form.idCard" :rules="[{ validator, required: true, message: '请输入正确身份证号'}]" placeholder="请输入身份证号" />
+                        <van-field name="idcard" type="text" v-model="form.idCard" :rules="[{ validator, required: true, message: '请输入正确身份证号'}]" placeholder="请输入身份证号" />
                     </van-col>
                 </van-row>
                 <van-row class="cell">
@@ -65,26 +65,46 @@
                 </van-row>
                 <van-row class="cell">
                     <van-col span="6">儿童类型<span>*</span>：</van-col>
-                    <van-col span="18">
+                    <!-- <van-col span="18">
                         <van-field name="child" v-model="form.typeDesc"  @click="modelValue.childShow = true" :rules="[{ required: true }]"
                             placeholder="请选择" disabled />
                     </van-col>
                     <van-popup v-model="modelValue.childShow" position="bottom" :style="{ height: '50%' }">
                         <van-picker :visible-item-count="6" show-toolbar :columns="childList"
                             @confirm="onChildShow" @cancel="modelValue.childShow = false" value-key="name" />
-                    </van-popup>
+                    </van-popup> -->
+                    <van-col span="18">
+                        <van-field-checkbox
+                        placeholder="请选择"
+                        :isSearch="false"
+                        :columns="childList"
+                        label-width="100"
+                        :option="{label:'name', value:'id'}"
+                        @confirm="onChildShowM"
+                        />
+                    </van-col>
                 </van-row>
                
                 <van-row class="cell">
                     <van-col span="6">帮扶单位：</van-col>
-                    <van-col span="18">
+                    <!-- <van-col span="18">
                         <van-field name="assist" v-model="form.stationDesc" @click="modelValue.assistShow = true" :rules="[{ required: true }]"
                             placeholder="请选择" disabled />
                     </van-col>
                     <van-popup v-model="modelValue.assistShow" position="bottom" :style="{ height: '50%' }">
                         <van-picker :visible-item-count="8" show-toolbar :columns="assistList"
                             @confirm="onAssistShow" @cancel="modelValue.assistShow = false" value-key="name" />
-                    </van-popup>
+                    </van-popup> -->
+                    <van-col span="18">
+                        <van-field-checkbox
+                        placeholder="请选择"
+                        :isSearch="false"
+                        :columns="assistList"
+                        label-width="100"
+                        :option="{label:'name', value:'id'}"
+                        @confirm="onAssistShowM"
+                        />
+                    </van-col>
                 </van-row>
                 
                 <van-row class="cell">
@@ -104,7 +124,7 @@
                 <van-row class="cell">
                     <van-col span="6">联系电话<span>*</span>：</van-col>
                     <van-col span="18">
-                        <van-field  name="phone" v-model="form.mobile" :rules="[{ required: true }]" placeholder="联系电话" disabled />
+                        <van-field  name="phone" type="tel" v-model="form.mobile" :rules="[{ required: true }]" placeholder="联系电话" disabled />
                     </van-col>
                 </van-row>
                
@@ -130,7 +150,7 @@
                 <van-row class="cell">
                     <van-col span="6">身高：</van-col>
                     <van-col span="18">
-                        <van-field name="height" v-model="form.height"  :rules="[{ required: false }]"
+                        <van-field name="height" type="number" v-model="form.height"  :rules="[{ required: false }]"
                             placeholder="请输入" />
                     </van-col>
                 </van-row>
@@ -138,7 +158,7 @@
                 <van-row class="cell">
                     <van-col span="6">体重：</van-col>
                     <van-col span="18">
-                        <van-field name="weight" v-model="form.weight"  :rules="[{required: false}]"
+                        <van-field name="weight" type="number" v-model="form.weight"  :rules="[{required: false}]"
                             placeholder="请输入" />
                     </van-col>
                 </van-row>
@@ -247,8 +267,9 @@ import {mzlist} from './mzlist.js'
 import {validateIDcard} from '@/utils/validate.js'
 import { listArea, childType, organization, listEmployeeByName, createChildBaseInfo} from '../../api/index.js'
 import vanUploader from '../../components/vanUploader.vue'
+import vanFieldCheckbox from '../../components/vanFieldCheckbox.vue'
 export default {
-    components: { vanUploader },
+    components: { vanUploader,vanFieldCheckbox },
     data() {
         return {
             userInfo:{},
@@ -408,11 +429,21 @@ export default {
             this.form.typeDesc = e.name
             this.form.type = e.id
         },
+        onChildShowM(label,value) {
+            console.log('儿童类型::')
+            this.form.typeDesc = label
+            this.form.type = value
+        },
         onAssistShow(e) {
             this.modelValue.assistShow = false
             this.form.stationDesc = e.name
             this.form.stationId = e.id
         },
+        onAssistShowM(label,value) {
+            console.log('帮扶单位::')
+            this.form.stationDesc = label
+            this.form.stationId = value
+        },
         onHealthShow(e) {
             this.modelValue.healthShow = false
             this.modelValue.healthValue = e.text
@@ -565,7 +596,6 @@ export default {
 .main {
     padding: 0 20px;
 }
-
 .cell {
     border-bottom: 1px solid #eee;
     padding: 5px 0;