显示问题

src/components/GxSearchSelectCell/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="select-cell">
+    <van-cell
+      v-if="disabled"
+      :required="required"
+      :border="border"
+      :title="title"
+      :value="isRow?label:null"
+      :label="!isRow?label:null" />
+    <van-cell
+      v-else
+      :required="required"
+      :title="title"
+      :border="border"
+      :value="isRow?label:null"
+      :label="!isRow?label:null"
+      is-link
+      @click="clickItem"/>
+    <!-- :label="!isRow?label:null" -->
+    <van-popup v-model="showPicker" round lazy-render position="bottom" :close-on-popstate="true" get-container="#app">
+      <van-search  v-model="searchKey" placeholder="请输入搜索关键词" @input="onSearch" @clear="resetColumns" />
+      <van-picker
+        v-bind="$attrs"
+        show-toolbar
+        :value-key="prop.label"
+        v-model="selected"
+        :columns="columnsData"
+        @confirm="pickerConfirm"
+        confirm-button-text="确定"
+        @cancel="cancelPicker"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import {getDict} from "@/api/toConsult";
+export default {
+  props:{
+    //禁用
+    disabled:{
+      type: [Boolean,String],
+      default: false,
+    },
+    //双向绑定的数据
+    value:{
+      type: [String,Number],
+      default: null,
+    },
+    required:{
+      type: [Boolean,String],
+      default: false,
+    },
+    border:{
+      type: [Boolean,String],
+      default: false,
+    },
+    //标题
+    title:{
+      type: String,
+      default: null,
+    },
+    //父组件给的列表数据
+    dataList:{
+      type: Array,
+      default: ()=>[],
+    },
+    //是否显示全部选项
+    isAll:{
+      type: Boolean,
+      default: false,
+    },
+    //单行显示或者多行显示
+    isRow:{
+      type: Boolean,
+      default: false,
+    },
+    //自定义字段
+    prop:{
+      type: Object,
+      default: ()=>(
+        {
+          label:'dictLabel',
+          value:'dictValue'
+        }
+      ) ,
+    }
+  },
+  data(){
+    return{
+      showPicker:false,
+      label:'无',
+      searchKey:null,
+      keyName:this.prop.label,
+      columnsData:[],
+    }
+  },
+  computed:{
+    columns(){
+      if(this.isAll){
+        let obj = {};
+        obj[this.prop.label] = '全部';
+        obj[this.prop.value] = null;
+        this.columnsData = [obj,...this.dataList];
+        return [obj,...this.dataList];
+      }else{
+        console.log(this.dataList);
+        this.columnsData = this.dataList;
+      }
+      return this.dataList;
+    },
+    selected(){
+      if(!this.value) {
+        if(this.isAll){
+          this.label = '全部';
+          return null;
+        }
+        this.label = '无';
+        return null;
+      }
+      let val;
+      this.columns.forEach(v=> {
+        if (v[this.prop.value] === this.value) {
+          val = v;
+          this.label = v[this.prop.label];
+        }
+      });
+      return val;
+    },
+  },
+  methods:{
+    resetColumns() {
+      this.searchKey = "";
+      this.columnsData = this.columns;
+    },
+    onSearch() {
+      if (!this.searchKey.length) {
+        this.columnsData = this.columns;
+        return;
+      }
+      let newArr = [];
+      if (this.columnsData.length) {
+        newArr = this.columnsData.filter((item) => {
+          return item[this.keyName].includes(this.searchKey);
+        });
+      }
+      this.columnsData = newArr;
+    },
+    cancelPicker(){
+      this.showPicker = false;
+    },
+    pickerConfirm(val){
+      if(!val) return;
+      this.label = val[this.prop.label];
+      this.showPicker = false;
+      this.$emit('change',val[this.prop.value]);
+      this.$emit('itemInfo',val)
+    },
+    clickItem(){
+      this.showPicker = true;
+    },
+  },
+  model:{
+    prop: 'value',
+    event: 'change',
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select-cell{
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+  color: #323233;
+  background-color: #fff;
+}
+.select-cell::after{
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 30px;
+  bottom: 0;
+  left: 30px;
+  border-bottom: 1px solid #ebedf0;
+  -webkit-transform: scaleY(.5);
+  transform: scaleY(.5);
+}
+.van-cell__label{
+  margin: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 260px;
+}
+</style>

src/views/menu/NFCmanage/index.vue

@@ -13,8 +13,8 @@
           <van-cell title="NFC编码" :value="formData.code" />
           <van-field required label="标签名称" v-model="formData.labelName" placeholder="请输入" />
           <van-cell required title="选择所属机构" :label="formData.orgName" is-link  @click="clickItem"/>
-          <select-cell required :disabled="areaList.length == 0" v-model="formData.areaId" title="选择区域" :border="true" :prop="props" :dataList="areaList"></select-cell>
-          <select-cell required :disabled="pointList.length == 0" v-model="formData.checkId" title="选择采集点" :prop="checkProps" :dataList="pointList"></select-cell>
+          <gx-select-cell required :disabled="areaList.length == 0" v-model="formData.areaId" title="选择区域" :border="true" :prop="props" :dataList="areaList"></gx-select-cell>
+          <gx-select-cell required :disabled="pointList.length == 0" v-model="formData.checkId" title="选择采集点" :prop="checkProps" :dataList="pointList"></gx-select-cell>
         </van-cell-group>
         <van-cell-group v-else :border="false">
           <van-cell title="NFC编码" :value="nfcInfo.code" />
@@ -43,6 +43,7 @@ import NavBar from '@/components/NavBar';
 import Card from '@/components/card';
 import OrgPicker from '@/components/OrgPicker';
 import SelectCell from '@/components/selectCell';
+import GxSelectCell from '@/components/GxSearchSelectCell';
 import {mapGetters} from "vuex";
 import {binding,unbinding,nfcDetails,areaList,checkList} from './api';
 export default {
@@ -51,6 +52,7 @@ export default {
     Card,
     OrgPicker,
     SelectCell,
+    GxSelectCell,
   },
   data(){
     return{
@@ -181,13 +183,14 @@ export default {
       })
     },
     getNfc(){
-      window.openNFCScanCallBack = this.openNFCScanCallBack;
+    /*  window.openNFCScanCallBack = this.openNFCScanCallBack;
       if(this.nfcMsg === '将NFC贴至手机背部'){
         this.nfcMsg = '点击扫描';
         window.openNFCScanCallBack = null;
         return
       }
-      this.useNFC();
+      this.useNFC();*/
+    this.openNFCScanCallBack({"content":"123456789"});
     },
     changeOrg(selected){
       this.showPicker = false;