ff-ui-plus 2.0.7

package/packages/components/query-condition/src/moreChoose.vue

@@ -0,0 +1,159 @@
+<template>
+  <el-popover
+    popper-class="t_query_condition_more"
+    :bind="popoverAttrsBind"
+    trigger="click"
+    width="auto"
+    ref="popover"
+    v-if="allcheckList.length > 0"
+  >
+    <div class="inside_box">
+      <div class="inside_box_title">
+        <div>{{ popoverAttrsBind.title }}</div>
+        <div class="check-box">
+          <el-button size="small" link @click="handlecheckAll">
+            {{ popoverAttrsBind.allTxt }}
+          </el-button>
+          <el-button size="small" link @click="handleReset">
+            {{ popoverAttrsBind.clearTxt }}
+          </el-button>
+          <el-button size="small" link @click="handleReverseCheck">
+            {{ popoverAttrsBind.reverseTxt }}
+          </el-button>
+        </div>
+      </div>
+      <el-checkbox-group v-model="checkList" class="inside_box_main" @change="getcheck">
+        <el-checkbox
+          v-for="(item, index) of allcheckList"
+          :key="index"
+          :label="item.label"
+          :value="item.label"
+        ></el-checkbox>
+      </el-checkbox-group>
+    </div>
+    <template #reference>
+      <div class="more_dropdown_icon">
+        <span class="out_box">{{ popoverAttrsBind.showTxt }}</span>
+        <el-icon>
+          <ArrowDown />
+        </el-icon>
+      </div>
+    </template>
+  </el-popover>
+</template>
+<script setup lang="ts">
+import { ref, watch } from "vue"
+import { ArrowDown } from "@element-plus/icons-vue"
+defineOptions({
+  name: "MoreChoose"
+})
+const props = defineProps({
+  // 以下拉方式展示更多条件---数据源
+  moreCheckList: {
+    type: Array,
+    default: () => []
+  },
+  popoverAttrsBind: {
+    type: Object,
+    default: () => ({})
+  }
+})
+// 单选选中
+const checkList: any = ref([])
+// 已选中
+const isCheckList: any = ref([])
+const allcheckList: any = ref(props.moreCheckList)
+const emit = defineEmits(["getCheckList"])
+watch(
+  () => props.moreCheckList,
+  (list: any) => {
+    allcheckList.value = list
+  },
+  { deep: true }
+)
+watch(
+  () => checkList,
+  (nval: any, oval: any) => {
+    let list: any[] = []
+    oval.value.forEach((ele: any) => {
+      if (!nval.value.some((val: any) => val == ele)) {
+        list.push(ele)
+      }
+    })
+    isCheckList.value.forEach((ele: any, j: string | number) => {
+      if (list.filter(val => val == ele.label)[0]) {
+        delete isCheckList.value[j]
+      }
+    })
+  },
+  { deep: true }
+)
+// 全选
+const handlecheckAll = () => {
+  const allList = JSON.parse(JSON.stringify(allcheckList.value))
+  checkList.value = allList.map((item: any) => item.label)
+  // console.log('全选', checkList.value)
+  isCheckList.value = allList
+  const checkObj = analysisObj(isCheckList.value)
+  emit("getCheckList", checkObj)
+}
+// 反选
+const handleReverseCheck = () => {
+  const deepCheckList = JSON.parse(JSON.stringify(checkList.value))
+  checkList.value = []
+  isCheckList.value = [] as any
+  allcheckList.value.forEach((ele: any) => {
+    if (!deepCheckList.filter((item1: any) => item1 == ele.label)[0]) {
+      checkList.value.push(ele.label)
+      isCheckList.value.push(ele)
+    }
+  })
+  const checkObj = analysisObj(isCheckList.value)
+  // console.log('反选', checkObj)
+  emit("getCheckList", checkObj)
+}
+// 清空
+const handleReset = () => {
+  // console.log('清空')
+  checkList.value = []
+  isCheckList.value = []
+  emit("getCheckList", {})
+}
+// 单选
+const getcheck = (val: any[]) => {
+  isCheckList.value = []
+  allcheckList.value.forEach((ele: { label: any }, j: any) => {
+    if (val.filter(item1 => item1 == ele.label)[0]) {
+      isCheckList.value.push(ele)
+    }
+  })
+  // console.log("isCheckList---", isCheckList.value, checkList.value, val)
+  const checkObj = analysisObj(isCheckList.value)
+  // console.log("checkObj--222", checkObj)
+  emit("getCheckList", checkObj)
+}
+// 格式化
+const analysisObj = (val: any[]) => {
+  return val.reduce((obj, item) => {
+    obj[item.prop] = {
+      label: item?.label,
+      comp: item.comp,
+      bind: item?.bind,
+      list: item?.list,
+      eventHandle: item?.eventHandle,
+      changeEvent: item?.changeEvent,
+      listTypeInfo: item?.listTypeInfo,
+      arrLabel: item?.arrLabel,
+      arrKey: item?.arrKey,
+      slotName: item?.slotName,
+      span: item?.span,
+      type: item?.type,
+      isSelfCom: (item && item.isSelfCom) || false,
+      defaultVal: item?.defaultVal,
+      placeholder: item?.placeholder,
+      event: item?.event
+    }
+    return obj
+  }, {})
+}
+</script>

package/packages/components/query-condition/src/renderComp.vue

@@ -0,0 +1,15 @@
+<template>
+  <component :is="renderComponent" />
+</template>
+<script lang="ts" setup>
+defineOptions({
+  name: "RenderComp"
+})
+const props: any = defineProps({
+  render: Function,
+  form: Object
+})
+const renderComponent = () => {
+  return props.render(props?.form)
+}
+</script>

package/packages/components/query-condition/src/type.ts

@@ -0,0 +1,22 @@
+export interface TQueryConditionProps {
+  opts: Record<string, any>
+  labelWidth?: string
+  btnCheckBind?: Record<string, any>
+  btnResetBind?: Record<string, any>
+  loading?: boolean
+  reset?: boolean
+  boolEnter?: boolean
+  isShowOpen?: boolean
+  isExpansion?: boolean
+  maxVisibleRows?: number
+  packUpTxt?: string
+  unfoldTxt?: string
+  isFooter?: boolean
+  configChangedReset?: boolean
+  isShowWidthSize?: boolean
+  widthSize?: number
+  isDropDownSelectMore?: boolean
+  moreCheckList?: any[]
+  popoverAttrs?: Record<string, any>
+  labelPosition?: 'top' | 'left' | 'right'
+}

package/packages/components/query-condition/src/useComputed.ts

@@ -0,0 +1,94 @@
+import { computed } from "vue"
+
+export function useComputed() {
+  // 子组件名称
+  const compChildName = computed(() => {
+    return (opt: any) => {
+      switch (opt.type) {
+        case "checkbox":
+          return "el-checkbox"
+        case "radio":
+          return "el-radio"
+        case "select-arr":
+        case "select-obj":
+          return "el-option"
+      }
+    }
+  })
+  // 下拉数据
+  const selectListType = computed(() => {
+    return (opt: any) => {
+      if (opt.listTypeInfo) {
+        return opt.listTypeInfo[opt.list]
+      } else {
+        return []
+      }
+    }
+  })
+  // 子子组件label
+  const compChildLabel = computed(() => {
+    return (opt: { type: any; arrLabel: any }, value: { [x: string]: any; value: any }) => {
+      switch (opt.type) {
+        case "radio":
+        case "checkbox":
+          return value[opt.arrLabel || "label"]
+        case "el-select-multiple":
+        case "select-arr":
+          return value[opt.arrLabel || "label"]
+        case "select-obj":
+          return value
+      }
+    }
+  })
+  // 子子组件value
+  const compChildValue = computed(() => {
+    return (opt: { type: any; arrKey: any }, value: { [x: string]: any; value: any }, key: any) => {
+      switch (opt.type) {
+        case "radio":
+        case "checkbox":
+          return value[opt.arrKey || "key"]
+        case "el-select-multiple":
+        case "select-arr":
+          return value[opt.arrKey || "key"]
+        case "select-obj":
+          return key
+      }
+    }
+  })
+  // 子子组件文字展示
+  const compChildShowLabel = computed(() => {
+    return (opt: { type: any; arrLabel: any }, value: { [x: string]: any; label: any }) => {
+      switch (opt.type) {
+        case "radio":
+        case "checkbox":
+          return value[opt.arrLabel || "label"]
+        case "el-select-multiple":
+        case "select-arr":
+          return value[opt.arrLabel || "label"]
+        case "select-obj":
+          return value
+      }
+    }
+  })
+  const getColLength = () => {
+    // 行列数
+    const width = window.innerWidth
+    let colLength = 4
+    if (width > 1000 && width < 1280) {
+      colLength = 3
+    } else if (width > 768 && width <= 1000) {
+      colLength = 2
+    } else if (width <= 768) {
+      colLength = 1
+    }
+    return colLength
+  }
+  return {
+    compChildName,
+    selectListType,
+    compChildLabel,
+    compChildValue,
+    compChildShowLabel,
+    getColLength
+  }
+}

package/packages/components/query-condition/style/css.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/t-query-condition.css"

package/packages/components/query-condition/style/index.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/src/query-condition.scss"

package/packages/components/radio/index.ts

@@ -0,0 +1,3 @@
+import Radio from "./src/index.vue"
+
+export const TRadio = Radio

package/packages/components/radio/src/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-radio-group v-bind="$attrs" :size="size">
+    <slot>
+      <component
+        v-for="(item, index) in options"
+        v-bind="item"
+        :is="radioType"
+        :key="index"
+        :value="item[optionsProps.value]"
+        :label="item[optionsProps.value]"
+        :border="border"
+        :disabled="item[optionsProps.disabled]"
+      >
+        <slot :name="item.slot" v-bind="item">
+          {{ item[optionsProps.label] }}
+        </slot>
+      </component>
+    </slot>
+  </el-radio-group>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import type { PropType } from "vue"
+import type { OptionsProps } from "./radio"
+defineOptions({
+  name: "TRadio"
+})
+// 定义组件属性，包括类型、默认值和校验规则
+const radioProps = defineProps({
+  type: {
+    type: String as PropType<"radio" | "button">,
+    validator: (value: string) => ["radio", "button"].includes(value),
+    default: "radio"
+  },
+  options: {
+    type: Array as any,
+    default: () => []
+  },
+  size: {
+    type: String as PropType<"large" | "default" | "small">,
+    validator: (value: string) => ["large", "default", "small"].includes(value),
+    default: "default"
+  },
+  border: {
+    type: Boolean,
+    default: false
+  },
+  props: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+// 根据type属性计算出应使用的radio组件类型
+const radioType = computed(() => {
+  const obj = {
+    radio: "el-radio",
+    button: "el-radio-button"
+  }
+  return obj[radioProps.type] ?? "el-radio"
+})
+
+// 合并默认的选项属性和用户自定义的属性
+const optionsProps = ref<OptionsProps>({
+  ...{
+    value: "value",
+    label: "label",
+    disabled: "disabled"
+  },
+  ...radioProps.props
+})
+</script>

package/packages/components/radio/src/radio.d.ts

@@ -0,0 +1,12 @@
+export interface OptionsProps {
+  value: string
+  label: string
+  disabled: string
+}
+
+export interface RadioItem {
+  value: string | number | boolean
+  label: string
+  slot?: string
+  disabled?: boolean
+}

package/packages/components/radio/style/css.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/t-radio.css"

package/packages/components/radio/style/index.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/src/radio.scss"

package/packages/components/select/index.ts

@@ -0,0 +1,4 @@
+import Select from "./src/index.vue"
+export * from "./src/type"
+
+export const TSelect = Select

package/packages/components/select/src/index.vue

@@ -0,0 +1,240 @@
+<template>
+  <component
+    :is="!useVirtual ? 'el-select' : 'el-select-v2'"
+    popper-class="t_select"
+    ref="tselectRef"
+    v-model="childSelectedValue"
+    :options="!useVirtual ? null : optionSource"
+    :style="{ width: width || '100%' }"
+    @change="handlesChange"
+    @input="handlesSelectInput"
+    v-bind="{
+      clearable: true,
+      filterable: filterable,
+      multiple: multiple,
+      ...$attrs
+    }"
+  >
+    <template v-for="(_index, name) in slots" v-slot:[name]="data">
+      <slot :name="name" v-bind="data" />
+    </template>
+    <template v-if="!useVirtual">
+      <el-checkbox
+        v-if="multiple && !isShowPagination"
+        v-model="selectChecked"
+        @change="selectAll"
+        class="all_checkbox"
+        >{{ selectAllTxtText }}</el-checkbox
+      >
+      <el-option
+        v-for="(item, index) in mergedOptions"
+        :key="index + 'i'"
+        :label="customLabel ? customLabelHandler(item) : item[labelCustom]"
+        :value="returnObject ? item : item[valueCustom]"
+        :disabled="item.disabled"
+      >
+        <template v-for="(_index, name) in slots" v-slot:[name]="data">
+          <slot :name="name" v-bind="data" />
+        </template>
+      </el-option>
+      <div class="t_select__pagination" v-if="isShowPagination && filteredOptionsCount > 0">
+        <el-pagination
+          v-model:current-page="paginationOption.currentPage"
+          v-model:page-size="paginationOption.pageSize"
+          :layout="paginationOption.layout || 'total, prev, pager, next, jumper'"
+          :pager-count="paginationOption.pagerCount"
+          :total="paginationOption.total"
+          @input.stop="(e: any) => emits('input', e.target.value)"
+          v-bind="{
+            size: 'small',
+            background: true,
+            ...paginationOption.bind,
+            ...$attrs
+          }"
+        />
+      </div>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useSlots, watch, onMounted } from "vue"
+import { useLocale } from "@ff-ui-plus/hooks"
+import type { TSelectProps } from "./type"
+defineOptions({
+  name: "TSelect"
+})
+const { t } = useLocale()
+const props = withDefaults(defineProps<TSelectProps>(), {
+  modelValue: undefined,
+  multiple: false,
+  valueCustom: "key",
+  labelCustom: "label",
+  customLabel: "",
+  optionSource: () => [],
+  filterable: true,
+  isShowPagination: false,
+  paginationOption: () => ({
+    pageSize: 6,
+    currentPage: 1,
+    pagerCount: 5,
+    total: 0
+  }),
+  useVirtual: false,
+  returnObject: false,
+  isCached: true,
+  isRadioEchoLabel: true,
+  radioSelectValLabel: "",
+  selectAllTxt: ""
+})
+const tselectRef = ref()
+const filteredOptionsCount = ref(1)
+const slots = useSlots()
+const selectAllTxtText = computed(() => props.selectAllTxt || t("plus.select.selectAllTxt"))
+// 抛出事件
+const emits = defineEmits(["update:modelValue", "change", "input", "select-input"])
+// vue3 v-model简写
+const childSelectedValue = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emits("update:modelValue", val)
+  }
+})
+
+// 当前页数据
+const currentOptions = ref(props.optionSource)
+// 缓存已选数据 { value: { label, value } }
+const cachedOptions = ref(new Map())
+// 合并后的选项列表（当前页数据 + 已选缓存）
+const mergedOptions = computed(() => {
+  const currentValues =
+    (currentOptions.value.length > 0 &&
+      currentOptions.value.map(item => item[props.valueCustom])) ||
+    []
+  const cached = Array.from(cachedOptions.value.values()).filter(
+    item => !currentValues.includes(item[props.valueCustom])
+  )
+  return props.isShowPagination && props.isCached
+    ? [...currentOptions.value, ...cached]
+    : [...currentOptions.value]
+})
+watch(
+  () => props.optionSource,
+  newVal => {
+    currentOptions.value = newVal || []
+    // console.log("newVal---watch", newVal)
+    // 缓存已选数据
+    newVal.length > 0 &&
+      newVal.forEach(item => {
+        const isObject = typeof childSelectedValue.value === "object"
+        const condition = isObject
+          ? Array.isArray(childSelectedValue.value) &&
+            childSelectedValue.value.includes(item[props.valueCustom])
+          : childSelectedValue.value === item[props.valueCustom]
+
+        if (condition) {
+          cachedOptions.value.set(item[props.valueCustom], item)
+        }
+      })
+  }
+)
+watch(
+  () => props.radioSelectValLabel,
+  val => {
+    if (val && props.isRadioEchoLabel && !props.multiple && props.isShowPagination) {
+      childSelectedValue.value = val
+    }
+  },
+  { deep: true }
+)
+onMounted(() => {
+  // 缓存已选数据
+  currentOptions.value.forEach(item => {
+    const isObject = typeof childSelectedValue.value === "object"
+    const condition = isObject
+      ? Array.isArray(childSelectedValue.value) &&
+        childSelectedValue.value.includes(item[props.valueCustom])
+      : childSelectedValue.value === item[props.valueCustom]
+
+    if (condition) {
+      cachedOptions.value.set(item[props.valueCustom], item)
+    }
+  })
+  if (
+    props.radioSelectValLabel &&
+    props.isRadioEchoLabel &&
+    !props.multiple &&
+    props.isShowPagination
+  ) {
+    childSelectedValue.value = props.radioSelectValLabel
+  }
+})
+const handlesSelectInput = (e: any) => {
+  if (props.filterable) {
+    // console.log("handlesSelectInput---tselectRef", tselectRef.value.filteredOptionsCount)
+    filteredOptionsCount.value = tselectRef.value.filteredOptionsCount
+  }
+  emits("select-input", e.target.value)
+}
+
+const handlesChange = (value: any) => {
+  // console.log(val)
+  // 更新缓存
+  if (Array.isArray(value)) {
+    const newCache = new Map()
+    value.forEach(val => {
+      const item = mergedOptions.value.find(opt => opt[props.valueCustom] === val)
+      if (item) newCache.set(val, item)
+    })
+    cachedOptions.value = newCache
+  } else {
+    const item = mergedOptions.value.find(opt => opt[props.valueCustom] === value)
+    cachedOptions.value = item ? new Map([[value, item]]) : new Map()
+  }
+  emits("change", value)
+}
+// 设置全选
+const selectChecked = computed({
+  get() {
+    const _deval: any = props.modelValue
+    const list = props.optionSource.filter((item: { disabled: any }) => {
+      return !item.disabled
+    })
+    return _deval?.length === list.length
+  },
+  set(val: any) {
+    const list = props.optionSource.filter((item: { disabled: any }) => {
+      return !item.disabled
+    })
+    return val?.length === list.length
+  }
+})
+// 点击全选
+const selectAll = (val: any) => {
+  let options = JSON.parse(JSON.stringify(props.optionSource))
+  // 数据源过滤禁用选项
+  options = options.filter((item: { disabled: any }) => {
+    return !item.disabled
+  })
+  if (val) {
+    const selectedAllValue = options.map((item: { [x: string]: any }) => {
+      return item[props.valueCustom]
+    })
+    emits("update:modelValue", selectedAllValue)
+  } else {
+    emits("update:modelValue", null)
+  }
+}
+// 自定义label显示
+const customLabelHandler = (_item: any) => {
+  let fun = new Function("_item", "return " + props.customLabel)
+  return fun(_item)
+}
+// 清空
+const clear = () => {
+  emits("update:modelValue", null)
+}
+defineExpose({ clear })
+</script>

package/packages/components/select/src/type.ts

@@ -0,0 +1,43 @@
+export interface TSelectProps {
+  modelValue: string | number | Array<any> | Record<string, any> | undefined
+  multiple?: boolean
+  width?: string
+  valueCustom?: string
+  labelCustom?: string
+  customLabel?: string
+  optionSource?: Array<any>
+  filterable?: boolean
+  isShowPagination?: boolean
+  paginationOption?: {
+    pageSize?: number
+    currentPage?: number
+    pagerCount?: number
+    total?: number
+    layout?: string
+    bind?: Record<string, any>
+  }
+  useVirtual?: boolean
+  returnObject?: boolean
+  /**
+   * 是否缓存选项
+   * @default true
+   * @type boolean
+   * version 1.5.1
+   */
+  isCached?: boolean
+  /**
+   * 是否开启回显不是第一页数据的label
+   * @default true
+   * @type boolean
+   * version 1.5.2
+   */
+  isRadioEchoLabel?: boolean
+  /**
+   * 单选时，回显非第一页数据的label
+   * @default ''
+   * @type string
+   * version 1.5.2
+   */
+  radioSelectValLabel?: string
+  selectAllTxt?: string
+}

package/packages/components/select/style/css.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/t-select.css"

package/packages/components/select/style/index.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/src/select.scss"

package/packages/components/select-icon/index.ts

@@ -0,0 +1,4 @@
+import SelectIcon from "./src/index.vue"
+export type { TSelectIconProps } from "./src/index.vue"
+
+export const TSelectIcon = SelectIcon