Merge branch 'dev' of https://git.citupro.com/zhengnaiwen_citu/menduner into dev

src/components/FormUI/TextInput/index.vue

@@ -32,6 +32,7 @@
   </div>
 </template>
 <script setup>
+import { debounce } from 'lodash'
 import { defineEmits, ref, watch } from 'vue';
 defineOptions({ name:'FormUI-v-text-field'})
 
@@ -39,6 +40,7 @@ const props = defineProps({item: Object, modelValue: [String, Number]})
 const emit = defineEmits(['update:modelValue', 'change', 'appendClick', 'appendInnerClick', 'enter'])
 const item = props.item
 const value = ref(props.modelValue)
+const searchDebouncedTime = item?.searchDebouncedTime === 0 ? ref(0) : ref(500)
 
 watch(() => props.modelValue, (newVal) => {
   value.value = newVal
@@ -46,8 +48,12 @@ watch(() => props.modelValue, (newVal) => {
 const modelValueUpDate = (val) => {
   value.value = val
   emit('update:modelValue', value.value)
-  emit('change', value.value)
+  debouncedCallbackUpDate(value.value) // emit('change', value.value)
 }
+const debouncedCallbackUpDate = debounce(newValue => {
+  emit('change', newValue)
+}, searchDebouncedTime.value)
+
 const appendClick = () => {
   if (item.appendClick) item.appendClick()
   emit('appendClick', value.value)

src/locales/en.js

@@ -37,6 +37,7 @@ export default {
     clearSelectedLocation: 'Clear Selected Location',
     Unrestricted: 'Unrestricted',
     other: 'Other',
+    pleaseSelect: 'Please select',
   },
   sys: {
     api: {

src/locales/zh-CN.js

@@ -37,6 +37,7 @@ export default {
     clearSelectedLocation: '清空已选位置',
     Unrestricted: '不限',
     other: '其他',
+    pleaseSelect: '请选择',
   },
   sys: {
     api: {

src/views/recruit/position/components/areaCascader/index.vue

@@ -14,7 +14,7 @@
           >{{ item.name }}</span>
         </span>
         <!-- 其他 -->
-        <span v-if="list?.length > num" class="mx-3" style="line-height: 32px;">{{ $t('common.other') }}</span>
+        <span v-if="list?.length > num" class="mx-3" style="line-height: 32px;" @click="handleShowOther({ list, index: levelIndex })">{{ $t('common.other') }}</span>
       </div>
       <!-- 多选级别 -->
       <div v-else class="embedded">
@@ -28,8 +28,26 @@
       </div>
     </div>
   </div>
+  <!-- 其他-弹窗 -->
+  <CtDialog :visible="showDialog" :footer="false" :widthType="0" :title="$t('common.pleaseSelect')" @close="showDialog = false">
+    <div style="min-height: 450px;overflow: auto;">
+      <textUI
+        :modelValue="areaSearch.value"
+        :item="areaSearch"
+        v-bind="props"
+        class="mt-3"
+        style="position: relative;"
+        @change="areaSearchChange"
+      ></textUI>
+      <div class="otherAreaBox d-flex flex-wrap">
+        <div v-for="item in otherAreaList" :key="item.id" @click="handleOtherClick(item)">{{ item.name }}</div>
+      </div>
+    </div>
+  </CtDialog>
 </template>
 <script setup>
+import CtDialog from '@/components/CtDialog'
+import textUI from '@/components/FormUI/TextInput'
 import { getDict } from '@/hooks/web/useDictionaries'
 import { inject, reactive, ref } from 'vue'
 defineOptions({ name:'common-components-areaTree'})
@@ -145,6 +163,31 @@ const clear = (list, levelIndex) => {
   idChecked.splice(levelIndex, idChecked.length) // 清除本级选中及其下级选中
   emits('checkedInput', idChecked)
 }
+
+// 弹窗
+const showDialog = ref(false)
+const dialogData = ref({})
+const otherAreaList = ref([])
+// const keyWord = ref('')
+const handleShowOther = ({ list, index }) => {
+  dialogData.value = { list, index }
+  otherAreaList.value = [...dialogData.value.list]
+  showDialog.value = true
+}
+const areaSearchChange = (val) => {
+  if (val) otherAreaList.value = dialogData.value.list.filter(e => e.name.includes(val))
+  else otherAreaList.value = [...dialogData.value.list]
+}
+const handleOtherClick = (item) => {
+  handleNext({ item, index: dialogData.value.index })
+  showDialog.value = false
+}
+const areaSearch = ref({
+  type: 'text',
+  key: 'name',
+  value: '',
+  label: '请输入关键字',
+})
 </script>
 <style lang="scss" scoped>
 .text666 {
@@ -178,4 +221,19 @@ span {
     }
   }
 }
+.otherAreaBox {
+  padding: 4px;
+  // background-color: #f8f8f8;
+  border-radius: 5px;
+  width: 100%; /* 设置容器宽度 */
+  div {
+    cursor: pointer;
+    // line-height: 40px;
+    margin: 0 16px 12px;
+    font-size: 14px;
+    &:hover {
+      color: var(--v-primary-lighten2);
+    }
+  }
+}
 </style>