Browse Source

reactor:事件分类选择问题修复;

zhangchong 10 months ago
parent
commit
44a25f6d46

+ 228 - 219
src/components/Hotspot/event.vue

@@ -1,275 +1,284 @@
 <template>
-  <el-select
-    v-model="state.id"
-    :disabled="props.disabled"
-    :placeholder="props.placeholder"
-    ref="selectRef"
-    :clearable="props.clearable"
-    @clear="clear"
-    :filterable="props.filterable"
-    :filter-method="filterMethod"
-  >
-    <template #default>
-      <el-option hidden key="id" :value="state.id" :label="state.name"> </el-option>
-      <el-tree
-        node-key="id"
-        :load="loadNode"
-        lazy
-        v-if="lazyShow"
-        :props="treeProps"
-        :filter-node-method="filterNode"
-        @node-click="nodeClick"
-        :default-expanded-keys="state.externalArr"
-        v-loading="loading"
-        highlight-current
-        check-strictly
-        ref="treeRef"
-        :show-checkbox="props.showCheckbox"
-        @check="checkChange"
-        check-on-click-node
-        :expand-on-click-node="expandOnClickNode"
-      />
-      <el-tree
-        ref="treeRef"
-        :data="state.treeData"
-        node-key="id"
-        v-else
-        default-expand-all
-        highlight-current
-        :props="treeProps"
-        v-loading="loading"
-        :filter-node-method="filterNode"
-        @node-click="nodeClick"
-        check-strictly
-        :show-checkbox="props.showCheckbox"
-        @check="checkChange"
-        check-on-click-node
-      />
-    </template>
-    <template #footer v-if="props.showCheckbox">
-      <div class="flex-end">
-        <el-button type="primary" @click="chooseHotSpot" size="small">确定</el-button>
-        <el-button @click="reset" size="small">重置</el-button>
-      </div>
-    </template>
-  </el-select>
+	<el-select
+		v-model="state.id"
+		:disabled="props.disabled"
+		:placeholder="props.placeholder"
+		ref="selectRef"
+		:clearable="props.clearable"
+		@clear="clear"
+		:filterable="props.filterable"
+		:filter-method="filterMethod"
+	>
+		<template #default>
+			<el-option hidden key="id" :value="state.id" :label="state.name"> </el-option>
+			<el-tree
+				node-key="id"
+				:load="loadNode"
+				lazy
+				v-if="lazyShow"
+				:props="treeProps"
+				:filter-node-method="filterNode"
+				@node-click="nodeClick"
+				:default-expanded-keys="state.externalArr"
+				v-loading="loading"
+				highlight-current
+				check-strictly
+				ref="treeRef"
+				:show-checkbox="props.showCheckbox"
+				@check="checkChange"
+				check-on-click-node
+				:expand-on-click-node="expandOnClickNode"
+			/>
+			<el-tree
+				ref="treeRef"
+				:data="state.treeData"
+				node-key="id"
+				v-else
+				default-expand-all
+				highlight-current
+				:props="treeProps"
+				v-loading="loading"
+				:filter-node-method="filterNode"
+				@node-click="nodeClick"
+				check-strictly
+				:show-checkbox="props.showCheckbox"
+				@check="checkChange"
+				check-on-click-node
+			/>
+		</template>
+		<template #footer v-if="props.showCheckbox">
+			<div class="flex-end">
+				<el-button type="primary" @click="chooseHotSpot" size="small">确定</el-button>
+				<el-button @click="reset" size="small">重置</el-button>
+			</div>
+		</template>
+	</el-select>
 </template>
 <script setup lang="ts">
-import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
+import { computed, reactive, ref, watch } from 'vue';
 import { removeDuplicate } from '@/utils/arrayOperation';
 import { treeEventClass, treeEventClassSearch } from '@/api/auxiliary/eventClass';
 
 const props = defineProps({
-  modelValue: {
-    type: [String, Array],
-    default: () => '',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    default: '请选择',
-  },
-  externalArr: {
-    // 外部传入的父级id数组 懒加载时使用
-    type: Array,
-    default: () => [],
-  },
-  showCheckbox: {
-    // 是否显示多选
-    type: Boolean,
-    default: false,
-  },
-  clearable: {
-    type: Boolean,
-    default: false,
-  },
-  checkStrictly: {
-    // 任意一级
-    type: Boolean,
-    default: false,
-  },
-  filterable: {
-    type: Boolean,
-    default: true,
-  },
+	modelValue: {
+		type: [String, Array],
+		default: () => '',
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	placeholder: {
+		type: String,
+		default: '请选择',
+	},
+	externalArr: {
+		// 外部传入的父级id数组 懒加载时使用
+		type: Array,
+		default: () => [],
+	},
+	showCheckbox: {
+		// 是否显示多选
+		type: Boolean,
+		default: false,
+	},
+	clearable: {
+		type: Boolean,
+		default: false,
+	},
+	checkStrictly: {
+		// 任意一级
+		type: Boolean,
+		default: false,
+	},
+	filterable: {
+		type: Boolean,
+		default: true,
+	},
 } as any);
 // 选择节点展开
 const expandOnClickNode = computed(() => {
-  return !props.checkStrictly;
+	return !props.checkStrictly;
 });
 const treeProps = computed(() => {
-  return {
-    label: 'eventFullName',
-    children: 'children',
-    isLeaf: 'hasChild',
-  };
+	return {
+		label: 'eventFullName',
+		children: 'children',
+		isLeaf: 'hasChild',
+	};
 });
 
 const emit = defineEmits(['choose', 'update:modelValue', 'confirm']);
 
 const state = reactive<any>({
-  id: '',
-  name: '',
-  treeData: [],
-  externalArr: [],
-  external: [],
-  checkedKeys: [],
-  checkNodes: [],
+	id: '',
+	name: '',
+	treeData: [],
+	externalArr: [],
+	external: [],
+	checkedKeys: [],
+	checkNodes: [],
 });
 
 watch(
-  () => props.externalArr,
-  (val) => {
-    if (val) {
-      state.externalArr = val;
-    }
-  },
-  { immediate: true }
+	() => props.externalArr,
+	(val) => {
+		if (val) {
+			state.externalArr = val;
+		}
+	},
+	{ immediate: true }
 );
 
 const lazyShow = ref(true);
 const loading = ref(false);
+const childValue = computed({
+	get: () => props.modelValue,
+	set: (val) => emit('update:modelValue', val),
+});
+watch(
+	() => props.modelValue,
+	(val) => {
+		childValue.value = val;
+	},
+	{ immediate: true }
+);
 // 懒加载
 const treeRef = ref<RefType>();
 const loadNode = async (node: any, resolve: any) => {
-  await nextTick();
-  if (node.isLeaf) return resolve([]);
-  const { showCheckbox, modelValue } = props;
-  try {
-    loading.value = true;
-    const { result } = await treeEventClass({ id: node.data.id ? node.data.id : null });
-    resolve(result);
-    state.id = modelValue;
-    console.log('子组件',modelValue)
-    if (showCheckbox) {
-      treeRef.value.setCheckedKeys(modelValue);
-      const nodes = treeRef.value.getCheckedNodes();
-      state.name = nodes.map((item: any) => item.eventFullName).join(',') ?? '';
-    } else {
-      treeRef.value.setCurrentKey(modelValue);
-      const currentNode = treeRef.value.getNode(modelValue);
-       state.name = currentNode.data.eventFullName;
-    }
-    loading.value = false;
-  } catch (e) {
-    loading.value = false;
-  }
+	if (node.isLeaf) return resolve([]);
+	const { showCheckbox } = props;
+	try {
+		loading.value = true;
+		const { result } = await treeEventClass({ id: node.data.id ? node.data.id : null });
+		resolve(result);
+		state.id = childValue.value;
+		if (showCheckbox) {
+			treeRef.value.setCheckedKeys(childValue.value);
+			const nodes = treeRef.value.getCheckedNodes();
+			state.name = nodes.map((item: any) => item.eventFullName).join(',') ?? '';
+		} else {
+			treeRef.value.setCurrentKey(childValue.value);
+			const currentNode = treeRef.value.getNode(childValue.value);
+			state.name = currentNode.data.eventFullName;
+		}
+		loading.value = false;
+	} catch (e) {
+		loading.value = false;
+	}
 };
 // 搜索
 const filterMethod = (value: string) => {
-  if (value) {
-    lazyShow.value = false; //当输入框有值时关闭懒加载
-    loading.value = true;
-    treeEventClassSearch(value)
-      .then((res) => {
-        //获取后端搜索的数据 	//selectMacTree是我自己的后端接口,你们换成自己的
-        state.treeData.length = 0;
-        state.treeData = res.result ?? [];
-        treeRef.value!.filter(value);
-        if (props.showCheckbox && state.checkedKeys.length) {
-          treeRef.value.setCheckedKeys(state.checkedKeys);
-        }
-        if (props.modelValue) {
-          setTimeout(() => {
-            treeRef.value.setCurrentKey(props.modelValue);
-          }, 100);
-        }
-        loading.value = false;
-      })
-      .catch((e) => {
-        loading.value = false;
-      });
-  } else if (value == '' || value == ' ' || value == null) {
-    lazyShow.value = true; // 懒加载树显示
-  }
+	if (value) {
+		lazyShow.value = false; //当输入框有值时关闭懒加载
+		loading.value = true;
+		treeEventClassSearch(value)
+			.then((res) => {
+				//获取后端搜索的数据 	//selectMacTree是我自己的后端接口,你们换成自己的
+				state.treeData.length = 0;
+				state.treeData = res.result ?? [];
+				treeRef.value!.filter(value);
+				if (props.showCheckbox && state.checkedKeys.length) {
+					treeRef.value.setCheckedKeys(state.checkedKeys);
+				}
+				if (childValue.value) {
+					setTimeout(() => {
+						treeRef.value.setCurrentKey(childValue.value);
+					}, 100);
+				}
+				loading.value = false;
+			})
+			.catch((e) => {
+				loading.value = false;
+			});
+	} else if (value == '' || value == ' ' || value == null) {
+		lazyShow.value = true; // 懒加载树显示
+	}
 };
 // 查询
 const filterNode = (value: string, data: any) => {
-  if (!value) return true;
-  return data.hotSpotFullName.includes(value);
+	if (!value) return true;
+	return data.hotSpotFullName.includes(value);
 };
 // 单选
 const selectRef = ref<RefType>();
 const nodeClick = async (val: any, node: any) => {
-  const { showCheckbox, checkStrictly } = props;
-  if (showCheckbox) return;
-  if (checkStrictly) {
-    state.externalArr = [];
-    state.external = [];
-    state.externalArr = getParentId(node, state.external);
-    state.name = val.eventFullName;
-    state.id = val.id;
-    emit('update:modelValue', val.id);
-    emit('choose', { externalArr: state.externalArr, ...val });
-    selectRef.value.blur();
-  }
-  if (!node?.isLeaf) return;
-  state.externalArr = [];
-  state.external = [];
-  state.externalArr = getParentId(node, state.external);
-   state.name = val.eventFullName;
-  state.id = val.id;
-  emit('update:modelValue', val.id);
-  emit('choose', { externalArr: state.externalArr, ...val });
-  selectRef.value.blur();
+	const { showCheckbox, checkStrictly } = props;
+	if (showCheckbox) return;
+	if (checkStrictly) {
+		state.externalArr = [];
+		state.external = [];
+		state.externalArr = getParentId(node, state.external);
+		state.name = val.eventFullName;
+		state.id = val.id;
+		emit('update:modelValue', val.id);
+		emit('choose', { externalArr: state.externalArr, ...val });
+		selectRef.value.blur();
+	}
+	if (!node?.isLeaf) return;
+	state.externalArr = [];
+	state.external = [];
+	state.externalArr = getParentId(node, state.external);
+	state.name = val.eventFullName;
+	state.id = val.id;
+	emit('update:modelValue', val.id);
+	emit('choose', { externalArr: state.externalArr, ...val });
+	selectRef.value.blur();
 };
 // 多选
 const checkChange = (val: any, e: any) => {
-  const { showCheckbox } = props;
-  if (!showCheckbox) return;
-  const current = treeRef.value.getNode(val);
-  state.checkedKeys = e.checkedKeys;
-  state.checkedNodes = e.checkedNodes;
-  state.id = e.checkedKeys;
-   state.name = e.checkedNodes.map((item: any) => item.eventFullName).join(',') ?? '';
-  if (props.externalArr.length) {
-    state.externalArr = props.externalArr.concat(getParentId(current, state.external));
-  } else {
-    state.externalArr = getParentId(current, state.external);
-  }
-  emit('choose', state.checkedKeys, state.checkedNodes, state.externalArr);
-  emit('update:modelValue', e.checkedKeys);
+	const { showCheckbox } = props;
+	if (!showCheckbox) return;
+	const current = treeRef.value.getNode(val);
+	state.checkedKeys = e.checkedKeys;
+	state.checkedNodes = e.checkedNodes;
+	state.id = e.checkedKeys;
+	state.name = e.checkedNodes.map((item: any) => item.eventFullName).join(',') ?? '';
+	if (props.externalArr.length) {
+		state.externalArr = props.externalArr.concat(getParentId(current, state.external));
+	} else {
+		state.externalArr = getParentId(current, state.external);
+	}
+	emit('choose', state.checkedKeys, state.checkedNodes, state.externalArr);
+	emit('update:modelValue', e.checkedKeys);
 };
 // 多选确定
 const chooseHotSpot = () => {
-  emit('confirm', state.checkedKeys, state.checkedNodes, state.externalArr);
-  selectRef.value.blur();
+	emit('confirm', state.checkedKeys, state.checkedNodes, state.externalArr);
+	selectRef.value.blur();
 };
 // 重置
 const reset = () => {
-  state.checkedKeys = [];
-  treeRef.value.setCheckedKeys([]);
-  state.name = '';
-  emit('update:modelValue', []);
+	state.checkedKeys = [];
+	treeRef.value.setCheckedKeys([]);
+	state.name = '';
+	emit('update:modelValue', []);
 };
 // 递归查找父级Id
 const getParentId = (val: any, arr: string[]) => {
-  if (val.data.parentId) {
-    arr.push(val.data.parentId);
-    getParentId(val.parent, arr);
-  }
-  return removeDuplicate(arr);
+	if (val.data.parentId) {
+		arr.push(val.data.parentId);
+		getParentId(val.parent, arr);
+	}
+	return removeDuplicate(arr);
 };
 // 清空
 const clear = () => {
-  if (props.showCheckbox) {
-    state.checkedKeys = [];
-    treeRef.value.setCheckedKeys([]);
-    state.name = '';
-    state.id = [];
-    emit('update:modelValue', []);
-  } else {
-    state.id = '';
-    state.name = '';
-    treeRef.value.setCurrentKey(null);
-    emit('update:modelValue', '');
-  }
+	if (props.showCheckbox) {
+		state.checkedKeys = [];
+		treeRef.value.setCheckedKeys([]);
+		state.name = '';
+		state.id = [];
+		emit('update:modelValue', []);
+	} else {
+		state.id = '';
+		state.name = '';
+		treeRef.value.setCurrentKey(null);
+		emit('update:modelValue', '');
+	}
 };
 defineExpose({
-  reset,
-  clear,
+	reset,
+	clear,
 });
 </script>

+ 19 - 9
src/components/Hotspot/index.vue

@@ -55,10 +55,9 @@
 	</el-select>
 </template>
 <script setup lang="ts">
-import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
+import { computed, nextTick, reactive, ref, watch } from "vue";
 import { hotSpotSearch, hotSpotType } from '@/api/business/order';
 import { removeDuplicate } from '@/utils/arrayOperation';
-import { treeEventClass, treeEventClassSearch } from '@/api/auxiliary/eventClass';
 
 const props = defineProps({
 	modelValue: {
@@ -133,24 +132,35 @@ watch(
 
 const lazyShow = ref(true);
 const loading = ref(false);
+const childValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+watch(
+  () => props.modelValue,
+  (val) => {
+    childValue.value = val;
+  },
+  { immediate: true }
+);
 // 懒加载
 const treeRef = ref<RefType>();
 const loadNode = async (node: any, resolve: any) => {
   await nextTick();
 	if (node.isLeaf) return resolve([]);
-	const { showCheckbox, modelValue } = props;
+	const { showCheckbox } = props;
 	try {
 		loading.value = true;
 		const { result } = await hotSpotType({ id: node.data.id ? node.data.id : null });
 		resolve(result);
-		state.id = modelValue;
+		state.id = childValue.value;
 		if (showCheckbox) {
-			treeRef.value.setCheckedKeys(modelValue);
+			treeRef.value.setCheckedKeys(childValue.value);
 			const nodes = treeRef.value.getCheckedNodes();
 			state.name = nodes.map((item: any) => item.hotSpotFullName).join(',') ?? '';
 		} else {
-			treeRef.value.setCurrentKey(modelValue);
-			const currentNode = treeRef.value.getNode(modelValue);
+			treeRef.value.setCurrentKey(childValue.value);
+			const currentNode = treeRef.value.getNode(childValue.value);
 			state.name = currentNode.data.hotSpotFullName;
 		}
 		loading.value = false;
@@ -172,9 +182,9 @@ const filterMethod = (value: string) => {
 				if (props.showCheckbox && state.checkedKeys.length) {
 					treeRef.value.setCheckedKeys(state.checkedKeys);
 				}
-				if (props.modelValue) {
+				if (childValue.value) {
 					setTimeout(() => {
-						treeRef.value.setCurrentKey(props.modelValue);
+						treeRef.value.setCurrentKey(childValue.value);
 					}, 100);
 				}
 				loading.value = false;

+ 4 - 3
src/layout/navBars/breadcrumb/telControl.vue

@@ -845,6 +845,7 @@ const onConnect = () => {
 		// 普通模式才链接语音助手
 		connectVoiceAssistant(currentTel.value.telNo); // 坐席助手开启
 	}
+  // isReconnect.value = true;
 };
 // 业务系统发送消息
 const sendMsg = (msg: any) => {
@@ -1406,13 +1407,13 @@ const offDutyFn = () => {
 	})
 		.then(() => {
 			state.loading = true;
+			isReconnect.value = false;
 			dutyOff()
 				.then(() => {
 					console.log('业务系统:签出成功');
 					sendMsg('logout');
 					ola.logout(currentTel.value.telNo); //签出
 					state.dutyOnSrc = getImageUrl('phoneControls/dutyOn_blue.png'); //签入图片
-					isReconnect.value = false;
 					setTimeout(() => {
 						ola.close();
 					}, 500);
@@ -1440,6 +1441,7 @@ const onCallOut = () => {
 	})
 		.then(() => {
 			state.loading = true;
+			isReconnect.value = false;
 			switchMode({ isCallOut: true })
 				.then(() => {
 					ola.logout(currentTel.value.telNo);
@@ -1451,7 +1453,6 @@ const onCallOut = () => {
 					useTelStatusStore.setPhoneControlState(TelStates.onCallOut);
 					getTelStatusFn();
 					seatAssistOff(); // 关闭坐席辅助
-					isReconnect.value = false;
 					state.loading = false;
 				})
 				.catch(() => {
@@ -1472,6 +1473,7 @@ const onUnCallOut = () => {
 	})
 		.then(() => {
 			state.loading = true;
+			isReconnect.value = false;
 			switchMode({ isCallOut: false })
 				.then(() => {
 					ola.logout(currentTel.value.telNo);
@@ -1483,7 +1485,6 @@ const onUnCallOut = () => {
 					useTelStatusStore.setPhoneControlState(TelStates.dutyOn);
 					state.loading = false;
 					getTelStatusFn();
-					isReconnect.value = false;
 				})
 				.catch(() => {
 					state.loading = false;

+ 0 - 1
src/views/todo/seats/accept/index.vue

@@ -1220,7 +1220,6 @@ const loadForm = async () => {
 			dicDataValue: state.ruleForm.transpondCityValue,
 			dicDataName: state.ruleForm.transpondCityName,
 		};
-    console.log('父组件',state.ruleForm.eventCategoryId)
 	}
 };
 // 加载省市区