@jzt-packages/components 1.0.0

package/src/JztSearchForm/components/SearchFormItem.vue

@@ -0,0 +1,473 @@
+<template>
+  <div class="flx-left-center" style="width: 100%">
+    <div v-if="queryItem.search?.el && !queryItem.search?.el.includes('el-')" style="width: 100%">
+      <!-- JztNumericalRange JztDateType JztDateSelect-->
+      <component
+        :is="CusComponent[queryItem.search?.el]"
+        v-bind="{
+          ...handleSearchProps,
+          ...placeholder,
+          searchParam: _searchParam,
+          clearable,
+          filterable,
+          searchProp: queryItem.search
+        }"
+        v-model.trim="_searchParam[queryItem.search?.key ?? handleProp(queryItem.prop!)]"
+        :queryItem="queryItem"
+        style="width: 100%"
+      ></component>
+    </div>
+    <div v-else-if="queryItem.search?.props?.showValue" class="sle">
+      {{ showParam?.[queryItem?.showProp || queryItem?.prop] }}
+    </div>
+    <component
+      v-else
+      :ref="'JztSelectTreeRef'"
+      :is="queryItem.search?.render ?? `${queryItem.search?.el}`"
+      collapse-tags
+      collapse-tags-tooltip
+      v-bind="{
+        ...handleSearchProps,
+        ...placeholder,
+        searchParam: _searchParam,
+        clearable,
+        filterable
+      }"
+      v-model="_searchParam[queryItem.search?.key ?? handleProp(queryItem.prop!)]"
+      :data="queryItem.search?.el === 'el-tree-select' ? queryItemEnum : []"
+      :options="['el-cascader', 'el-select-v2'].includes(queryItem.search?.el!) ? queryItemEnum : []"
+      style="width: 100%"
+      @change="onChangeValue"
+      @focus="setOptionWidth"
+      :teleported="teleported"
+      v-on="handleEvents"
+      @check="handleCheck"
+      :class="queryItem?.appendProps?.type === 'border' ? 'append-border-el' : 'append-primary-el'"
+      @keyup.enter="handleEnter"
+      @blur="handleInputBlur"
+    >
+      <template v-if="queryItem?.appendProps?.show" #append>
+        <el-button class="append-right-button" @click="handleSearch">查询</el-button>
+      </template>
+      <template v-if="queryItem?.search?.hasCheckbox && queryItem.search?.el === 'el-tree-select'" #header>
+        <div class="flx-left-center">
+          <div class="flx-left-center mr20">
+            <el-checkbox v-model="checkedAll" @change="changeCheck" style="margin-right: 8px"></el-checkbox>
+            <span>全选</span>
+          </div>
+          <div class="flx-left-center mr20">
+            <el-checkbox v-model="checkedInverse" @change="changeInverse" style="margin-right: 8px"></el-checkbox>
+            <span>反选</span>
+          </div>
+        </div>
+      </template>
+      <!--  teleported 这里需要处理成false，因为为了避免el-popover中的选择下拉数据后会自动触发关闭  -->
+      <template v-if="queryItem.search?.el === 'el-cascader'" #default="{ data }">
+        <span>{{ data[fieldNames.label] }}</span>
+      </template>
+      <template v-if="queryItem.search?.el === 'el-select'">
+        <component
+          :is="`el-option`"
+          v-for="(col, index) in queryItemEnum"
+          :key="index"
+          :label="col[fieldNames.label]"
+          :value="col[fieldNames.value]"
+          :style="{ width: selectOptionWidth }"
+        ></component>
+      </template>
+      <template v-if="queryItem.search?.el === 'el-radio-group'">
+        <component
+          :is="`el-radio`"
+          v-for="(col, index) in queryItemEnum"
+          :key="index"
+          :label="col[fieldNames.label]"
+          :value="col[fieldNames.value]"
+        ></component>
+      </template>
+      <template v-if="queryItem.search?.el === 'el-checkbox-group'">
+        <component
+          is="el-checkbox"
+          v-for="(col, index) in queryItemEnum"
+          :key="index"
+          :label="col[fieldNames.label]"
+          :value="col[fieldNames.value]"
+        ></component>
+      </template>
+      <slot v-else></slot>
+    </component>
+    <div v-if="queryItem.rightRender">
+      <component :is="queryItem.rightRender" v-bind="{ searchParam: _searchParam }" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="SearchFormItem">
+import { computed, inject, ref, defineComponent, nextTick, watch } from 'vue'
+import { handleProp } from '../../utils/index'
+import { QueryItemsProps } from '../interface/index'
+import { isArray, isEmpty } from '@jzt-spd/utils'
+import JztNumericalRange from '../../JztNumericalRange/index.vue'
+import JztDateType from '../../JztDateSelect/dateType.vue'
+import JztDateSelect from '../../JztDateSelect/dateSelect.vue'
+
+import { getEnabledChildValues, disableRootNodesByDepth } from '../../utils/tree'
+
+const CusComponent = defineComponent({
+  JztNumericalRange: JztNumericalRange,
+  JztDateType: JztDateType,
+  JztDateSelect: JztDateSelect
+})
+
+interface SearchFormItem {
+  queryItem: QueryItemsProps
+  searchParam: { [key: string]: any }
+  teleported?: boolean
+  showParam?: { [key: string]: any } // 查看参数
+}
+const props = withDefaults(defineProps<SearchFormItem>(), {
+  teleported: true
+})
+
+// Re receive SearchParam
+const _searchParam = computed(() => props.searchParam)
+
+// 判断 fieldNames 设置 label && value && children 的 key 值
+const fieldNames = computed(() => {
+  return {
+    label: props.queryItem.fieldNames?.label ?? 'label',
+    value: props.queryItem.fieldNames?.value ?? 'value',
+    children: props.queryItem.fieldNames?.children ?? 'children'
+  }
+})
+
+const emit = defineEmits(['getCascaderValue', 'handleSearch', 'handleItemClear'])
+// 接收 enumMap (el 为 select-v2 需单独处理 enumData)
+const enumMap = inject('enumMap', ref(new Map()))
+
+// 监听值变化 获取getCascader数据
+watch(
+  () => _searchParam.value[props.queryItem.prop],
+  (val, oldValue) => {
+    if (props.queryItem?.cascader) {
+      const queryItem = props.queryItem
+      emit('getCascaderValue', queryItem)
+    }
+
+    if (isEmpty(val) && oldValue) {
+      //  清空
+      emit('handleItemClear', props.queryItem)
+    }
+  },
+  { immediate: true, deep: true }
+)
+// 获取getCascader数据
+const onChangeValue = val => {
+  if (props.queryItem?.cascader && props.queryItem?.cascader.length) {
+    const queryItem = props.queryItem
+    emit('getCascaderValue', queryItem, true)
+  }
+  if (props.queryItem?.search?.el == 'el-tree-select') {
+    const ids = _searchParam.value?.[props.queryItem.prop] || []
+    props.queryItem.change && props.queryItem.change({ value: ids })
+    checkedAll.value = ids?.length === treeAllIds.value?.length
+    return
+  }
+  // 控件change事件
+  if (queryItemEnum.value && queryItemEnum.value.length) {
+    const value = fieldNames.value.value
+    const label = fieldNames.value.label
+    if (props.queryItem?.search?.props?.multiple) {
+      // 多选
+      const optionsItems = [] as any[] // 整体item
+      const optionsLabels = [] as string[] // name item
+      queryItemEnum.value.forEach(item => {
+        if (val.includes(item[value])) {
+          optionsItems.push(item)
+          optionsLabels.push(item[label])
+        }
+      })
+      props.queryItem.change &&
+        props.queryItem.change({
+          value: val,
+          optionsItem: optionsItems,
+          optionsLabels: optionsLabels,
+          searchForm: _searchParam.value
+        })
+    } else {
+      // 单选]
+      const optionsItem = queryItemEnum.value.filter(item => {
+        return item[value] === val
+      })
+      props.queryItem.change &&
+        props.queryItem.change({
+          value: val,
+          optionsItem: optionsItem[0],
+          searchForm: _searchParam.value
+        })
+    }
+  } else {
+    props.queryItem.change && props.queryItem.change({ value: val, searchForm: _searchParam.value })
+  }
+}
+
+const queryItemEnum = computed(() => {
+  const queryItem = props.queryItem
+  const enumOptions1 = queryItem.enum || queryItem?.options
+  let enumOptions = enumOptions1
+  const treeLevel = props.queryItem.search?.allowCheckLevel || 0
+  if (enumOptions && isArray(enumOptions) && enumOptions.length) {
+    if (props.queryItem.search?.el === 'el-tree-select' && treeLevel) {
+      enumOptions = disableRootNodesByDepth(enumOptions1, treeLevel)
+    }
+    return enumOptions
+  }
+  let enumData1 = enumMap.value.get(queryItem.prop)
+  let enumData2 = enumMap.value.get(queryItem?.enumKey)
+  let enumData = enumData1 || enumData2 || []
+  if (enumData && isArray(enumData) && props.queryItem.search?.el === 'el-tree-select') {
+    enumData = disableRootNodesByDepth(enumData, treeLevel)
+  }
+  if (!enumData) return []
+  if (queryItem.search?.el === 'el-select-v2' && queryItem.fieldNames) {
+    enumData = enumData.map((item: { [key: string]: any }) => {
+      return {
+        ...item,
+        label: item[fieldNames.value.label],
+        value: item[fieldNames.value.value]
+      }
+    })
+  }
+  return enumData
+})
+// 所有树形可选的子节点id 集合
+const treeAllIds = ref<string[] | number[]>([])
+//获取所有树形可选的子节点id
+function getTreeAllEnabledIds() {
+  if (props.queryItem.search?.el === 'el-tree-select') {
+    const valueKey = fieldNames.value.value as string
+    const allIds = getEnabledChildValues(queryItemEnum.value, valueKey)
+    treeAllIds.value = allIds || []
+  }
+}
+
+watch(
+  () => queryItemEnum.value,
+  newValue => {
+    if (newValue && newValue.length) {
+      getTreeAllEnabledIds()
+    } else {
+      treeAllIds.value = []
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+// 处理透传的 searchProps (el 为 tree-select、cascader 的时候需要给下默认 label && value && children)
+const handleSearchProps = computed(() => {
+  const label = fieldNames.value.label
+  const value = fieldNames.value.value
+  const children = fieldNames.value.children
+  const searchEl = props.queryItem.search?.el
+  let searchProps = props.queryItem.search?.props ?? {}
+  if (searchEl === 'el-tree-select') {
+    searchProps = {
+      ...searchProps,
+      props: { ...searchProps, label, children },
+      nodeKey: value,
+      showCheckbox: searchProps.showCheckbox !== false
+    }
+  }
+  if (searchEl === 'el-cascader') {
+    searchProps = {
+      ...searchProps,
+      props: { ...searchProps, label, value, children }
+    }
+  }
+  if (searchEl === 'el-input-number') {
+    searchProps = {
+      ...searchProps,
+      controls: false
+    }
+  }
+  return searchProps
+})
+// 处理动态事件绑定
+const handleEvents = computed(() => {
+  const events = {}
+  const searchEvents = props.queryItem.search?.events ?? {}
+
+  // 将事件配置转换为事件监听器
+  Object.keys(searchEvents).forEach(eventName => {
+    if (typeof searchEvents[eventName] === 'function') {
+      events[`${eventName.charAt(0).toUpperCase() + eventName.slice(1)}`] = searchEvents[eventName]
+    }
+  })
+
+  return events
+})
+// 回车事件
+const handleEnter = () => {
+  // 是否开启回车搜索
+  if (!props.queryItem?.search?.isEnter) return
+  handleInputBlur()
+  emit('handleSearch')
+}
+
+// 处理默认 placeholder
+const placeholder = computed(() => {
+  const search = props.queryItem.search
+  if (['datetimerange', 'daterange', 'monthrange'].includes(search?.props?.type) || search?.props?.isRange) {
+    return {
+      rangeSeparator: search?.props?.rangeSeparator ?? '至',
+      startPlaceholder: search?.props?.startPlaceholder ?? '开始时间',
+      endPlaceholder: search?.props?.endPlaceholder ?? '结束时间'
+    }
+  }
+  const placeholder = search?.props?.placeholder ?? (search?.el?.includes('input') ? '请输入' : '请选择')
+  return { placeholder }
+})
+
+// 是否有清除按钮-默认有组件没有
+const clearable = computed(() => {
+  const search = props.queryItem.search
+  return search?.props?.clearable ?? true
+})
+// 是否有多选-默认有
+const filterable = computed(() => {
+  const search = props.queryItem.search
+  return search?.props?.filterable ?? true
+
+  // if (props.queryItem.el && ['el-select', 'el-select-v2'].includes(props.queryItem.el)) {
+  //   return props.queryItem?.props?.filterable ?? true
+  // } else {
+  //   return false
+  // }
+})
+const selectOptionWidth = ref()
+// 设置select组件下拉框宽度
+const setOptionWidth = event => {
+  nextTick(() => {
+    if (props.queryItem?.search?.props?.multiple) {
+      selectOptionWidth.value = '100%'
+    } else {
+      selectOptionWidth.value = event.srcElement.offsetWidth + 30 + 'px'
+    }
+  })
+}
+
+const checkedAll = ref(false)
+const checkedInverse = ref(false)
+const JztSelectTreeRef = ref()
+
+// 全选 取消全选(
+const changeCheck = () => {
+  console.log(JztSelectTreeRef.value)
+
+  nextTick(() => {
+    checkedInverse.value = false
+    // const valueKey = fieldNames.value.value as string
+    if (checkedAll.value) {
+      //  获取非禁用的子节点集合
+      const allIds = treeAllIds.value // getEnabledChildValues(queryItemEnum.value, valueKey)
+      JztSelectTreeRef.value!.setCheckedKeys(allIds, true)
+      _searchParam.value[props.queryItem.prop] = allIds || []
+      onChangeValue(allIds)
+    } else {
+      JztSelectTreeRef.value!.setCheckedKeys([], true) // 1. 选中的数组 2.  true:只设置选中的叶子节点， 默认值是 false.
+      _searchParam.value[props.queryItem.prop] = []
+      onChangeValue([])
+    }
+    handleCheck()
+  })
+}
+//  反选 取消全选
+const changeInverse = () => {
+  checkedAll.value = false
+  // const valueKey = fieldNames.value.value as string
+  const vals = _searchParam.value[props.queryItem.prop] || []
+  const allIds = treeAllIds.value // getEnabledChildValues(queryItemEnum.value, valueKey)
+  const ids = allIds.filter(item => !vals.includes(item))
+  if (ids.length == allIds.length) {
+    // 反向判断勾选
+    checkedAll.value = true
+  }
+  nextTick(() => {
+    JztSelectTreeRef.value!.setCheckedKeys(ids, true)
+    _searchParam.value[props.queryItem.prop] = ids || []
+    onChangeValue(ids)
+    handleCheck()
+  })
+}
+
+// 注入父组件提供的方法
+// const sendToParent = inject<(data: any) => void>('sendToParent')
+
+// 处理选中事件
+const handleCheck = () => {
+  // (leafOnly, includeHalfChecked) （非仅子节点，包含半选中节点数据）
+  const checkedNodes = JztSelectTreeRef.value?.getCheckedNodes(false, true) || []
+  // 过滤子节点，仅仅留下父节点
+  const parentNodes = checkedNodes.filter(item => !treeAllIds.value.includes(item.value))
+  console.log('所有选中父节点的完整路径:', parentNodes)
+  // if (sendToParent) {
+  //   sendToParent({
+  //     parentNodes: parentNodes
+  //   })
+  // }
+}
+const handleSearch = () => {
+  emit('handleSearch')
+}
+// 输入框失焦时去除首尾空格（中间空格保留）
+const handleInputBlur = () => {
+  const key = String(props.queryItem.search?.key ?? handleProp(String(props.queryItem.prop)))
+  const val = _searchParam.value[key]
+  if (typeof val === 'string') {
+    _searchParam.value[key] = val.trim()
+  }
+}
+/** 使用方法： 孙组件向父组件传递数据
+const receivedData = ref<any[]>([])
+// 提供回调函数给子孙组件
+const handleDataFromGrandchild = (data: any) => {
+  receivedData.value = data.parentNodes
+  console.log('父组件收到数据:', data)
+}
+provide('sendToParent', handleDataFromGrandchild)
+ */
+</script>
+<style lang="scss">
+.el-select-dropdown__header {
+  padding: 4px 12px !important;
+}
+</style>
+<style lang="scss" scoped>
+.append-border-el {
+  padding: 0 0;
+  width: 100%;
+  :deep(.el-input__wrapper) {
+    border-radius: 4px 0 0 4px;
+    box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+  }
+  .append-right-button {
+    background-color: #f6f8ff !important;
+    color: var(--el-color-primary) !important;
+    border: 1px solid var(--el-color-primary) !important;
+    // padding: 0 16px;
+    border-radius: 0 4px 4px 0;
+    margin: 0 -20px;
+    margin-left: -21px !important;
+  }
+}
+.append-primary-el {
+  .append-right-button {
+    background-color: var(--el-color-primary) !important;
+    border-color: var(--el-color-primary) !important;
+    color: #fff !important;
+    border: transparent !important;
+    // padding: 0 16px;
+    border-radius: 0 4px 4px 0;
+    // margin-left: -1px;
+  }
+}
+</style>