组件问题

src/components/SelectCustomer/index.ts

@@ -1,3 +1,4 @@
 import SelectComponent from './src/index.vue'
+console.log('%csrc/components/SelectCustomer/index.ts:2 SelectComponent', 'color: #007acc;', SelectComponent);
 
 export { SelectComponent }

src/components/SelectCustomer/src/index.vue

@@ -6,7 +6,7 @@
     loading-text="数据加载中..."
     filterable
     clearable
-    popper-class="event-select-poper"
+    :popper-class="selectComId"
     v-el-select-loadmore="loadmore"
     :placeholder="placeholder"
     style="width: 100%"
@@ -25,7 +25,8 @@
 import { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 
-defineOptions({ name: 'SelectCustomer' })
+defineOptions({ name: 'SelectComponent' })
+const { proxy } = getCurrentInstance() as any
 
 const props = defineProps({
   disabled: propTypes.number.def(undefined),
@@ -44,12 +45,12 @@ const allFilterEvents = ref([])
 
 watch(() => props.modelValue, (val) => {
   selectValue.value = val
-  let arr = options.value.filter(v => v.id === val)
+    let arr = options.value.filter(v => v.id === val)
   if (!arr.length) {
     let selectItem = props.customerList.filter(v => v.id === val)
     options.value = [...options.value, ...selectItem]
   }
-}, { immediate: true })
+},)
 
 watch(() => props.customerList, (val) => {
   options.value = val.slice(0, 10)
@@ -57,33 +58,60 @@ watch(() => props.customerList, (val) => {
 
 let pageNo = ref(1)
 let pageSize = ref(10) 
-
+let selectRef = ref('')
+let selectComId = ref('popper' + (Math.random().toFixed(5) * 100000))
 const vElSelectLoadmore = {
-  beforeMount(el, binding) {
+  mounted(el, binding) {
-    let selectDom = null;
+    selectRef.value = el
-    nextTick(() => {
+    console.log('%csrc/components/SelectCustomer/src/index.vue:63 el,444', 'color: #007acc;', el,444);
-      selectDom = document.querySelector('.event-select-poper .el-select-dropdown__wrap');
+    const scrollHandler = function() {
-      if (selectDom) {
+      if (this.scrollHeight - this.scrollTop <= this.clientHeight + 20) {
-        const loadMores = function () {
+        binding.value && binding.value()
-          if (this.scrollHeight - this.scrollTop <= this.clientHeight + 20) {
-            binding.value && binding.value();
-          }
-        };
-        el.selectLoadMore = loadMores;
-        selectDom.addEventListener('scroll', loadMores.bind(selectDom));
       }
-    });
-  },
-  beforeUnmount(el) {
-    if (el.selectLoadMore) {
-      const selectDom = document.querySelector('.event-select-poper .el-select-dropdown__wrap');
-      if (selectDom) {
-        selectDom.removeEventListener('scroll', el.selectLoadMore);
-      }
-      delete el.selectLoadMore;
     }
-  }
+    
+    nextTick(() => {
+      // console.log('%csrc/components/SelectCustomer/src/index.vue:75 selectComId.value', 'color: #007acc;', selectComId.value);
+      // const selectDom = document.querySelector('.event-select-poper .el-select-dropdown__wrap')
+      const selectDom = document.querySelector(`.${selectComId.value} .el-select-dropdown__wrap`)
+      console.log('%csrc/components/SelectCustomer/src/index.vue:77 object', 'color: #007acc;', selectDom);
+      if (selectDom) {
+        // 先移除可能存在的旧监听器
+        selectDom.removeEventListener('scroll', scrollHandler)
+        // 添加新监听器
+        selectDom.addEventListener('scroll', scrollHandler)
+        // 保存引用以便卸载时使用
+        el._scrollHandler = scrollHandler
+      }
+    })
+  },
+  // beforeUnmount(el) {
+  //   const selectDom = document.querySelector('.event-select-poper .el-select-dropdown__wrap')
+  //   if (selectDom && el._scrollHandler) {
+  //     selectDom.removeEventListener('scroll', el._scrollHandler)
+  //   }
+  // }
 }
+// onMounted(() => {
+//   nextTick(() => {
+//     const selectDom = document.querySelector('.event-select-poper .el-select-dropdown__wrap')
+//     if (selectDom) {
+//       const loadMores = function () {
+//         if (this.scrollHeight - this.scrollTop <= this.clientHeight + 20) {
+//           loadmore()
+//         }
+//       }
+//       selectDom.addEventListener('scroll', loadMores.bind(selectDom))
+//     }
+//   })
+// })
+
+// onBeforeUnmount(() => {
+//   const selectDom = document.querySelector('.event-select-poper .el-select-dropdown__wrap')
+//   if (selectDom) {
+//     selectDom.removeEventListener('scroll', () => {})
+//   }
+// })
 
 watch(allFilterEvents, () => {
   let startIndex = pageNo.value * pageSize.value - pageSize.value;
@@ -92,6 +120,7 @@ watch(allFilterEvents, () => {
 }, { immediate: true, deep: true })
 
 const loadmore = () => {
+  console.log('%csrc/components/SelectCustomer/src/index.vue:116 123', 'color: #007acc;', 123);
   if (props.customerList.length <= options.value.length) return;
   pageNo.value++;
   nextTick(() => {

src/plugins/formCreate/index.ts

@@ -66,7 +66,7 @@ import install from '@form-create/element-ui/auto-import'
 import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile'
 import { processForm } from '@/components/processForm'
 import { processTable } from '@/components/processTable'
-// import { SelectComponent } from '@/components/SelectCustomer'
+import { SelectComponent } from '@/components/SelectCustomer'
 import { useApiSelect } from '@/components/FormCreate'
 import { Editor } from '@/components/Editor'
 import DictSelect from '@/components/FormCreate/src/components/DictSelect.vue'
@@ -117,7 +117,7 @@ const components = [
   UploadFile,
   processForm,
   processTable,
-  // SelectComponent,
+  SelectComponent,
   DictSelect,
   UserSelect,
   DeptSelect,

src/views/crm/business/BusinessForm.vue

@@ -276,7 +276,7 @@ import { defaultProps, handleTree } from '@/utils/tree';
 import BusinessProductForm from './components/BusinessProductForm.vue';
 import { erpPriceMultiply, erpPriceInputFormatter } from '@/utils';
 import { propTypes } from '@/utils/propTypes'
-import  SelectComponent  from '@/components/SelectCustomer/src/index.vue'
+
 
 const { proxy }: any = getCurrentInstance();
 const { t } = useI18n();

src/views/crm/business/index.vue

@@ -183,7 +183,7 @@ import * as BusinessApi from '@/api/crm/business'
 import BusinessForm from './BusinessForm.vue'
 import { erpPriceTableColumnFormatter } from '@/utils'
 import { TabsPaneContext } from 'element-plus'
-import  SelectComponent  from '@/components/SelectCustomer/src/index.vue'
+
 import { DICT_TYPE } from '@/utils/dict'
 import * as CustomerApi from '@/api/crm/customer'
 

src/views/crm/contact/ContactForm.vue

@@ -179,7 +179,7 @@ import * as CustomerApi from '@/api/crm/customer'
 import * as AreaApi from '@/api/system/area'
 import { defaultProps } from '@/utils/tree'
 import { useUserStore } from '@/store/modules/user'
-import  SelectComponent  from '@/components/SelectCustomer/src/index.vue'
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 

src/views/crm/contact/index.vue

@@ -12,22 +12,8 @@
       label-width="68px"
     >
       <el-form-item label="客户" prop="customerId">
-        <el-select
+          <SelectComponent :customerList="customerList" class="!w-240px" v-model="queryParams.customerId"  />
-          v-model="queryParams.customerId"
+        
-          class="!w-240px"
-          clearable
-          lable-key="name"
-          placeholder="请选择客户"
-          value-key="id"
-          @keyup.enter="handleQuery"
-        >
-          <el-option
-            v-for="item in customerList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id!"
-          />
-        </el-select>
       </el-form-item>
       <el-form-item label="姓名" prop="name">
         <el-input

src/views/crm/contract/ContractChange.vue

@@ -140,7 +140,7 @@ import ContractProductForm from '@/views/crm/contract/components/ContractProduct
 import ContractAAuthorizedCompanyForm from './components/ContractAAuthorizedCompanyForm.vue'
 import ContractBAuthorizedPersonForm from './components/ContractAAuthorizedPersonForm.vue'
 import ContractForm from './ContractForm.vue'
-import  SelectComponent  from '@/components/SelectCustomer/src/index.vue'
+
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗

src/views/crm/contract/ContractForm.vue

@@ -490,7 +490,7 @@ import { propTypes } from '@/utils/propTypes'
 import { getIntDictOptions, getStrDictOptions, DICT_TYPE } from '@/utils/dict'
 import { defaultProps, handleTree } from '@/utils/tree'
 import * as DeptApi from '@/api/system/dept'
-import  SelectComponent  from '@/components/SelectCustomer/src/index.vue'
+
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗

src/views/crm/contract/detail/ContractChangeDetail.vue

@@ -122,7 +122,7 @@ import ContractAAuthorizedCompanyForm from '../components/ContractAAuthorizedCom
 import ContractBAuthorizedPersonForm from '../components/ContractAAuthorizedPersonForm.vue'
 import ContractForm from './ContractDetail.vue'
 import { propTypes } from '@/utils/propTypes'
-import  SelectComponent  from '@/components/SelectCustomer/src/index.vue'
+
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗

src/views/crm/contract/index.vue

@@ -321,7 +321,7 @@ import { erpPriceInputFormatter, erpPriceTableColumnFormatter } from '@/utils'
 import * as CustomerApi from '@/api/crm/customer'
 import { checkPermi } from '@/utils/permission'
 import { TabsPaneContext } from 'element-plus'
-import  SelectComponent  from '@/components/SelectCustomer/src/index.vue'
+
 
 defineOptions({ name: 'CrmContract' })
 

src/views/crm/customer-complaints/create.vue

@@ -113,7 +113,7 @@ import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { CandidateStrategy, NodeId } from '@/components/SimpleProcessDesignerV2/src/consts'
 import { ApprovalNodeInfo } from '@/api/bpm/processInstance'
 
-import  SelectComponent  from '@/components/SelectCustomer/src/index.vue'
+
 defineOptions({ name: 'CustomerComplaintsCreate' })
 
 const message = useMessage() // 消息弹窗

src/views/crm/customer-suggestion/create.vue

@@ -105,7 +105,7 @@ import { CandidateStrategy, NodeId } from '@/components/SimpleProcessDesignerV2/
 import { ApprovalNodeInfo } from '@/api/bpm/processInstance'
 import {defaultProps, handleTree} from "@/utils/tree";
 import {getSelfCustomerSimpleList} from "@/api/crm/customer";
-import  SelectComponent  from '@/components/SelectCustomer/src/index.vue'
+
 
 defineOptions({ name: 'CustomerSuggestionCreate' })
 

src/views/crm/product/ProductForm.vue

@@ -84,8 +84,8 @@
           </el-form-item>
         </el-col> -->
         <el-col :span="12">
-          <el-form-item label="是否有保险" prop="hasInsurance">
+          <el-form-item label="是否有保险" prop="containInsurance">
-            <el-radio-group v-model="formData.hasInsurance" :disabled="type">
+            <el-radio-group v-model="formData.containInsurance" :disabled="type">
               <el-radio
                 v-for="dict in getStrDictOptions(DICT_TYPE.TECH_SUPPORT)"
                 :key="dict.value"

src/views/crm/quotation/QuotationDetail.vue

@@ -412,7 +412,7 @@ import * as UserApi from '@/api/system/user'
 import * as DeptApi from '@/api/system/dept'
 import * as BusinessApi from '@/api/crm/business'
 import { propTypes } from '@/utils/propTypes'
-import  SelectComponent  from '@/components/SelectCustomer/src/index.vue'
+
 
 /** CRM 方案报价 表单 */
 defineOptions({ name: 'QuotationForm' })

src/views/crm/quotation/QuotationForm.vue

@@ -421,7 +421,7 @@ import * as DeptApi from '@/api/system/dept'
 import * as BusinessApi from '@/api/crm/business'
 import { propTypes } from '@/utils/propTypes'
 import { useUserStore } from '@/store/modules/user';
-import  SelectComponent  from '@/components/SelectCustomer/src/index.vue'
+
 
 /** CRM 方案报价 表单 */
 defineOptions({ name: 'QuotationForm' })

src/views/crm/quotation/index.vue

@@ -273,7 +273,7 @@ import * as UserApi from '@/api/system/user'
 import * as DeptApi from '@/api/system/dept'
 import { TabsPaneContext } from 'element-plus'
 import { checkPermi } from '@/utils/permission'
-import  SelectComponent  from '@/components/SelectCustomer/src/index.vue'
+// 
 
 /** CRM 方案报价 列表 */
 defineOptions({ name: 'Quotation' })
@@ -440,11 +440,11 @@ const openCustomerDetail = (id: number) => {
 
 /** 初始化 **/
 onMounted(async () => {
-  getList()
   // 获得客户列表
   customerList.value = await CustomerApi.getCustomerSimpleList()
   // 获得用户列表
   userOptions.value = await UserApi.getSimpleUserList()
+  getList()
 })
 onActivated(()=>{
   getList()