ff-ui-plus 2.0.7

package/packages/components/module-form/src/moduleForm.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="t_form">
+    <el-collapse v-model="defaultActiveKey">
+      <el-collapse-item
+        v-for="(formOpt, formIndex) in formOpts"
+        :class="[
+          formOpt.className,
+          {
+            noTitle: !formOpt.title,
+            disabledStyle: formOpt.disabled,
+            title_bold: titleBold
+          }
+        ]"
+        :key="formIndex"
+        :name="formOpt.name"
+        :disabled="formOpt.disabled"
+      >
+        <template #title>
+          <span class="collapse-item_title">{{ formOpt.title }}</span>
+          <div class="t_btn" v-if="formOpt.btn">
+            <slot :name="formOpt.btn"></slot>
+          </div>
+        </template>
+        <template v-if="formOpt.slotName">
+          <slot :name="formOpt.slotName"></slot>
+        </template>
+        <t-form
+          :ref="
+            (el:any) => {
+              dashboardRef[formIndex] = el
+            }
+          "
+          :formOpts="formOpt.opts"
+          :widthSize="formOpt.widthSize || 3"
+          v-bind="attrs"
+          @handleEvent="handleEvent"
+        >
+          <template v-for="(_index, name) in slots" v-slot:[name]="data">
+            <slot :name="name" v-bind="data"></slot>
+          </template>
+        </t-form>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useAttrs, useSlots } from "vue"
+defineOptions({
+  name: "ModuleForm"
+})
+const props: any = defineProps({
+  // 表单配置项
+  formOpts: {
+    type: Object,
+    default: () => ({})
+  },
+  // 是否Title文字加粗
+  titleBold: {
+    type: Boolean,
+    default: false
+  }
+})
+const dashboardRef = ref({}) as any
+const slots = useSlots()
+const attrs: any = useAttrs()
+// 抛出ref
+const getChildRef = (index: string | number) => {
+  const childRef = dashboardRef.value[index]
+  return childRef
+}
+// 暴露方法出去
+defineExpose({ getChildRef })
+const defaultActiveKey = computed({
+  get() {
+    // console.log(333, Object.keys(this.formOpts))
+    return Object.keys(props.formOpts)
+  },
+  set(val) {
+    return val
+  }
+})
+// 抛出事件
+const emits = defineEmits(["handleEvent"])
+const handleEvent = (val: any, type: any) => {
+  emits("handleEvent", val, type)
+}
+</script>

package/packages/components/module-form/src/type.ts

@@ -0,0 +1,16 @@
+export interface TModuleFormProps {
+  handleType?: "edit" | "desc"
+  isShowHeader?: boolean
+  titleSlot?: boolean
+  isShowBack?: boolean
+  isGoBackEvent?: boolean
+  btnSaveBind?: Record<string, any>
+  btnCancelBind?: Record<string, any>
+  isTabMargin?: boolean
+  tabMarginNum?: number
+  footer?: any
+  title?: string
+  subTitle?: string
+  tabs?: Array<{ key: string; title: string }>
+  submit?: (form: Record<string, any>) => Promise<boolean>
+}

package/packages/components/module-form/style/css.ts

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

package/packages/components/module-form/style/index.ts

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

package/packages/components/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@ff-ui-plus/components",
+  "version": "0.0.1",
+  "private": false,
+  "description": "all components are settled here",
+  "main": "index.ts",
+  "type": "module",
+  "sideEffects": false
+}

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

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

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

@@ -0,0 +1,478 @@
+<template>
+  <el-form
+    id="t_query_condition"
+    v-bind="$attrs"
+    :label-width="labelWidth"
+    :form="queryState.form"
+    :labelPosition="labelPosition"
+    size="default"
+    class="t-query-condition"
+    :style="{
+      'grid-template-areas': gridAreas,
+      'grid-template-columns': `repeat(${colLength}, minmax(0px, ${100 / colLength}%))`
+    }"
+    @submit.prevent
+  >
+    <el-form-item
+      v-for="(opt, i) in cOpts"
+      :key="i"
+      :label="opt.label"
+      :label-width="opt.labelWidth"
+      v-bind="$attrs"
+      :style="{ gridArea: i }"
+      :class="[
+        opt.className,
+        {
+          render_label: opt.labelRender,
+          render_label_position_top: labelPosition == 'top' && opt.labelRender,
+          render_label_position_left: labelPosition == 'left' && opt.labelRender
+        }
+      ]"
+    >
+      <!-- 自定义label -->
+      <template #label v-if="opt.labelRender">
+        <render-comp :form="queryState.form" :render="opt.labelRender" />
+      </template>
+      <!-- 自定义输入框插槽 -->
+      <template v-if="opt.slotName">
+        <slot :name="opt.slotName" :param="queryState.form" :scope="queryState.form"></slot>
+      </template>
+      <template v-if="opt.isSelfCom">
+        <component
+          :is="opt.comp"
+          :ref="opt.comp === 't-select-table' ? (el: any) => handleRef(el,opt, i) : (el: any) => getRefs(el, opt, i)"
+          v-model="queryState.form[opt.dataIndex]"
+          :placeholder="opt.placeholder || getPlaceholder(opt)"
+          v-bind="
+            typeof opt.bind == 'function'
+              ? opt.bind(queryState.form)
+              : { clearable: true, filterable: true, ...$attrs, ...opt.bind }
+          "
+          :style="{ width: opt.width || '100%' }"
+          @change="handleEvent({ type: opt.event, val: queryState.form[opt.dataIndex] })"
+          v-on="cEvent(opt)"
+        />
+      </template>
+      <component
+        v-if="!opt.isSelfCom && !opt.slotName"
+        :is="opt.comp"
+        v-bind="
+          typeof opt.bind == 'function'
+            ? opt.bind(queryState.form)
+            : { clearable: true, filterable: true, ...$attrs, ...opt.bind }
+        "
+        :placeholder="opt.placeholder || getPlaceholder(opt)"
+        @change="handleEvent({ type: opt.event, val: queryState.form[opt.dataIndex] })"
+        :ref="(el: any) => getRefs(el, opt, i)"
+        v-on="cEvent(opt)"
+        v-model="queryState.form[opt.dataIndex]"
+      >
+        <component
+          :is="compChildName(opt)"
+          v-for="(value, key) in selectListType(opt)"
+          :key="key"
+          :disabled="value.disabled"
+          :label="compChildLabel(opt, value)"
+          :value="compChildValue(opt, value, key)"
+          >{{ compChildShowLabel(opt, value) }}</component
+        >
+      </component>
+    </el-form-item>
+    <el-form-item
+      v-if="Object.keys(cOpts).length > 0"
+      label-width="0"
+      style="grid-area: submit_btn"
+      :class="[
+        'btn',
+        { flex_end: cellLength % colLength === 0 },
+        { btn_flex_end: Object.keys(cOpts).length === 4 || cellLength > 3 },
+        { btn_label_position_top: labelPosition == 'top' }
+      ]"
+    >
+      <template v-if="isFooter">
+        <slot name="footerBtn" />
+        <template v-if="!slots.footerBtn">
+          <el-button
+            class="btn_check"
+            @click="checkHandle"
+            v-bind="{ type: 'primary', ...queryAttrs }"
+            :loading="loading"
+            >{{ queryAttrs.btnTxt }}</el-button
+          >
+          <el-button v-if="reset" class="btn_reset" v-bind="resetAttrs" @click="resetHandle">
+            {{ resetAttrs.btnTxt }}
+          </el-button>
+          <slot name="querybar"></slot>
+          <el-button
+            v-if="originCellLength > maxVisibleRows * colLength && showOpen"
+            @click="open = !open"
+            link
+          >
+            {{ open ? packUpTxtText : unfoldTxtText }}
+            <el-icon v-if="open">
+              <ArrowUp />
+            </el-icon>
+            <el-icon v-else>
+              <ArrowDown />
+            </el-icon>
+          </el-button>
+          <more-choose
+            :isDropDownSelectMore="isDropDownSelectMore"
+            :moreCheckList="moreCheckList"
+            :popoverAttrsBind="popoverAttrsBind"
+            @getCheckList="event => emits('getCheckList', event)"
+          />
+        </template>
+      </template>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import RenderComp from "@ff-ui-plus/components/query-condition/src/renderComp.vue"
+import MoreChoose from "@ff-ui-plus/components/query-condition/src/moreChoose.vue"
+import { computed, ref, watch, useSlots, onMounted, reactive } from "vue"
+import { ArrowUp, ArrowDown } from "@element-plus/icons-vue"
+import type { TQueryConditionProps } from "./type"
+import { useComputed } from "./useComputed"
+import { useLocale } from "@ff-ui-plus/hooks"
+const {
+  compChildName,
+  selectListType,
+  compChildLabel,
+  compChildValue,
+  compChildShowLabel,
+  getColLength
+} = useComputed()
+const { t } = useLocale()
+const props = withDefaults(defineProps<TQueryConditionProps>(), {
+  opts: () => ({}),
+  labelWidth: "120px",
+  btnCheckBind: () => ({}),
+  btnResetBind: () => ({}),
+  loading: false,
+  reset: true,
+  boolEnter: true,
+  isShowOpen: true,
+  isExpansion: false,
+  maxVisibleRows: 1,
+  // 不在模块顶层调用 t(...)，否则在构建/SSR 阶段会导致错误
+  packUpTxt: "",
+  unfoldTxt: "",
+  isFooter: true,
+  configChangedReset: false,
+  isShowWidthSize: false,
+  widthSize: 4,
+  isDropDownSelectMore: false,
+  moreCheckList: () => [],
+  popoverAttrs: () => ({}),
+  labelPosition: "right"
+})
+defineOptions({
+  name: "TQueryCondition"
+})
+const slots = useSlots()
+// 判断是否使用了某个插槽
+const isShow = (name: string) => {
+  return Object.keys(slots).includes(name)
+}
+const popoverAttrsBind = computed(() => {
+  return {
+    showTxt: t("plus.search.popoverAttrs.showTxt"),
+    title: t("plus.search.popoverAttrs.title"),
+    allTxt: t("plus.search.popoverAttrs.allTxt"),
+    reverseTxt: t("plus.search.popoverAttrs.reverseTxt"),
+    clearTxt: t("plus.search.popoverAttrs.clearTxt"),
+    ...props.popoverAttrs
+  }
+})
+// 初始化表单数据
+let queryState = reactive({
+  form: Object.keys(props.opts).reduce((acc: any, field: any) => {
+    acc[field] = props.opts[field].defaultVal ?? null
+    return acc
+  }, {})
+})
+let colLength = ref(4)
+let showOpen = ref(false)
+
+let open = ref(false)
+// placeholder的显示
+const getPlaceholder = (row: any) => {
+  // console.log(77, row)
+  let placeholder
+  if (row.comp && typeof row.comp == "string") {
+    if (row.comp.includes("input")) {
+      placeholder = t("plus.search.pleaseEnter") + row.label
+    } else if (row.comp.includes("select") || row.comp.includes("date")) {
+      placeholder = t("plus.search.pleaseSelect") + row.label
+    } else {
+      placeholder = row.label
+    }
+  }
+  return placeholder
+}
+// 查询按钮配置
+const queryAttrs = computed(() => {
+  return {
+    btnTxt: t("plus.search.searchText"),
+    ...props.btnCheckBind
+  }
+})
+// 重置按钮配置
+const resetAttrs = computed(() => {
+  return { btnTxt: t("plus.search.resetText"), ...props.btnResetBind }
+})
+const originCellLength = computed(() => {
+  let length = 0
+  Object.keys(props.opts).forEach(key => {
+    let span = props.opts[key].span || 1
+    if ((length % colLength.value) + span > colLength.value) {
+      length += colLength.value - (length % colLength.value)
+    }
+    length += span
+  })
+  return length
+})
+const cOpts = computed(() => {
+  let renderSpan = 0
+  return Object.keys(props.opts).reduce((acc: any, field: any) => {
+    let opt = {
+      ...props.opts[field]
+    }
+    // 收起、展开操作
+    if (showOpen.value) {
+      renderSpan += opt.span ?? 1
+      if (!open.value && renderSpan - 1 >= props.maxVisibleRows * colLength.value) {
+        return acc
+      }
+    }
+    opt.dataIndex = field
+    acc[field] = opt
+    return acc
+  }, {})
+})
+const cellLength: any = computed(() => {
+  // 占用单元格长度
+  let length = 0
+  Object.keys(props.opts).forEach(key => {
+    let span = props.opts[key].span > 4 ? 4 : props.opts[key].span || 1
+    length += span
+  })
+  return length
+})
+const gridAreas = computed(() => {
+  // grid布局按钮位置
+  const fields = Object.keys(cOpts.value)
+  let rowIndex = 0
+  let rowSpan = 0
+  const areas: any = [[]]
+  for (let fieldIndex = 0; fieldIndex < fields.length; fieldIndex++) {
+    const field = fields[fieldIndex]
+    const opt = cOpts.value[field]
+    const span = Math.min(opt.span ?? 1, Math.min(colLength.value, 4)) // 最大4
+    if (rowSpan + span > colLength.value) {
+      while (rowSpan < colLength.value) {
+        areas[rowIndex].push(".")
+        rowSpan += 1
+      }
+      rowSpan = 0
+      areas[++rowIndex] = []
+    }
+    rowSpan += span
+    for (let index = 0; index < span; index++) {
+      areas[rowIndex].push(field)
+    }
+  }
+  if (areas[rowIndex].length === colLength.value) {
+    areas.push(Array(colLength.value).fill("submit_btn"))
+  } else {
+    while (areas[rowIndex].length < colLength.value) {
+      areas[rowIndex].push("submit_btn")
+    }
+  }
+  return areas.reduce((acc: string, cur: any[]) => {
+    acc += `'${cur.join(" ")}'\n`
+    return acc
+  }, "")
+})
+
+const packUpTxtText = computed(() => props.packUpTxt || t("plus.search.retract"))
+const unfoldTxtText = computed(() => props.unfoldTxt || t("plus.search.expand"))
+// 引用第三方事件
+const cEvent = computed(() => {
+  return (opt: { eventHandle: any; comp: string | string[] }) => {
+    // console.log('opt--', opt)
+    let event = { ...opt.eventHandle }
+    let changeEvent = {} as any
+    Object.keys(event).forEach(v => {
+      changeEvent[v] = (e: any) => {
+        if (
+          opt.comp.includes("select") ||
+          opt.comp.includes("picker") ||
+          opt.comp.includes("date")
+        ) {
+          event[v] && event[v](e, queryState.form)
+        } else {
+          if (e) {
+            event[v] && event[v](e, queryState.form)
+          } else {
+            event[v] && event[v](queryState.form)
+          }
+        }
+      }
+    })
+    return { ...changeEvent }
+  }
+})
+// 初始化表单数据
+const initForm = (opts: any, keepVal = false) => {
+  return Object.keys(opts).reduce((acc: any, field) => {
+    if (keepVal && queryState.form) {
+      acc[field] = queryState.form[field] ?? opts[field].defaultVal ?? null
+    } else {
+      acc[field] = opts[field].defaultVal ?? null
+    }
+    return acc
+  }, {})
+}
+const emits = defineEmits(["handleEvent", "submit", "reset", "getCheckList", "getRefs"])
+// 下拉选择表格组件 ref
+const tselecttableref: any = ref({})
+// 下拉选择表格组件 动态ref
+const handleRef = (el: any, opt: any, key: any) => {
+  emits("getRefs", el, opt, key)
+  if (el) {
+    tselecttableref.value[`tselecttableref-${key}`] = el
+  }
+}
+// 获取所有ref
+const getRefs = (el: any, opt: any, index: any) => {
+  emits("getRefs", el, opt, index)
+}
+// 重置
+const resetHandle = () => {
+  queryState.form = initForm(props.opts)
+  // 获取所有下拉选择表格组件
+  const refList = Object.keys(tselecttableref.value).filter(item =>
+    item.includes("tselecttableref")
+  )
+  if (refList.length > 0 && tselecttableref.value) {
+    refList.map(val => {
+      // console.log('9999', val)
+      tselecttableref.value[val].clear()
+    })
+  }
+  emits("reset", queryState.form)
+  checkHandle("reset")
+}
+// 重置数据
+const resetData = () => {
+  queryState.form = initForm(props.opts)
+  // 获取所有下拉选择表格组件
+  const refList = Object.keys(tselecttableref.value).filter(item =>
+    item.includes("tselecttableref")
+  )
+  if (refList.length > 0 && tselecttableref.value) {
+    refList.map(val => {
+      // console.log('9999', val)
+      tselecttableref.value[val].clear()
+    })
+  }
+}
+
+// 查询条件change事件
+const handleEvent = (
+  { isChange = false, type, val }: { isChange?: boolean; type: string; val: any },
+  dataIndex?: string
+) => {
+  if (!isChange) {
+    emits("handleEvent", type, val, queryState.form)
+  } else if (dataIndex) {
+    queryState.form[dataIndex] = val
+  }
+}
+
+// 查询
+const checkHandle = (flagText: any = false) => {
+  emits("submit", queryState.form, flagText)
+}
+
+onMounted(() => {
+  // 是否显示展开按钮
+  if (props.isShowOpen) {
+    showOpen.value = true
+  } else {
+    showOpen.value = false
+  }
+  // 默认展开
+  if (props.isExpansion) {
+    open.value = true
+  } else {
+    open.value = false
+  }
+  if (props.isShowWidthSize) {
+    colLength.value = props.widthSize
+  } else {
+    colLength.value = getColLength()
+  }
+  if (props.boolEnter) {
+    document.onkeyup = e => {
+      // console.log(7777, e)
+      let key = e.keyCode
+      let pagination = document.querySelectorAll(".el-pagination")
+      let isPaginationInputFocus = false
+      if (pagination) {
+        pagination.forEach(ele => {
+          let paginationInputList = ele.getElementsByTagName("input")
+          let paginationInput = paginationInputList[paginationInputList.length - 1]
+          // 判断是否有分页器筛选输入框获取焦点
+          if (paginationInput === document.activeElement) {
+            isPaginationInputFocus = true
+          }
+        })
+      }
+      if (isPaginationInputFocus) {
+        return
+      }
+      if (key === 13) {
+        checkHandle()
+      }
+    }
+  }
+  // 使用自定义按钮插槽默认展开所有查询条件
+  if (isShow("footerBtn") || !props.isFooter) {
+    // console.log("使用自定义按钮插槽默认展开所有查询条件", props.isFooter)
+    open.value = true
+  }
+  // 以下拉方式展示更多条件禁用展开&收起功能
+  if (props.isDropDownSelectMore) {
+    open.value = true
+    showOpen.value = false
+  }
+})
+watch(
+  () => props.widthSize,
+  val => {
+    colLength.value = val
+  }
+)
+watch(
+  () => props.opts,
+  opts => {
+    queryState.form = initForm(opts, !props.configChangedReset)
+  },
+  { deep: true }
+)
+
+// 暴露方法出去
+defineExpose({
+  queryState,
+  props,
+  colLength,
+  resetData,
+  resetHandle,
+  checkHandle,
+  handleEvent
+})
+</script>