Merge branch 'addwork' of http://47.97.125.165:8902/jiangs/lis8.0-vue3 into addwork

src/views/liswork/work/components/DictInput.vue

@@ -9,6 +9,7 @@
         @clear="handleClear"
         @dblclick="handleDblClick"
     >
+<<<<<<< HEAD
       <template #prefix>
         <el-icon v-if="isDictLoading" size="16"><Loading /></el-icon>
       </template>
@@ -51,6 +52,55 @@
           </template>
         </el-table-column>
       </el-table>
+=======
+    <template #prefix>
+      <el-icon v-if="isDictLoading" size="16"><Loading /></el-icon>
+    </template>
+    <template #suffix>
+      <el-icon @click="openDictSelector" size="16" class="select-icon">
+        <ArrowDown />
+      </el-icon>
+    </template>
+    </el-input>
+
+    <!-- 字典选择弹窗（Vue3 中使用 v-model 控制显示） -->
+    <el-dialog
+        v-model="dialogVisible"
+    :title="dialogTitle"
+    width="500px"
+    @close="handleDialogClose"
+    >
+    <el-input
+        v-model="searchKey"
+        placeholder="搜索字典项..."
+        class="mb-4"
+        clearable
+        @clear="filterDictData"
+        @input="filterDictData"
+    />
+
+    <el-table
+        :data="filteredDictData"
+        height="300px"
+        border
+        @row-click="selectItem"
+    @row-dblclick="selectItem"
+    >
+    <el-table-column prop="value" label="编码" width="100" />
+    <el-table-column prop="label" label="名称" width="200" />
+    <el-table-column label="操作" width="100">
+      <template #default="scope">
+        <el-button
+            size="small"
+            type="primary"
+            @click="selectItem(scope.row)"
+        >
+          选择
+        </el-button>
+      </template>
+    </el-table-column>
+    </el-table>
+>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
     </el-dialog>
   </div>
 </template>
@@ -59,6 +109,7 @@
 import { ref, computed, watch, onMounted } from 'vue';
 import { Loading, ArrowDown } from '@element-plus/icons-vue';
 
+<<<<<<< HEAD
 import { getFirstLetter } from '@/api/pinyin.js'; // 引入拼音处理工具
 // 组件参数
 const props = defineProps({
@@ -89,6 +140,64 @@ const displayValue = computed({
     return labelValue.value || tempValue.value || props.modelValue || '';
   },
   set(newValue) {
+=======
+// 组件参数（Vue3 语法）
+const props = defineProps({
+  modelValue: { // 双向绑定的原始值
+    type: [String, Number],
+    default: ''
+  },
+  dictType: { // 字典类型
+    type: String,
+    required: true
+  },
+  placeholder: {
+    type: String,
+    default: '请输入或双击选择'
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  fetchDict: { // 获取字典的方法（需返回 Promise）
+    type: Function,
+    required: true
+  },
+  dialogTitle: {
+    type: String,
+    default: '选择字典项'
+  }
+});
+
+// 组件事件（Vue3 语法）
+const emit = defineEmits([
+  'update:modelValue', // 同步原始值
+  'update:labelValue', // 同步标签值
+  'select' // 选中事件
+]);
+
+// 内部状态（Vue3 ref 响应式）
+const tempValue = ref(''); // 临时输入值
+const labelValue = ref(''); // 映射后的标签
+const dictData = ref([]); // 完整字典数据
+const filteredDictData = ref([]); // 过滤后的字典数据
+const isDictLoading = ref(true); // 字典加载状态
+const dialogVisible = ref(false); // 弹窗显示状态
+const searchKey = ref(''); // 搜索关键词
+
+// 显示值计算（Vue3 computed）
+const displayValue = computed({
+  get() {
+    // 优先显示标签，无则显示原始值
+    return labelValue.value || tempValue.value || props.modelValue || '';
+  },
+  set(newValue) {
+    // 用户输入时更新临时值，并清除旧标签
+>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
     tempValue.value = newValue;
     if (labelValue.value && newValue !== labelValue.value) {
       labelValue.value = '';
@@ -97,6 +206,7 @@ const displayValue = computed({
   }
 });
 
+<<<<<<< HEAD
 
 
 // 加载字典数据（并添加简拼字段）
@@ -111,6 +221,16 @@ const loadDictData = async () => {
     }));
 
     filteredDictData.value = [...dictData.value];
+=======
+// 加载字典数据
+const loadDictData = async () => {
+  try {
+    isDictLoading.value = true;
+    // 调用父组件传入的字典获取方法
+    const data = await props.fetchDict(props.dictType);
+    dictData.value = data || [];
+    filteredDictData.value = [...dictData.value]; // 初始化过滤数据
+>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
   } catch (error) {
     console.error(`加载${props.dictType}字典失败:`, error);
     dictData.value = [];
@@ -120,6 +240,7 @@ const loadDictData = async () => {
   }
 };
 
+<<<<<<< HEAD
 // 核心搜索逻辑（支持模糊搜索+简拼搜索）
 const filterDictData = () => {
   const key = searchKey.value.trim().toLowerCase();
@@ -139,11 +260,28 @@ const filterDictData = () => {
     // 满足任一条件即匹配
     return matchLabel || matchValue || matchPinyin;
   });
+=======
+// 过滤字典数据（搜索功能）
+const filterDictData = () => {
+  if (!searchKey.value) {
+    filteredDictData.value = [...dictData.value];
+    return;
+  }
+  const key = searchKey.value.toLowerCase();
+  filteredDictData.value = dictData.value.filter(item =>
+      item.label.toLowerCase().includes(key) ||
+      String(item.value).toLowerCase().includes(key)
+  );
+>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
 };
 
 // 双击事件处理
 const handleDblClick = () => {
   if (!props.disabled && !isDictLoading.value) {
+<<<<<<< HEAD
+=======
+    console.log('双击触发弹窗');
+>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
     dialogVisible.value = true;
   }
 };
@@ -152,13 +290,19 @@ const handleDblClick = () => {
 const openDictSelector = () => {
   if (!props.disabled && !isDictLoading.value) {
     dialogVisible.value = true;
+<<<<<<< HEAD
     searchKey.value = '';
     filterDictData();
+=======
+    searchKey.value = ''; // 重置搜索
+    filterDictData(); // 重置过滤
+>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
   }
 };
 
 // 选择字典项
 const selectItem = (item) => {
+<<<<<<< HEAD
   emit('update:modelValue', item.value);
   emit('update:labelValue', item.label);
   emit('select', item);
@@ -172,10 +316,60 @@ const handleBlur = () => { /* ... */
 };
 const handleClear = () => { /* ... */
 };
+=======
+  // 同步原始值和标签值到父组件
+  emit('update:modelValue', item.value);
+  emit('update:labelValue', item.label);
+  emit('select', item); // 触发选中事件
+
+  // 更新内部状态
+  tempValue.value = item.value;
+  labelValue.value = item.label;
+
+  // 关闭弹窗
+  dialogVisible.value = false;
+};
+
+// 失焦时自动映射
+const handleBlur = () => {
+  const value = tempValue.value.trim() || props.modelValue;
+  if (!value) {
+    emit('update:modelValue', '');
+    emit('update:labelValue', '');
+    labelValue.value = '';
+    tempValue.value = '';
+    return;
+  }
+
+  // 查找匹配的字典项
+  const matched = dictData.value.find(
+      item => String(item.value) === String(value)
+  );
+
+  if (matched) {
+    emit('update:labelValue', matched.label);
+    labelValue.value = matched.label;
+  } else {
+    emit('update:labelValue', value); // 无匹配时用原始值
+    labelValue.value = value;
+  }
+};
+
+// 清空输入
+const handleClear = () => {
+  tempValue.value = '';
+  labelValue.value = '';
+  emit('update:modelValue', '');
+  emit('update:labelValue', '');
+};
+
+// 关闭弹窗
+>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
 const handleDialogClose = () => {
   dialogVisible.value = false;
 };
 
+<<<<<<< HEAD
 // 监听初始值变化
 watch(() => props.modelValue, (newVal) => {
   tempValue.value = newVal || '';
@@ -185,6 +379,26 @@ watch(() => props.modelValue, (newVal) => {
     emit('update:labelValue', labelValue.value);
   }
 }, {immediate: true});
+=======
+// 监听父组件传入的初始值
+watch(
+    () => props.modelValue,
+    (newVal) => {
+      if (newVal === tempValue.value) return; // 避免重复更新
+      tempValue.value = newVal || '';
+
+      // 初始值自动映射标签
+      if (newVal && !isDictLoading.value) {
+        const matched = dictData.value.find(
+            item => String(item.value) === String(newVal)
+        );
+        labelValue.value = matched?.label || newVal;
+        emit('update:labelValue', labelValue.value);
+      }
+    },
+    { immediate: true } // 初始化时执行一次
+);
+>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
 
 // 组件挂载时加载字典
 onMounted(async () => {
@@ -193,7 +407,10 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+<<<<<<< HEAD
 /* 样式保持不变 */
+=======
+>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
 .dict-input-wrapper {
   position: relative;
 }
@@ -202,12 +419,23 @@ onMounted(async () => {
   cursor: pointer;
   color: #666;
   margin-left: 5px;
+<<<<<<< HEAD
 }
 
 .select-icon:hover {
   color: #409eff;
 }
 
+=======
+  transition: color 0.2s;
+}
+
+.select-icon:hover {
+  color: #409eff; /* 鼠标悬停变色 */
+}
+
+/* 修复输入框后缀图标与清除按钮的间距 */
+>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
 :deep(.el-input__suffix) {
   gap: 4px;
 }