gjerp_ui/src/components/ProjectSelect/index.vue

<template>
  <vxe-pulldown ref="xDown4" transfer>
    <template #default>
      <vxe-input
        v-model="dcCh"
        placeholder="船号"
        :style="{height: '28px',lineHeight: '28px', width: _style.width}"
        suffix-icon="vxe-icon--search"
        @keyup="keyupEvent4"
        @focus="focusEvent4"
      />
    </template>
    <template #dropdown>
      <div class="my-dropdown  mytable " style="width: 250px">
        <vxe-grid
          highlight-hover-row
          height="250"
          :data="projectData"
          :columns="projectColumns"
          @cell-click="cellClickEvent"
          show-overflow
        >
          <template #wgbsEdit="{ row}">
            <vxe-checkbox v-model="row.wgbs"  checked-value="Y" unchecked-value="N"   disabled ></vxe-checkbox>
          </template>
        </vxe-grid>
      </div>
    </template>
  </vxe-pulldown>
</template>
<script>
import {openCzplBase} from "@/api/openapi";

export default {
  name:'ProjectSelect',
  props:{
    _style:{
      type:Object,
      default:()=>{
        return {width:'150px'}
      }
    }
  },
  data(){
    return {
      dcCh:'',
      projectData:[],
      projectData1:[],
      projectColumns:[
        {field: 'cbbm', title: '船号',width: 110},
        { field: 'wgbs', title: '完工标识', width: 80,
          slots:{
            default: 'wgbsEdit'
          },
        },
      ],
    }
  },
  created(){
    this.initProject()
  },
  methods:{
    getDcch(){
      return this.dcCh
    },
    initProject(){
      openCzplBase({}).then(res=>{
        this.projectData=res.data.cbbm
        this.projectData1=res.data.cbbm
      })
    },
    cellClickEvent({row}){
      this.dcCh = row.cbbm
      this.$refs.xDown4.hidePanel()
    },
    focusEvent4(){
      this.$refs.xDown4.showPanel()
    },
    keyupEvent4(){
      if (this.dcCh) {
        this.projectData = this.projectData1.filter(row => row.cbbm.indexOf(this.dcCh.toUpperCase()) > -1)
      } else {
        this.projectData = this.projectData1.slice(0)
      }
    },
  }
}
</script>