easybill-ui 1.4.1 → 1.4.2

package/components/TableFilter/src/TableFilter.vue

@@ -1,236 +0,0 @@
-<template>
-  <div class="table-filter">
-    <slot name="top"></slot>
-    <div>
-      <FilterExternal ref="filterExternalRef" :select-params="selectParams" :list-query="listQuery" :has-slot="selectParams.some((a) => !a.external)" :extendContext="extendContext" v-bind="$attrs" @change="onChange">
-        <template #default>
-          <FilterSearchBox v-if="selectParams.some((a) => !a.external)" ref="searchRef" :select-params="selectParams.filter((a) => !a.external)" :select-list="selectList" :list-query="listQuery" @search="onChange" />
-        </template>
-      </FilterExternal>
-    </div>
-    <FilterTags :select-list="selectList" :list-query="listQuery" @remove="onRemove" @change="onChange" @item-click="onTagClick"></FilterTags>
-    <slot name="bottom"></slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, type PropType, provide, reactive, type Ref, ref, watch } from "vue"
-import type { CurdFormOptionItem, FormContext } from "../../CurdForm"
-import { deepClone } from "../../CurdTable/utils/common"
-import * as I from "../types"
-import FilterExternal from "./FilterExternal/FilterExternal.vue"
-import FilterSearchBox from "./FilterSearchBox.vue"
-import FilterTags from "./components/FilterTags.vue"
-
-const props = defineProps({
-  /**
-   * @deprecated since version 1.0
-   */
-  selectParams: {
-    type: Array as PropType<Array<I.ParamsItem>>,
-    default: () => {
-      return []
-    },
-  },
-  schema: {
-    type: Array as PropType<Array<I.ParamsItem>>,
-    default: undefined,
-  },
-  /**
-   * @deprecated  since version 1.0
-   */
-  listQuery: {
-    type: Object as PropType<I.ListQuery>,
-    default: () => {
-      return {}
-    },
-  },
-  modelValue: {
-    type: Object as PropType<I.ListQuery>,
-    default: undefined,
-  },
-  option: {
-    type: Object as PropType<Partial<I.FilterOption>>,
-    default: undefined,
-  },
-})
-const emit = defineEmits(["search"])
-const searchRef = ref()
-const selectList: Ref<I.ParamsItem[]> = ref([])
-const selectParams = ref<I.ParamsItem[]>(props.schema || props.selectParams || [])
-const listQuery = reactive<I.ListQuery>(props.modelValue || props.listQuery || {})
-
-const onChange = (d?: I.ParamsItem) => {
-  //清除一遍
-  for (let i = 0; i < selectList.value.length; i++) {
-    const sitem = selectList.value[i]
-    if (!listQuery[sitem.prop] && listQuery[sitem.prop] !== 0) {
-      selectList.value.splice(i, 1)
-      i--
-    }
-  }
-  // console.log("selectList", selectList, listQuery)
-  if (d) {
-    const cur = selectList.value.find((j) => d.prop == j.prop && d.label == j.label)
-    if (cur) {
-      if (listQuery[cur.prop] === "" || listQuery[cur.prop] === null || listQuery[cur.prop] === undefined) {
-        selectList.value.splice(
-          selectList.value.findIndex((j) => d.prop == j.prop),
-          1,
-        )
-      } else {
-        cur.tagNames = d.tagNames
-      }
-    } else if (typeof listQuery[d.prop] !== "undefined" && listQuery[d.prop] !== "") {
-      selectList.value.push(d)
-    }
-    emit("search", listQuery, selectList.value)
-    return
-  }
-  emit("search", listQuery, selectList.value)
-}
-const onRemove = () => {
-  emit("search", listQuery, selectList.value)
-}
-const getTags = () => {
-  selectParams.value.forEach((a) => {
-    let i = selectList.value.findIndex((j) => a.prop == j.prop)
-    if (!a.external && i == -1 && listQuery[a.prop]) {
-      if (a.options && a.options.length) {
-        const prop = String(listQuery[a.prop])
-        // const propI = prop.indexOf(",")
-        let tagNames = a.tagNames || a.options.find((j) => j.value == listQuery[a.prop])?.label
-        // 处理多选value的值
-        if (!a.tagNames && a.type == "checkbox") {
-          let propList = prop.split(",").map((item) => {
-            return a?.options?.find((j) => String(j.value) == String(item))?.label
-          })
-          tagNames = propList.join(" | ")
-        }
-        selectList.value.push({ ...a, tagNames: tagNames })
-      } else if (a.asyncOptions) {
-        loadOptions(a.prop).then((res: CurdFormOptionItem[]) => {
-          selectList.value.push({
-            ...a,
-            tagNames: a.tagNames || res.find((j) => j.value == listQuery[a.prop])?.label || "",
-          })
-        })
-      } else {
-        selectList.value.push(a)
-      }
-    }
-  })
-}
-
-const setItem = (prop: string, paramsItem?: I.ParamsItem) => {
-  // 加延时是因为在curdtable那边筛选后，调用setItem时，listQuery更新不及时
-  setTimeout(() => {
-    let item = paramsItem || selectParams.value.find((a) => a.prop == prop)
-    if (!item || item.external) return
-    const current = selectList.value.find((a) => a.prop == prop && a.label == item.label)
-    if (!current) {
-      if (typeof listQuery[prop] !== "undefined" && listQuery[prop] !== "") {
-        selectList.value.push({
-          ...item,
-          tagNames: item.tagNames || item.options?.find((j) => j.value == listQuery[prop])?.label,
-        })
-      }
-    } else if (item.options && item.options.length) {
-      let tagNames = item.options?.find((j) => j.value == listQuery[prop])?.label
-      // 处理多选value的值
-      if (!item.tagNames && item.type == "checkbox") {
-        let propList = prop.split(",").map((a) => {
-          return item?.options?.find((j) => String(j.value) == String(a))?.label
-        })
-        tagNames = propList.join(" | ")
-      }
-      current.tagNames = tagNames
-    } else if (item.asyncOptions) {
-      item.asyncOptions(listQuery, item, tableFilterContext as FormContext).then((res) => {
-        current.tagNames = item.tagNames || res.find((j) => j.value == listQuery[prop])?.label
-      })
-    }
-    if ((current && typeof current.tagNames == "undefined") || (current && current.tagNames === "")) {
-      selectList.value.splice(
-        selectList.value.findIndex((a) => a.prop == prop),
-        1,
-      )
-    }
-  })
-}
-//主动赋值
-const setValue = (prop: string, value: unknown) => {
-  listQuery[prop] = value
-  setItem(prop)
-}
-const state = ref<I.State>({
-  isFocus: false,
-})
-const filterExternalRef = ref()
-const loadOptions = (prop: string, option?: unknown) => {
-  const current = selectParams.value.find((a) => a.prop == prop)
-  if (!current || !current.asyncOptions) return
-  if (current.external) {
-    return filterExternalRef.value.loadOptions(prop, option)
-  }
-  return searchRef.value.loadOptions(prop, option)
-}
-const extendContext = {
-  loadOptions: loadOptions,
-}
-const clear = () => {
-  for (let i = 0; i < selectList.value.length; i++) {
-    delete listQuery[selectList.value[i].prop]
-    selectList.value.splice(i, 1)
-    i--
-  }
-  emit("search", listQuery, selectList.value)
-}
-// 重新调用selectParams
-const refreshSelectParams = () => {
-  if (props.schema || props.selectParams) {
-    selectParams.value = deepClone(props.schema || props.selectParams)
-  }
-}
-const getCurrentIndex = () => {
-  return searchRef.value && searchRef.value.currentIndex
-}
-//点标签，切换到当前项
-const onTagClick = (item: I.ParamsItem) => {
-  const i = selectParams.value.findIndex((a) => a.prop == item.prop && a.label == item.label)
-  searchRef.value.setIndex(i)
-}
-const tableFilterContext = reactive<I.TableFilterContext>({
-  loadOptions,
-  search: () => {
-    emit("search", listQuery, selectList.value)
-  },
-  setValue,
-  setOptions: (prop: string, options: CurdFormOptionItem[]) => {
-    const current = selectParams.value.find((a) => a.prop == prop)
-    if (!current || current.external) return
-    current.options = options
-    setItem(prop)
-  },
-  formModel: listQuery,
-  components: {},
-  change: () => {},
-  formRef: undefined,
-})
-watch(
-  () => [props.schema, props.selectParams],
-  () => {
-    refreshSelectParams()
-    getTags()
-  },
-)
-provide("tableFilter", tableFilterContext)
-provide("state", state)
-provide("selectList", selectList)
-provide("selectParams", selectParams)
-provide("option", props.option)
-defineExpose({ setItem, selectList, loadOptions, clear, refreshSelectParams, getCurrentIndex, listQuery, selectParams })
-onMounted(() => {
-  getTags()
-})
-</script>

package/components/TableFilter/src/components/FilterItem.vue

@@ -1,76 +0,0 @@
-<template>
-  <div ref="wrapperRef" class="filter-item" style="flex: 1">
-    <CurdForm v-if="show" ref="formRef" v-model="query" :form-schema="formSchema" @change="onChange" />
-  </div>
-</template>
-<script lang="ts" setup>
-import { inject, type PropType, reactive, ref, type Ref, watch } from "vue"
-import type { FormSchema } from "../../../CurdForm"
-import type { ListQuery } from "../../types"
-import * as I from "../../types"
-
-const props = defineProps({
-  modelValue: {
-    type: Object as PropType<ListQuery>,
-    default: () => {
-      return {}
-    },
-  },
-  paramsItem: {
-    type: Object as PropType<I.ParamsItem>,
-    default: () => ({}),
-  },
-})
-const emit = defineEmits(["change", "search"])
-
-const listQuery = reactive<ListQuery>(props.modelValue)
-const query = defineModel<ListQuery>({} as ListQuery) //ref(Utils.deepClone(props.listQuery))
-const formRef = ref()
-const selectParams = inject<Ref<I.ParamsItem[]>>("selectParams") || ref([])
-const formSchema = ref<FormSchema>({
-  formItem: [
-    ...selectParams.value
-      .filter((a) => !a.external)
-      .map((a) => {
-        a.hidden = props.paramsItem.prop != a.prop
-        return a
-      }),
-  ],
-})
-const show = ref(true)
-watch(
-  () => props.paramsItem.prop,
-  () => {
-    show.value = false
-    formSchema.value.formItem = selectParams.value
-      .filter((a) => !a.external)
-      .map((a) => {
-        a.hidden = props.paramsItem.prop != a.prop
-        return a
-      })
-    setTimeout(() => {
-      show.value = true
-    })
-  },
-)
-const wrapperRef = ref()
-
-const onChange = () => {
-  const val = query.value && query.value[props.paramsItem.prop]
-  if (props.paramsItem.tableKey && props.paramsItem.tableKey.length && Array.isArray(val)) {
-    props.paramsItem.tableKey.forEach((a, i) => {
-      listQuery[a] = val[i]
-    })
-  } else {
-    listQuery[props.paramsItem.prop] = val || ""
-  }
-  emit("search", props.paramsItem)
-}
-const setValue = (prop: string) => {
-  if (query.value) listQuery[prop] = query.value[prop]
-}
-const loadOptions = (prop: string, config?: unknown) => {
-  return formRef.value.loadOptions(prop, config)
-}
-defineExpose({ setValue, loadOptions })
-</script>

package/components/TableFilter/src/components/FilterTags.vue

@@ -1,132 +0,0 @@
-<template>
-  <div v-if="selectList.length" class="filter-tags">
-    <div class="tag-title">已筛选</div>
-    <div class="tag-list">
-      <div v-for="(item, i) in selectList" :key="i" class="tag-item">
-        <el-popover ref="popoverRef" trigger="click" placement="bottom-start" :disabled="!['select'].includes(item.type)" popper-class="table-filter-tag-popper" @show="show(i)">
-          <template #reference>
-            <div class="dropdown-toggle" @click="onClick(item)">
-              <div class="label">{{ item.label }}：</div>
-              <div class="value">{{ isValue(item) }}</div>
-              <div class="action" @click.stop="remove(item, i)">
-                <el-icon>
-                  <CircleCloseFilled />
-                </el-icon>
-              </div>
-            </div>
-          </template>
-          <div ref="selectRef" class="select-list" @click.stop>
-            <TagsSelect ref="tagsSelectRef" v-model="listQuery[item.prop] as number | string | boolean | []" :list-query="listQuery" :params-item="item" @change="onChange" />
-          </div>
-        </el-popover>
-      </div>
-      <div class="tag-clear"><el-button type="primary" link @click="clear">清空</el-button></div>
-    </div>
-
-    <slot></slot>
-  </div>
-</template>
-<script lang="ts" setup>
-import { CircleCloseFilled } from "@element-plus/icons-vue"
-import { inject, type PropType, ref, type Ref } from "vue"
-import type { ListQuery } from "../../types"
-import * as I from "../../types"
-import TagsSelect from "./containers/TagsSelect.vue"
-const emit = defineEmits(["change", "remove", "itemClick"])
-const props = defineProps({
-  listQuery: {
-    type: Object as PropType<ListQuery>,
-    default: () => {
-      return {}
-    },
-  },
-})
-const visibleMap = ref<Record<string, boolean>>({})
-const listQuery: Ref<ListQuery> = ref(props.listQuery)
-const selectList = inject<Ref<I.ParamsItem[]>>("selectList") || ref([])
-const remove = (row: I.ParamsItem, index: number) => {
-  selectList.value.splice(index, 1)
-  // listQuery.value[row.prop] = ""
-  delete listQuery.value[row.prop]
-  emit("remove")
-}
-const clear = () => {
-  for (let i = 0; i < selectList.value.length; i++) {
-    delete listQuery.value[selectList.value[i].prop]
-    selectList.value.splice(i, 1)
-    i--
-  }
-  emit("remove")
-}
-const isValue = (item: I.ParamsItem) => {
-  let text = item.tagNames
-  let type = item.type
-  switch (type) {
-    case "time":
-      if (item.tableKey && item.tableKey.length) {
-        return listQuery?.value[item.tableKey[0]] + " 至 " + listQuery?.value[item.tableKey[1]]
-      } else {
-        return listQuery?.value[item.prop]
-      }
-      break
-    case "select":
-      if (!text) {
-        const cur = item.options?.find((a) => a.value == listQuery.value[item.prop])
-        if (cur) {
-          text = cur.label
-        }
-      }
-      break
-    default:
-      return text || listQuery.value[item.prop]
-  }
-  return text
-}
-const popoverRef = ref()
-const selectRef = ref()
-const tagsSelectRef = ref()
-const show = (i: number) => {
-  if (selectList.value[i].type !== "select") return
-
-  if (tagsSelectRef.value[i] && tagsSelectRef.value[i].focus) tagsSelectRef.value[i].focus()
-}
-
-const onChange = (opt: { prop: string; label: string; value: unknown }) => {
-  for (let j in visibleMap.value) {
-    visibleMap.value[j] = false
-  }
-  select(
-    opt,
-    selectList.value.find((a) => a.prop == opt.prop),
-  )
-  for (let i in popoverRef.value) {
-    popoverRef.value[i].hide()
-  }
-}
-const select = (
-  option: {
-    prop: string
-    label: string
-    value: unknown
-  },
-  params?: I.ParamsItem,
-) => {
-  if (!params) return
-  const val = option.value
-  if (params.tableKey && params.tableKey.length && Array.isArray(val)) {
-    params.tableKey.forEach((a, i) => {
-      listQuery.value[a] = val[i]
-    })
-  } else {
-    listQuery.value[params.prop] = val
-  }
-  params.tagNames = option.label
-  emit("change", params)
-}
-const onClick = (item: I.ParamsItem) => {
-  if (["select"].includes(item.type)) {
-    return
-  }
-  emit("itemClick", item)
-}
-</script>

package/components/TableFilter/src/components/FilterToggle.vue

@@ -1,40 +0,0 @@
-<template>
-  <el-popover ref="popoverRef" trigger="click" placement="bottom-start" hide-delay="0" popper-class="table-filter-tag-popper">
-    <template #reference>
-      <div ref="toggleRef" class="table-filter-toggle">
-        <span class="current-filter-label">{{ props.selectParams[props.index]?.label }}</span>
-        <el-icon><ArrowDown /></el-icon>
-      </div>
-    </template>
-    <div ref="wrapperRef" class="table-filter-List">
-      <ul>
-        <template v-for="(item, i) in props.selectParams" :key="i">
-          <li v-if="!item.external" :class="{ active: props.index == i }" @click="select(i)">{{ item?.label }}</li>
-        </template>
-      </ul>
-    </div>
-  </el-popover>
-</template>
-<script lang="ts" setup>
-import { ArrowDown } from "@element-plus/icons-vue"
-import { type PropType, ref } from "vue"
-import * as I from "../../types"
-const props = defineProps({
-  selectParams: {
-    type: Array as PropType<Array<I.ParamsItem>>,
-    default: () => {
-      return []
-    },
-  },
-  index: {
-    type: Number,
-    default: 0,
-  },
-})
-const emits = defineEmits(["update:index"])
-const popoverRef = ref()
-const select = (i: number) => {
-  popoverRef.value.hide()
-  emits("update:index", i)
-}
-</script>

package/components/TableFilter/src/components/FilterType.vue

@@ -1,78 +0,0 @@
-<template>
-  <div v-if="visible" ref="wrapperRef" class="table-filter-type" :style="style" @mousedown.stop>
-    <component :is="typeList[params.type || 'input']" v-model="query[params.prop]" :list-query="listQuery" :params-item="params" @change="onChange" @cancel="onCancel" />
-  </div>
-</template>
-<script lang="ts" setup>
-import { type PropType, ref, type Ref, watch } from "vue"
-import * as I from "../../types"
-
-import * as Utils from "../../../../utils/common"
-import type { ListQuery } from "../../types"
-import TagsSelect from "./containers/TagsSelect.vue"
-
-const props = defineProps({
-  listQuery: {
-    type: Object as PropType<ListQuery>,
-    default: () => {
-      return {}
-    },
-  },
-})
-const emit = defineEmits(["click", "change", "cancel", "close"])
-const listQuery: Ref<ListQuery> = ref(props.listQuery)
-const query: Ref<ListQuery> = ref(Utils.deepClone(props.listQuery))
-const params = ref<I.ParamsItem>({} as I.ParamsItem)
-const visible: Ref<boolean> = ref(false)
-const style = ref({})
-const typeList: Record<string, unknown> = { select: TagsSelect }
-
-watch(
-  () => props.listQuery,
-  (val) => {
-    let q = Utils.deepClone(val)
-    let arr: Array<string> = []
-    if (params.value.tableKey && params.value.tableKey.length) {
-      params.value.tableKey.forEach((a) => {
-        arr.push(listQuery.value[a] + "")
-      })
-      q[params.value.prop] = arr
-    }
-    query.value = q
-  },
-  { immediate: true, deep: true },
-)
-const wrapperRef = ref()
-const open = (_event: Event, option: I.ParamsItem) => {
-  params.value = option
-  visible.value = true
-  console.log("params", params)
-  document.getElementById("app")?.addEventListener("mousedown", close)
-}
-const close = () => {
-  visible.value = false
-  emit("close")
-}
-defineExpose({ close, open })
-const onChange = (option: ChangeOption) => {
-  const val = option.value
-  if (params.value.tableKey && params.value.tableKey.length && Array.isArray(val)) {
-    params.value.tableKey.forEach((a, i) => {
-      listQuery.value[a] = val[i]
-    })
-  } else {
-    listQuery.value[option.prop] = val
-  }
-  emit("change", option, params.value)
-  close()
-}
-
-const onCancel = () => {
-  close()
-  emit("cancel")
-}
-interface ChangeOption {
-  prop: string
-  value: unknown
-}
-</script>

package/components/TableFilter/src/components/containers/TagsSelect.vue

@@ -1,89 +0,0 @@
-<template>
-  <div class="base-select" @click.stop>
-    <div v-if="ps.filterable" class="remote-input" @click.stop>
-      <el-input ref="selectInputRef" v-model="textModel" placeholder="输入搜索名称" clearable @input="onInput">
-        <template #prefix>
-          <el-icon class="el-input__icon"><Search /></el-icon>
-        </template>
-      </el-input>
-    </div>
-    <div v-loading="loading" class="select-spinner">
-      <ul v-if="options && options.length">
-        <li v-if="ps.all" :class="{ active: !model }" @click="onChange(allItem)">全部</li>
-        <li v-for="(item, index) in options" :key="index" :class="{ active: model === item.value }" @click="onChange(item)">{{ item.label }}</li>
-      </ul>
-      <el-empty v-else description="暂无数据" :image-size="40" />
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { Search } from "@element-plus/icons-vue"
-import { computed, inject, onMounted, type PropType, ref, type Ref } from "vue"
-import type { CurdFormOptionItem } from "../../../../CurdForm"
-import * as I from "../../../types"
-const emit = defineEmits(["update:modelValue", "change"])
-const props = defineProps({
-  paramsItem: {
-    type: Object as PropType<I.ParamsItem>,
-    default: () => {
-      return {}
-    },
-  },
-  modelValue: {
-    type: [Number, String, Boolean, Array],
-    default: "",
-  },
-  listQuery: {
-    type: Object as PropType<I.ListQuery>,
-    default: () => {
-      return {}
-    },
-  },
-})
-const model: Ref<string | number | boolean | Array<unknown>> = ref(props.modelValue)
-
-const tableFilterContext = inject<I.TableFilterContext>("tableFilter")
-
-const paramsItem = ref(props.paramsItem)
-const selectInputRef = ref()
-
-onMounted(() => {
-  const ps = props.paramsItem && props.paramsItem.props
-  if (typeof ps != "function" && ps?.filterable && !paramsItem.value.options?.length) {
-    selectInputRef.value.focus()
-    tableFilterContext?.loadOptions(paramsItem.value.prop)
-  }
-})
-const ps = computed(() => {
-  let ps = props.paramsItem && props.paramsItem.props
-  if (typeof ps == "function") {
-    return ps(props.listQuery, props.paramsItem)
-  }
-  return ps || {}
-})
-const textModel: Ref<string> = ref("")
-const loading: Ref<boolean> = ref(false)
-const allItem = { label: "全部", value: "" }
-
-const options = computed(() => {
-  return paramsItem.value.asyncOptions ? props.paramsItem.options : props.paramsItem.options?.filter((a) => a.label.includes(textModel.value))
-})
-
-const onChange = (row: CurdFormOptionItem) => {
-  paramsItem.value.tagNames = row.label
-  model.value = row.value
-  textModel.value = ""
-  emit("update:modelValue", model.value)
-  emit("change", { prop: paramsItem.value.prop, value: model.value, label: row.label })
-}
-const onInput = () => {
-  if (paramsItem.value.asyncOptions) {
-    paramsItem.value.options = []
-    tableFilterContext?.loadOptions(paramsItem.value.prop, { queryString: textModel.value })
-  }
-}
-const focus = () => {
-  if (selectInputRef.value) selectInputRef.value.focus()
-}
-defineExpose({ focus })
-</script>

package/components/TableFilter/types.ts

@@ -1,36 +0,0 @@
-import { defineComponent } from "vue"
-import type { CurdFormOptionItem, FormContext, FormItem, FormItemTypeEmun } from "../CurdForm"
-export interface ParamsItem extends FormItem {
-  type?: FormItemTypeEmun | ReturnType<typeof defineComponent>
-  tableKey?: Array<string>
-  external?: boolean | "left" | "right"
-  all?: boolean
-  sortIndex?: number // 排序，数字越大越靠前
-  tagNames?: string
-}
-export type FilterItem = ParamsItem
-export interface TableFilterContext {
-  loadOptions: (prop: string, config?: unknown) => void
-  setOptions: (prop: string, options: CurdFormOptionItem[], config?: unknown) => void
-  setValue: (prop: string, value: unknown) => void
-  search: () => void
-  formModel: ListQuery
-  components: FormContext["components"]
-  change: FormContext["change"]
-  formRef?: FormContext["formRef"]
-  formSchema?: FormContext["formSchema"]
-}
-
-export interface ListQuery {
-  [key: string]: unknown
-}
-export interface FilterOption {
-  formProps: {
-    labelWidth?: string | number
-    labelPosition?: "left" | "right" | "center" | string
-  }
-}
-
-export interface State {
-  isFocus: boolean
-}