diff --git a/src/components/SelectCustomer/index.ts b/src/components/SelectCustomer/index.ts
index d947ffb5a..863ea5626 100644
--- a/src/components/SelectCustomer/index.ts
+++ b/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 }
diff --git a/src/components/SelectCustomer/src/index.vue b/src/components/SelectCustomer/src/index.vue
index 5c1689012..e52b332aa 100644
--- a/src/components/SelectCustomer/src/index.vue
+++ b/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,46 +45,73 @@ 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)
}, { deep: true })
let pageNo = ref(1)
-let pageSize = ref(10)
-
+let pageSize = ref(10)
+let selectRef = ref('')
+let selectComId = ref('popper' + (Math.random().toFixed(5) * 100000))
const vElSelectLoadmore = {
- beforeMount(el, binding) {
- let selectDom = null;
- nextTick(() => {
- selectDom = document.querySelector('.event-select-poper .el-select-dropdown__wrap');
- if (selectDom) {
- const loadMores = function () {
- if (this.scrollHeight - this.scrollTop <= this.clientHeight + 20) {
- binding.value && binding.value();
- }
- };
- el.selectLoadMore = loadMores;
- selectDom.addEventListener('scroll', loadMores.bind(selectDom));
+ mounted(el, binding) {
+ selectRef.value = el
+ console.log('%csrc/components/SelectCustomer/src/index.vue:63 el,444', 'color: #007acc;', el,444);
+ const scrollHandler = function() {
+ if (this.scrollHeight - this.scrollTop <= this.clientHeight + 20) {
+ binding.value && binding.value()
}
- });
- },
- 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(() => {
diff --git a/src/plugins/formCreate/index.ts b/src/plugins/formCreate/index.ts
index 81a1540d8..0305c05f5 100644
--- a/src/plugins/formCreate/index.ts
+++ b/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,
diff --git a/src/views/crm/business/BusinessForm.vue b/src/views/crm/business/BusinessForm.vue
index 9971d6543..85534baab 100644
--- a/src/views/crm/business/BusinessForm.vue
+++ b/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();
diff --git a/src/views/crm/business/index.vue b/src/views/crm/business/index.vue
index 252e38627..8238a6920 100644
--- a/src/views/crm/business/index.vue
+++ b/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'
diff --git a/src/views/crm/contact/ContactForm.vue b/src/views/crm/contact/ContactForm.vue
index 9c1d03eb2..99b226b40 100644
--- a/src/views/crm/contact/ContactForm.vue
+++ b/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() // 消息弹窗
diff --git a/src/views/crm/contact/index.vue b/src/views/crm/contact/index.vue
index 5a6d37555..58a83866d 100644
--- a/src/views/crm/contact/index.vue
+++ b/src/views/crm/contact/index.vue
@@ -12,22 +12,8 @@
label-width="68px"
>
-
-
-
+
+
-->
-
-
+
+
{
/** 初始化 **/
onMounted(async () => {
- getList()
// 获得客户列表
customerList.value = await CustomerApi.getCustomerSimpleList()
// 获得用户列表
userOptions.value = await UserApi.getSimpleUserList()
+ getList()
})
onActivated(()=>{
getList()