优化代码

src/components/xc/select-v2/VirtualizationSelect.vue

@@ -45,24 +45,17 @@ const emit = defineEmits(['change', 'update:modelValue'])
 const itemHeight = 34
 
 let emptyHeight = $ref(itemHeight * props.dataLength)
+let containerHeight = 300
 
-// const emptyHeight = computed(() => {
-//   return itemHeight * props.dataLength
-// })
 
-let containerHeight = $ref(~~(props.dataLength * 34))
-
-
-const itemCount = computed(() => {
-  return Math.ceil(containerHeight / itemHeight)
-})
+let itemCount = Math.ceil(containerHeight / itemHeight)
 
 const container = ref(null)
 const start = ref(0)
 const translateY = ref(0)
 
 const listData = computed(() => {
-  return props.data.slice(start.value, start.value + itemCount.value + 1)
+  return props.data.slice(start.value, start.value + itemCount + 1)
 })
 
 const clickLi = async (item, index) => {
@@ -115,8 +108,9 @@ const resetData = () => {
   containerHeight = emptyHeight > 300 ? 300 : emptyHeight
   start.value = 0
   translateY.value = 0 + 'px'
-  emit('update:modelValue', 0)
   container.value.scrollTop = 0
+  itemCount = Math.ceil(containerHeight / itemHeight)
+  enableScrollBar()
 }
 
 defineExpose({selectedDataSubscript, $el: container, enableScrollBar, resetData})
@@ -129,6 +123,7 @@ defineExpose({selectedDataSubscript, $el: container, enableScrollBar, resetData}
   padding: 10px 0;
   margin: 0;
   text-align: center;
+  width: 100%;
   color: var(--el-text-color-secondary);
   font-size: var(--el-select-font-size);
 }

src/components/xc/select-v2/XcSelectV2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="xc-select-v2_main" @mousedown="stopLosingFocus($event)" ref="xcSelectV2Main">
+  <div class="xc-select-v2_main" style="width: 120px" @mousedown="stopLosingFocus($event)" ref="xcSelectV2Main">
     <el-input ref="xcInput" @input="inputChange" v-model="label"
               @blur="loseFocus"
               :placeholder="placeholder"
@@ -83,17 +83,13 @@ const emit = defineEmits(['change'])
 
 let label = $ref('')
 let isGetFocus = $ref(false)
-let tempMap = new Map()
 let selectItem = $ref(null)
 let xcInput = $ref(null)
 let top = $ref(22)
 let selectedSubscript = $ref(0)
 let dataLenght = $ref(0)
 let isClearable = $ref(false)
-let inputStyle = $ref({
-  top: 22,
-  width: 120
-})
+let inputStyle = $ref({})
 let xcSelectV2Main = $ref()
 let whetherToSearchLocally = $ref(!props.remoteMethod)
 
@@ -148,7 +144,6 @@ const method = (val) => {
 
 const change = async (data) => {
   if (data) {
-    tempMap[data.value] = data
     props.modelValue[props.value] = data.value
     props.modelValue[props.label] = data.label
     label = data.label
@@ -179,7 +174,7 @@ const getFocus = async () => {
 }
 
 const loseFocus = async () => {
-  label = props.modelValue[props.label]
+  label = props.modelValue[props.label] ? props.modelValue[props.label] : props.modelValue[props.value]
   await sleep(100)
   isShow = false
   isGetFocus = false
@@ -199,24 +194,21 @@ const selectItemResetData = async () => {
   try {
     await selectItem.resetData()
   } catch (e) {
-    console.log(e)
+    // console.log(e)
   }
 }
 
-const selectItemEnableScrollBar = async () => {
+const selectItemDelectedDataSubscript = async () => {
   try {
-    await selectItem.enableScrollBar()
+    await selectItem.selectedDataSubscript(selectedSubscript)
   } catch (e) {
     // console.log(e)
   }
 }
 
 
-const valueChange = async () => {
+const valueChange = async (whetherToChangeTheValue) => {
   dataLenght = props.data.length
-  await nextTick()
-  await selectItemResetData()
-  await selectItemEnableScrollBar()
   if (isGetFocus) {
     return;
   }
@@ -243,19 +235,18 @@ const valueChange = async () => {
       return;
     }
 
-    if (!props.modelValue[props.label]) {
+
+    if (whetherToChangeTheValue) {
       label = props.modelValue[props.value]
+      await method(props.modelValue[props.value])
     }
-    await method(props.modelValue[props.value])
-  } else {
-    label = props.modelValue[props.value]
   }
 }
 
 watch(
     () => props.modelValue[props.value],
     (newValue, oldValue) => {
-      valueChange()
+      valueChange(true)
     },
     {immediate: true, deep: true}
 )
@@ -263,7 +254,10 @@ watch(
 watch(
     () => props.data,
     async () => {
-      valueChange()
+      await valueChange(false)
+      await nextTick()
+      await selectItemResetData()
+      selectedSubscript = 0
     },
     {immediate: true, deep: true}
 )
@@ -274,22 +268,18 @@ watch(
     () => {
       if (isShow && dataLenght > 0) {
         nextTick(() => {
-          if (!props.data[selectedSubscript].value === props.modelValue[props.value]) {
+          if (props.data[selectedSubscript].value !== props.modelValue[props.value]) {
             for (let i = 0; i < dataLenght; i++) {
               let data = props.data[i];
-              if (data.value === props.data[selectedSubscript].value) {
+              if (data.value === props.modelValue[props.value]) {
                 selectedSubscript = i
-                try {
-                  selectItem.selectedDataSubscript(i)
-                } catch (e) {
-                }
-                return;
+                break
               }
             }
-          } else {
-            selectItem.selectedDataSubscript(selectedSubscript)
           }
-          let docInput = xcInput.input
+          selectItemDelectedDataSubscript()
+
+          let docInput = xcInput.input;
           let inputTop = docInput.getBoundingClientRect().top
           let inputLeft = docInput.getBoundingClientRect().left
           let selectBox = selectItem.$el
@@ -313,8 +303,8 @@ onMounted(() => {
     let docInput = xcInput.input
     inputStyle = {
       top: docInput.scrollHeight + 5 + 'px',
-      minWidth: docInput.scrollWidth + 15 + 'px',
-      minHeight: '40px'
+      minWidth: xcSelectV2Main.scrollWidth + 'px',
+      minHeight: '40px',
     }
   })
 })

src/views/hospitalization/zhu-yuan-yi-sheng/yi-zhu-lu-ru/YiZhuLuRu.vue

@@ -394,9 +394,9 @@ const dianJiFuZhuXuanZhongYiZhu = () => {
 }
 
 onMounted(async () => {
-  // setTimeout(() => {
-  //   addYiZhuClick()
-  // }, 300)
+  setTimeout(() => {
+    addYiZhuClick()
+  }, 300)
   zkList.value = await getTheTransferList()
 })
 

src/views/settings/Test.vue

@@ -1,24 +1,17 @@
 <template>
-  <xc-select-v2 style="width: 120px; " v-model="obj"
+  <xc-select-v2 v-model="obj"
                 value="tcode" label="tname"
                 :data="data" :remote-method="testmethod"/>
-  <!--  <el-select-v2 v-model="obj.tcode" :options="data"-->
-  <!--                clearable-->
-  <!--                remote-->
-  <!--                filterable-->
-  <!--                :remote-method="testmethod"-->
-  <!--                style="top: 780px"-->
-  <!--  ></el-select-v2>-->
   测试:
-  <xc-select-v2 style="width: 120px;top: 780px;left: 890px" v-model="obj"
-                value="tcode" label="tname"
-                id="2"
-                :data="data" :remote-method="testmethod" clearable/>
   <el-button @click="test1">清空</el-button>
+  <el-button @click="generateData">生成数据</el-button>
+
+  <el-button @click="testApi">API</el-button>
 </template>
 
 <script setup name='Test'>
 import sleep from "@/utils/sleep";
+import {huoQuLinChuangZhenDuan} from "@/api/zhu-yuan-yi-sheng/jian-yan-jian-cha-shen-qing";
 
 const obj = $ref({
   tcode: '',
@@ -27,39 +20,55 @@ const obj = $ref({
 
 let data = $ref([])
 
-const testmethod = (val) => {
-  console.log(val)
+const generateData = () => {
+  for (let i = 0; i < 1000; i++) {
+    data.push({
+      value: i.toString(),
+      label: i === 4 ? 'asdghashjgdhjasgdhjasgdhjasgdhjasgdjhasdg' : 'test' + i
+    })
+  }
+
 }
 
-const test1 = async () => {
+const testmethod = async (val) => {
+  console.log('触发查询事件', val)
+  let length = Math.ceil((Math.random() * 10) * 100)
+  let index = Math.ceil((Math.random() * 10) * 10)
   data = []
-  await sleep(1000)
-  obj.tcode = 'ad'
-  await sleep(1000)
-  // console.log('数据来了')
-  for (let i = 0; i < 5; i++) {
+  for (let i = 0; i < length; i++) {
+    if (i === index) {
+      data.push({
+        value: val,
+        label: i + 'label' + '数据'
+      })
+    }
     data.push({
-      value: i.toString(),
-      label: i === 4 ? 'asdghashjgdhjasgdhjasgdhjasgdhjasgdjhasdg' : 'test' + i
+      value: val + i,
+      label: i + 'label'
     })
   }
-  obj.tcode = '1'
+  await sleep(2000)
+  obj.tname = ''
+  data = []
 }
 
-for (let i = 0; i < 1000; i++) {
-  data.push({
-    value: i.toString(),
-    label: i === 4 ? 'asdghashjgdhjasgdhjasgdhjasgdhjasgdjhasdg' : 'test' + i
-  })
+const test1 = async () => {
+  data = []
+  await sleep(1000)
+  obj.tcode = 'ad' + Math.ceil((Math.random() * 10))
+  console.log(obj.tcode)
 }
 
+
 const te = (val) => {
   console.log(val)
 }
 
-setTimeout(() => {
-  obj.tcode = '234'
-}, 1000)
+const testApi = () => {
+  huoQuLinChuangZhenDuan('123', 1).then((res) => {
+    console.log(res)
+  })
+}
 </script>
 
 <style scoped>