@jzt-packages/components 1.0.0

package/src/JztFormGrid/components/formItem.vue

@@ -0,0 +1,209 @@
+<template>
+  <el-col :span="item.span || 12" :class="border ? 'border-col' : ''">
+    <div v-if="item?.outerRender" class="mb13">
+      <component :is="item?.outerRender" />
+    </div>
+    <!---->
+    <showDetailForm
+      v-else-if="isDetail"
+      :item="item"
+      :ruleForm="ruleForm"
+      :infoEmptyText="infoEmptyText"
+      :border="border"
+      :showOverflowTooltip="showOverflowTooltip"
+    >
+      <template #[item.slotName] :key="item.prop + index + '_template_' + childIndex">
+        <slot :name="item.slotName"></slot>
+      </template>
+    </showDetailForm>
+    <!-- v-else -->
+    <el-form-item
+      v-else
+      v-bind="item.formItemProps"
+      :prop="String(item.prop)"
+      :rules="item.rules"
+      style="width: 100%"
+      :class="item.className ? item.className : ''"
+      :label-width="item.labelWidth ?? 'auto'"
+    >
+      <template #label>
+        <el-space :size="4" style="height: 100% !important">
+          <component v-if="item?.labelRender" :is="item?.labelRender" />
+          <span v-else-if="item.prop !== 'submitBtn' && item.label" class="flx-left-center" style="height: 100%">
+            <span class="label-text">
+              {{ `${item.label}` }}
+            </span>
+            <!-- <span>:</span> -->
+          </span>
+          <el-tooltip v-if="item.tooltip" effect="dark" :content="item.tooltip" placement="top">
+            <el-icon><Warning /></el-icon>
+          </el-tooltip>
+        </el-space>
+      </template>
+      <div v-if="item.prop === 'submitBtn' && !isShow">
+        <template v-for="(btnItem, index) in item.btnLList" :key="index">
+          <el-button
+            v-if="btnItem.hideFun ? !btnItem.hideFun(btnItem) : true"
+            class="table-top-btn"
+            :text="false"
+            :type="btnItem.type || 'default'"
+            :loading="btnItem.loading"
+            :icon="btnItem.icon || ''"
+            :plain="btnItem.plain"
+            @click="formOperationFn(btnItem)"
+          >
+            {{ btnItem.text }}
+          </el-button>
+        </template>
+      </div>
+      <template v-else-if="item.prop !== 'submitBtn'">
+        <span v-if="item.slotName">
+          <slot :name="item.slotName" />
+        </span>
+        <div v-else-if="isShow" class="contentText flx-left-center">
+          <template v-if="!item.el">
+            {{ formatValue(ruleForm[item.prop as string]) ?? infoEmptyText }}
+          </template>
+          <template v-if="['el-checkbox-group', 'el-radio-group', 'el-select', 'el-select-v2'].includes(item.el!)">
+            {{ formatValue(getItemData(item, ruleForm[item.prop as string])) ?? infoEmptyText }}
+          </template>
+          <template v-else-if="!item.el?.includes('el-')">
+            <formItemValue :query-item="{ ...item, props: { ...item.props, isShow: true } }" :search-param="ruleForm" />
+          </template>
+          <template v-else-if="item.el == 'el-date-picker'">
+            {{ ruleForm[item.prop as string]?.[0] || infoEmptyText }}
+            <span class="ml8 mr8">至</span>
+            {{ ruleForm[item.prop as string]?.[1] || infoEmptyText }}
+          </template>
+          <template v-else-if="item.render">
+            <component :is="item.render" />
+          </template>
+          <template v-else>
+            {{ formatValue(ruleForm[item.prop as string]) ?? infoEmptyText }}
+          </template>
+        </div>
+        <formItemValue v-else :query-item="item" :search-param="ruleForm" @getCascaderValue="getCascaderValue" />
+      </template>
+    </el-form-item>
+  </el-col>
+</template>
+<script setup lang="ts" name="SearchForm">
+import { computed, ref, reactive, inject } from 'vue'
+import { FormItemsProps } from '../interface/index'
+import formItemValue from './formItemValue.vue'
+import showDetailForm from './showDetailForm.vue'
+import { formatValue } from '@jzt-spd/utils'
+interface ProTableProps {
+  showOverflowTooltip?: boolean // 是否显示超出部分提示
+  item: FormItemsProps // 搜索参数
+  ruleForm?: { [key: string]: any } // 搜索参数
+  isShow?: boolean // 是否是查看模式
+  disabled?: boolean // 是否表单禁用
+  formProps?: Record<string, any>
+  infoEmptyText?: string
+  border?: boolean // 是否显示边框
+  isDetail?: boolean
+}
+
+// 默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  // item: () => ({}),
+  ruleForm: () => ({}),
+  isShow: false, // 是否是查看模式
+  infoEmptyText: '-',
+  border: false
+})
+
+const emit = defineEmits(['formOperationFn', 'update:form', 'getCascaderValue'])
+const enumMap = inject('fromEnumMap', ref(new Map()))
+//  操作列点击操作
+const formOperationFn = (item: any) => {
+  emit('formOperationFn', item)
+}
+// 获取每一项的数据
+const getItemData = (formItemOptions: FormItemsProps, value: string | number | (string | number)[]) => {
+  const fieldNames = {
+    label: formItemOptions.fieldNames?.label ?? 'label',
+    value: formItemOptions.fieldNames?.value ?? 'value'
+  }
+  const enumData = enumMap.value.get(formItemOptions.prop) || formItemOptions.options
+  const enumList = formItemOptions.enum || []
+  const enumArray = enumData || enumList || {}
+  if (formItemOptions.props?.multiple || formItemOptions.el === 'el-checkbox-group') {
+    if ((value as (string | number)[])?.length) {
+      return (value as (string | number)[])
+        .map(valueItem => {
+          const findItem = enumArray?.find?.(item => item[fieldNames.value] === valueItem)
+          return findItem?.[fieldNames.label]
+        })
+        .join(', ')
+    }
+    return value
+  }
+  // const enumArray = enumData || enumList || {}
+  const findItem = enumArray?.find?.(item => item[fieldNames.value] === value)
+  return findItem?.[fieldNames.label] || value
+}
+// 获取getCascader数据
+const getCascaderValue = (queryItem, isClear: boolean = false) => {
+  if (queryItem.cascader && queryItem.cascader.length) {
+    emit('getCascaderValue', queryItem, isClear)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contentText {
+  color: var(--el-text-color-primary);
+  line-height: 22px;
+  word-break: break-all;
+  width: 100%;
+}
+:deep(.el-textarea__inner) {
+  word-break: break-all;
+}
+
+.label-text {
+  max-width: 106px;
+  line-height: 20px;
+  text-align: right;
+  // margin-right: 3px;
+}
+
+.el-form-item {
+  width: 100%;
+  padding: 0 8px;
+}
+
+.el-col.border-col {
+  border-right: 1px solid #ebeef5;
+  border-bottom: 1px solid #ebeef5;
+  padding: 0;
+  background: #f5f7fa !important;
+  &:nth-last-child(1) {
+    border-radius: 0 0 6px 0;
+    overflow: hidden;
+  }
+
+  .label-text {
+    max-width: 130px;
+    padding-left: 12px;
+    line-height: 20px;
+    margin: 8px 0;
+  }
+  .el-form-item {
+    margin-bottom: 0 !important;
+    padding: 0;
+  }
+  :deep(.el-form-item__content) {
+    height: 100%;
+    background-color: #fff;
+    padding: 8px 0;
+  }
+  .contentText {
+    height: 100%;
+    // background-color: #fff;
+    padding-left: 10px;
+  }
+}
+</style>

package/src/JztFormGrid/components/formItemValue.vue

@@ -0,0 +1,384 @@
+<template>
+  <div class="flx-left-center" style="width: 100%">
+    <div v-if="queryItem.el && !queryItem.el.includes('el-')" style="width: 100%">
+      <!-- 自定义组件：文件、图片上传 -->
+      <div v-if="queryItem.el && queryItem.el.includes('JztUpload')" style="width: 100%">
+        <!-- 顶部tips -->
+        <component :is="queryItem?.props?.topTipsRender" style="font-size: 12px" />
+        <!-- !-- 单图片上传 多图片上传-->
+        <component
+          :is="CusComponent[queryItem.el]"
+          v-model:image-url="_searchParam[queryItem?.key ?? handleProp(queryItem.prop!)]"
+          v-model:file-list="_searchParam[queryItem?.key ?? handleProp(queryItem.prop!)]"
+          v-bind="{
+            ...handleSearchProps,
+            listType: queryItem?.props?.listType
+          }"
+          @getOcrData="queryItem?.props?.getOcrData"
+        >
+          <template #upload-left>
+            <component #upload-left :is="queryItem?.props.uploadLeftRender" />
+          </template>
+          <template #tip v-if="queryItem?.props?.tipsRender">
+            <component #tip :is="queryItem?.props.tipsRender" />
+          </template>
+        </component>
+      </div>
+      <!-- 自定义组件：JztNumericalRange、JztRegionSelect -->
+      <component
+        v-else
+        :is="CusComponent[queryItem?.el]"
+        v-bind="{
+          ...handleSearchProps,
+          ...placeholder,
+          searchParam: _searchParam,
+          clearable,
+          filterable
+        }"
+        v-model.trim="_searchParam[queryItem?.key ?? handleProp(queryItem.prop!)]"
+        :queryItem="queryItem"
+        :disabled="queryItem?.props?.disabled"
+        style="width: 100%"
+      ></component>
+    </div>
+    <component
+      v-else
+      :ref="'SelectTreeRef'"
+      :is="queryItem?.render ?? `${queryItem.el}`"
+      v-bind="{
+        ...handleSearchProps,
+        ...placeholder,
+        searchParam: _searchParam,
+        clearable,
+        filterable
+      }"
+      v-on="handleEvents"
+      v-model.trim="_searchParam[queryItem?.key ?? handleProp(queryItem.prop!)]"
+      :data="queryItem.el === 'el-tree-select' ? queryItemEnum : []"
+      :options="['el-cascader', 'el-select-v2'].includes(queryItem.el!) ? queryItemEnum : []"
+      style="width: 100%"
+      :disabled="queryItem?.props?.disabled || (queryItem.disabledFn && queryItem.disabledFn(_searchParam))"
+      @change="onChangeValue"
+      @focus="setOptionWidth"
+    >
+      <template v-if="queryItem?.el === 'el-tree-select' && queryItem?.hasCheckbox" #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>
+      <template v-if="queryItem.el === 'el-cascader'" #default="{ data }">
+        <span>{{ data[fieldNames.label] }}</span>
+      </template>
+      <template #default v-else-if="queryItem.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 #default v-else-if="queryItem.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 #default v-else-if="queryItem.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>
+      <template #default v-else>
+        <slot></slot>
+      </template>
+    </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 { FormItemsProps } from '../interface/index'
+import JztUploadImg from '../../JztUploadImg/Img.vue'
+import JztUploadMultipleImgs from '../../JztUploadImg/Imgs.vue'
+import JztUploadMultipleFiles from '../../JztUploadFile/multiple.vue'
+import JztUploadSingleFile from '../../JztUploadFile/single.vue'
+import JztNumericalRange from '../../JztNumericalRange/index.vue'
+import JztRegionSelect from '../../JztRegionSelect/index.vue'
+
+import JztTable from '../../JztTable/index.vue'
+import { isArray, sessionGetPrecision } from '@jzt-spd/utils'
+import { getEnabledChildValues, disableRootNodesByDepth } from '../../utils/tree'
+
+interface SearchFormItem {
+  queryItem: FormItemsProps
+  searchParam: { [key: string]: any }
+}
+
+const CusComponent = defineComponent({
+  JztUploadImg: JztUploadImg,
+  JztUploadMultipleImgs: JztUploadMultipleImgs,
+  JztUploadMultipleFiles: JztUploadMultipleFiles,
+  JztUploadSingleFile: JztUploadSingleFile,
+  JztTable: JztTable,
+  JztNumericalRange: JztNumericalRange,
+  JztRegionSelect
+})
+
+const props = defineProps<SearchFormItem>()
+
+// 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'
+  }
+})
+
+// 接收 enumMap (el 为 select-v2 需单独处理 enumData)
+const enumMap = inject('fromEnumMap', ref(new Map()))
+const queryItemEnum = computed(() => {
+  // 首先会选择options的数据
+  // if (props.queryItem.options && props.queryItem.options.length)
+  //   return props.queryItem.options;
+  const enumOptions1 = props.queryItem.enum || props.queryItem.options
+  let enumOptions = enumOptions1
+  const treeLevel = props.queryItem?.allowCheckLevel || 0
+  if (enumOptions && isArray(enumOptions) && enumOptions.length) {
+    if (props.queryItem?.el === 'el-tree-select' && treeLevel) {
+      enumOptions = disableRootNodesByDepth(enumOptions1, treeLevel)
+    }
+    return enumOptions
+  }
+  let enumData1 = enumMap.value.get(props.queryItem.prop)
+  let enumData2 = enumMap.value.get(props.queryItem?.enumKey)
+  let enumData = enumData1 || enumData2 || []
+  if (enumData && isArray(enumData) && props.queryItem?.el === 'el-tree-select') {
+    enumData = disableRootNodesByDepth(enumData, treeLevel)
+  }
+  if (!enumData) return []
+  if (props.queryItem.el === 'el-select-v2' && props.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?.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.el
+  let searchProps = props.queryItem?.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') {
+    const precision = searchProps.precision === true ? sessionGetPrecision() : searchProps.precision
+    searchProps = {
+      ...searchProps,
+      ...(precision ? { precision: precision } : {})
+    }
+  }
+
+  return searchProps
+})
+
+// 处理默认 placeholder
+const placeholder = computed(() => {
+  const search = props.queryItem
+  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 itemProps = props.queryItem?.props || {}
+  return (itemProps && itemProps?.clearable) ?? true
+})
+
+// 是否有多选-默认有
+const filterable = computed(() => {
+  const itemProps = props.queryItem?.props || {}
+  return (itemProps && itemProps?.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 handleEvents = computed(() => {
+  const events = {}
+  const searchEvents = props.queryItem?.events ?? {}
+
+  // 将事件配置转换为事件监听器
+  Object.keys(searchEvents).forEach(eventName => {
+    if (typeof searchEvents[eventName] === 'function') {
+      events[`${eventName.charAt(0).toUpperCase() + eventName.slice(1)}`] = searchEvents[eventName]
+    }
+  })
+
+  return events
+})
+const isFirst = ref(true)
+// 定义 emit 事件
+const emit = defineEmits(['getCascaderValue'])
+// 监听值变化
+watch(
+  () => _searchParam.value[props.queryItem.prop],
+  (newValue, oldValue) => {
+    if (newValue === oldValue) return
+    const queryItem = props.queryItem
+    if (props.queryItem?.cascader && _searchParam.value[props.queryItem.prop]) {
+      if (isFirst.value && !queryItem.isSetFirstValue) {
+        isFirst.value = false
+        return
+      }
+      emit('getCascaderValue', queryItem)
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+const onChangeValue = (val: any) => {
+  const queryItem = props.queryItem
+  emit('getCascaderValue', queryItem, true)
+  if (props.queryItem?.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 optionsItem = queryItemEnum.value.filter(item => item[value] === val)
+    props.queryItem.change &&
+      props.queryItem.change({
+        value: val,
+        optionsItem: optionsItem[0]
+      })
+  } else {
+    props.queryItem.change && props.queryItem.change({ value: val })
+  }
+}
+const selectOptionWidth = ref()
+// 设置select组件下拉框宽度
+const setOptionWidth = event => {
+  nextTick(() => {
+    selectOptionWidth.value = event.srcElement.offsetWidth + 30 + 'px'
+  })
+}
+
+const checkedAll = ref(false)
+const checkedInverse = ref(false)
+const SelectTreeRef = ref()
+
+// 全选 取消全选(
+const changeCheck = () => {
+  nextTick(() => {
+    checkedInverse.value = false
+    // const valueKey = fieldNames.value.value as string
+    if (checkedAll.value) {
+      //  获取非禁用的子节点集合
+      const allIds = treeAllIds.value // getEnabledChildValues(queryItemEnum.value, valueKey)
+      SelectTreeRef.value!.setCheckedKeys(allIds, true)
+      _searchParam.value[props.queryItem.prop] = allIds || []
+      onChangeValue(allIds)
+    } else {
+      SelectTreeRef.value!.setCheckedKeys([], true) // 1. 选中的数组 2.  true:只设置选中的叶子节点， 默认值是 false.
+      _searchParam.value[props.queryItem.prop] = []
+      onChangeValue([])
+    }
+  })
+}
+//  反选 取消全选
+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(() => {
+    SelectTreeRef.value!.setCheckedKeys(ids, true)
+    _searchParam.value[props.queryItem.prop] = ids || []
+    onChangeValue(ids)
+  })
+}
+</script>