ff-ui-plus 2.0.7

package/packages/components/table/src/operator.vue

@@ -0,0 +1,246 @@
+<template>
+  <!-- 操作按钮 -->
+  <el-table-column
+    v-if="table.operator"
+    v-bind="{
+      fixed: table.operatorConfig?.fixed,
+      label: table.operatorConfig?.label || t('plus.table.operator.label'),
+      'min-width': table.operatorConfig?.minWidth,
+      width: table.operatorConfig?.width,
+      align: table.operatorConfig?.align || align,
+      ...table.operatorConfig?.bind
+    }"
+    class-name="operator"
+  >
+    <template #default="scope">
+      <div
+        class="operator_btn"
+        :style="{
+          justifyContent:
+            (table.operatorConfig?.align || align) == 'center'
+              ? 'center'
+              : (table.operatorConfig?.align || align) == 'right'
+              ? 'flex-end'
+              : 'flex-start',
+          ...table.operatorConfig?.style
+        }"
+      >
+        <template v-for="(item, index) in table.operator">
+          <template v-if="!item.isMore">
+            <el-button
+              :key="index"
+              @click="item.fun && item.fun(scope.row, scope.$index, tableData)"
+              :disabled="item.isDisabled && item.isDisabled(scope.row, item)"
+              v-bind="{
+                type: 'primary',
+                link: true,
+                text: true,
+                size: 'small',
+                ...item.bind
+              }"
+              v-if="checkIsShow(scope, item)"
+            >
+              <template v-if="item.render">
+                <render-col
+                  :column="item"
+                  :row="scope.row"
+                  :render="item.render"
+                  :index="scope.$index"
+                />
+              </template>
+              <span v-if="!item.render">{{ item.text }}</span>
+            </el-button>
+          </template>
+        </template>
+        <template v-if="hasMoreOper() && isTotalPage(scope)">
+          <el-dropdown v-bind="hasMoreBind" class="oper_more_dropdown" v-if="hasMoreItems(scope)">
+            <span class="more_dropdown-link">
+              <el-button
+                v-bind="{
+                  type: 'primary',
+                  link: true,
+                  text: true,
+                  size: 'small',
+                  ...hasMoreBind.btnBind
+                }"
+              >
+                {{ hasMoreBind.btnTxt || t("plus.table.operator.more") }}
+                <el-icon v-if="hasMoreBind.isShowArrwIcon">
+                  <ArrowDown />
+                </el-icon>
+              </el-button>
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu v-bind="hasMoreBind.menuBind" class="oper_more_dropdown_menu">
+                <template v-for="(item, index) in table.operator">
+                  <el-dropdown-item
+                    v-if="item.isMore && checkIsShow(scope, item)"
+                    @click="item.fun && item.fun(scope.row, scope.$index, tableData)"
+                    :key="'more_' + index"
+                    v-bind="{
+                      disabled: item.isDisabled && item.isDisabled(scope.row, item),
+                      ...item.itemBind
+                    }"
+                  >
+                    <el-button
+                      :key="index"
+                      v-bind="{
+                        link: true,
+                        text: true,
+                        size: 'small',
+                        disabled: item.isDisabled && item.isDisabled(scope.row, item),
+                        ...item.bind
+                      }"
+                    >
+                      <template v-if="item.render">
+                        <render-col
+                          :column="item"
+                          :row="scope.row"
+                          :render="item.render"
+                          :index="scope.$index"
+                        />
+                      </template>
+                      <span v-if="!item.render">{{ item.text }}</span>
+                    </el-button>
+                  </el-dropdown-item>
+                </template>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </template>
+      </div>
+    </template>
+  </el-table-column>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue"
+import { ArrowDown } from "@element-plus/icons-vue"
+import RenderCol from "@ff-ui-plus/components/table/src/renderCol.vue"
+import { useLocale } from "@ff-ui-plus/hooks"
+const { t } = useLocale()
+const props = defineProps({
+  tableData: {
+    type: Array,
+    default: () => []
+  },
+  table: { type: Object, default: () => {} },
+  btnPermissions: {
+    type: Array,
+    default: () => []
+  },
+  align: {
+    type: String,
+    default: "center"
+  }
+})
+defineOptions({
+  name: "Operator"
+})
+
+// 是否显示表格操作按钮
+const checkIsShow = (
+  scope: { row: { [s: string]: unknown } | ArrayLike<unknown> | any },
+  item: {
+    noshow: any
+    show: { val: string | any[]; key: string | number }
+    hasPermi: any
+    field: string | number
+    isField: string | number
+  }
+) => {
+  let isNoshow = false
+  if (item.noshow) {
+    // 解决双重判断循环递归
+    let nushowFun = JSON.parse(JSON.stringify(item.noshow))
+    // 双重判断
+    nushowFun.map((rs: { isShow: string; val: string | any[]; key: string | number }) => {
+      rs.isShow =
+        typeof rs.val === "string"
+          ? rs.val === "isHasVal"
+            ? scope.row[rs.key]
+              ? "true"
+              : "false"
+            : "true"
+          : rs.val.includes(scope.row[rs.key])
+          ? "false"
+          : "true"
+    })
+    isNoshow = nushowFun.every((key: { isShow: string }) => {
+      return key.isShow === "true"
+    })
+  } else {
+    isNoshow = true
+  }
+  // 单独判断
+  // let isShow = !item.show || item.show.val.includes(scope.row[item.show.key])
+  // 多重判断
+  let isShow = true
+  if (Array.isArray(item.show)) {
+    const showConditions = item.show
+    isShow = showConditions.some(condition => condition.val.includes(scope.row[condition.key]))
+  } else if (item.show) {
+    isShow = item.show.val.includes(scope.row[item.show.key])
+  }
+  // 按钮权限
+  let isPermission = item.hasPermi ? props.btnPermissions?.includes(item.hasPermi) : true
+  // table页面合计
+  let totalTxt = Object.values(scope.row).every(key => {
+    return key !== t("plus.table.operator.sum")
+  })
+  // table页面合计
+  let totalTxt1 = Object.values(scope.row).every(key => {
+    return key !== t("plus.table.operator.allSum")
+  })
+  let totalTxt2 = Object.values(scope.row).every(key => {
+    return key !== t("plus.table.operator.total")
+  })
+  return (
+    isShow &&
+    isNoshow &&
+    !scope.row[item.field] &&
+    (item.isField ? scope.row[item.isField] : true) &&
+    totalTxt &&
+    totalTxt1 &&
+    totalTxt2 &&
+    isPermission
+  )
+}
+const isTotalPage = (scope: { row: { [s: string]: unknown } | ArrayLike<unknown> | any }) => {
+  let totalTxt = Object.values(scope.row).every(key => {
+    return key !== t("plus.table.operator.sum")
+  })
+  // table页面合计
+  let totalTxt1 = Object.values(scope.row).every(key => {
+    return key !== t("plus.table.operator.allSum")
+  })
+  let totalTxt2 = Object.values(scope.row).every(key => {
+    return key !== t("plus.table.operator.total")
+  })
+  return totalTxt && totalTxt1 && totalTxt2
+}
+// 更多下拉配置
+const $attrs = useAttrs()
+const hasMoreBind: any = computed(() => {
+  const btnBind = { type: "primary", link: true, text: true, size: "small" } // 按钮属性
+  const menuBind = {} // 下拉menu属性
+  const setBind = {
+    btnTxt: t("plus.table.operator.more"),
+    isShowArrwIcon: true, // 是否显示下拉箭头
+    ...menuBind, // 下拉menu属性
+    ...btnBind, // 按钮属性
+    ...props.table.operatorConfig.dropdownBind // 下拉属性
+  }
+  return { ...$attrs, ...setBind }
+})
+// 判断操作是否显示最多
+const hasMoreOper = () => {
+  return props.table.operator.some((item: { isMore: boolean }) => item.isMore === true)
+}
+// 判断是否显示更多按钮
+const hasMoreItems = computed(() => {
+   return (scope: any) => {
+     return props.table.operator?.some((item: any) => item.isMore && checkIsShow(scope, item))
+   }
+})
+</script>

package/packages/components/table/src/renderCol.vue

@@ -0,0 +1,20 @@
+<template>
+  <component :is="renderComponent" />
+</template>
+<script lang="ts" setup>
+defineOptions({
+  name: "RenderCol"
+})
+const props: any = defineProps({
+  row: Object,
+  render: Function,
+  index: Number,
+  column: {
+    type: Object,
+    default: null
+  }
+})
+const renderComponent = () => {
+  return props.render(props?.row[props?.column?.prop], props.row, props.index)
+}
+</script>

package/packages/components/table/src/renderHeader.vue

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

package/packages/components/table/src/singleEdit.vue

@@ -0,0 +1,354 @@
+<template>
+  <div @click="onFieldClick" class="single_edit_cell">
+    <div class="cell-content" v-if="!editMode">
+      <el-tooltip
+        v-if="configEdit.isShowTips"
+        class="item"
+        v-bind="{
+          effect: 'light',
+          content: t('plus.table.singleEdit.tipText'),
+          placement: 'top',
+          ...configEdit.tipbind
+        }"
+      >
+        <div v-if="childCom.includes(configEdit.type)">{{ childVal }}&nbsp;</div>
+        <div v-else>{{ model }}&nbsp;</div>
+        <slot name="content"></slot>
+      </el-tooltip>
+      <template v-else>
+        <div v-if="childCom.includes(configEdit.type)">{{ childVal }}&nbsp;</div>
+        <div v-else>{{ model }}&nbsp;</div>
+        <slot name="content"></slot>
+      </template>
+    </div>
+    <template v-if="editMode">
+      <template v-if="configEdit.editSlotName">
+        <div :class="[prop, 'slot_edit_name']">
+          <slot :name="configEdit.editSlotName" :scope="scope" />
+        </div>
+      </template>
+      <template v-if="configEdit.isSelfCom">
+        <component
+          v-if="configEdit.editComponent === 't-select-table'"
+          :ref="(el:any) => handleRef(el)"
+          :is="configEdit.editComponent"
+          :placeholder="configEdit.placeholder || getPlaceholder(configEdit)"
+          v-bind="
+            typeof configEdit.bind == 'function'
+              ? configEdit.bind(scope)
+              : { clearable: true, filterable: true, ...configEdit.bind }
+          "
+          :style="{ width: configEdit.width || '100%' }"
+          v-on="cEvent(configEdit, 't-select-table')"
+        />
+        <component
+          v-else
+          :is="configEdit.editComponent"
+          v-model="model"
+          :type="configEdit.type"
+          :placeholder="configEdit.placeholder || getPlaceholder(configEdit)"
+          ref="parentCom"
+          v-bind="
+            typeof configEdit.bind == 'function'
+              ? configEdit.bind(scope)
+              : { clearable: true, filterable: true, ...configEdit.bind }
+          "
+          @change="handleEvent(configEdit.event, model, configEdit.type)"
+          :style="{ width: configEdit.width || '100%' }"
+          v-on="cEvent(configEdit)"
+        />
+      </template>
+      <component
+        v-if="!configEdit.editSlotName && !configEdit.isSelfCom"
+        :is="configEdit.editComponent || 'el-input'"
+        v-model="model"
+        :type="configEdit.type"
+        :placeholder="configEdit.placeholder || getPlaceholder(configEdit)"
+        :class="prop"
+        ref="parentCom"
+        @change="handleEvent(configEdit.event, model, configEdit.type)"
+        @keyup.enter.native="onInputExit"
+        @blur="onInputExit"
+        v-bind="
+          typeof configEdit.bind == 'function'
+            ? configEdit.bind(scope)
+            : { clearable: true, filterable: true, ...configEdit.bind }
+        "
+        :style="{ width: configEdit.width || '100%' }"
+        v-on="cEvent(configEdit)"
+      >
+        <template v-for="(_index, name) in slots" v-slot:[name]="data">
+          <slot :name="name" v-bind="data"></slot>
+        </template>
+        <template #prepend v-if="configEdit.prepend">{{ configEdit.prepend }}</template>
+        <template #append v-if="configEdit.append">{{ configEdit.append }}</template>
+        <slot name="editChild" />
+        <div v-if="!$slots.editChild">
+          <component
+            :is="compChildName(configEdit)"
+            v-for="(value, key) in listTypeInfo[configEdit.list]"
+            :key="key"
+            :disabled="value.disabled"
+            :label="compChildLabel(configEdit, value)"
+            :value="compChildValue(configEdit, value, key)"
+            >{{ compChildShowLabel(configEdit, value) }}</component
+          >
+        </div>
+      </component>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch, useSlots } from "vue"
+import { useLocale } from "@ff-ui-plus/hooks"
+const { t } = useLocale()
+defineOptions({
+  name: "SingleEdit"
+})
+const props = defineProps({
+  /** 编辑配置项说明
+   * label: '爱好', // placeholder显示
+   * editComponent: 'el-select', // 组件
+   * type: 'select-arr', // option显示
+   * list: 'hobbyList', // 下拉选择数据源
+   * arrLabel: 'label', // 下拉选择中文显示
+   * arrKey: 'value' // 下拉选择number显示（最终传后台）
+   * bind:{} // 组件衍生属性（即第三方组件属性）
+   */
+  configEdit: {
+    type: Object as any,
+    default: () => ({})
+  },
+  // 下拉选择数据源
+  listTypeInfo: {
+    type: Object,
+    default: () => ({})
+  },
+  scope: {
+    type: Object,
+    default: () => ({})
+  },
+  prop: {
+    type: String,
+    default: "prop"
+  },
+  // 是否开启单击编辑
+  isClickEdit: {
+    type: Boolean,
+    default: false
+  },
+  modelValue: {
+    type: [String, Number, Object, Array, Date]
+  },
+  // 列for index
+  indexColumns: [String, Number]
+})
+// 抛出事件
+const emits = defineEmits(["handleEvent", "update:modelValue"])
+const slots = useSlots()
+const childCom = ref(["select-arr", "checkbox", "radio", "select-obj", "el-select-multiple"])
+const editMode = ref(false)
+// 下拉选择表格组件 ref
+const tselecttableref: any = ref({})
+// 下拉选择表格组件 动态ref
+const handleRef = (el: any) => {
+  if (el) {
+    tselecttableref.value[`tselecttableref-${props.indexColumns}`] = el
+  }
+}
+// 重置下拉表格
+const resetClickTselectTable = () => {
+  // 获取所有下拉选择表格组件
+  const refList = Object.keys(tselecttableref.value).filter(item =>
+    item.includes("tselecttableref")
+  )
+  if (refList.length > 0 && tselecttableref.value) {
+    refList.map(val => {
+      tselecttableref.value[val].clear()
+    })
+  }
+}
+let model: any = computed({
+  get() {
+    return props?.modelValue
+  },
+  set(val) {
+    emits("update:modelValue", val)
+  }
+})
+watch(
+  () => props.modelValue,
+  data => {
+    model.value = data
+  }
+)
+// 引用第三方事件
+const cEvent: any = computed(() => {
+  return ({ eventHandle }: any, type = "") => {
+    let event = { ...eventHandle }
+    let changeEvent = {} as any
+    Object.keys(event).forEach(v => {
+      changeEvent[v] = (e: any, ids: any) => {
+        if (type === "t-select-table") {
+          const argument = {
+            row: e,
+            ids: ids,
+            prop: props.prop,
+            scope: props.scope
+          }
+          event[v] && event[v](argument)
+        } else {
+          if ((typeof e === "number" && e === 0) || e) {
+            event[v] && event[v]({ val: e, prop: props.prop, scope: props.scope })
+          } else {
+            event[v] && event[v]({ prop: props.prop, scope: props.scope })
+          }
+        }
+      }
+    })
+    return { ...changeEvent }
+  }
+})
+const childVal = computed({
+  get() {
+    let valLabel
+    let checkboxVal = [] as any
+    let selcetMultiple = [] as any
+    props.listTypeInfo[props.configEdit.list] &&
+      props.listTypeInfo[props.configEdit.list].map((val: any) => {
+        switch (props.configEdit.type) {
+          case "checkbox":
+          case "radio":
+            if (model.value.join(",").includes(val.value)) {
+              checkboxVal.push(val.label)
+            }
+            valLabel = checkboxVal.join(",")
+            break
+          case "select-arr":
+            // eslint-disable-next-line eqeqeq
+            if (model.value == val[props.configEdit.arrKey]) {
+              valLabel = val[props.configEdit.arrLabel]
+            }
+            break
+          case "el-select-multiple":
+            if (model.value && model.value.join(",").includes(val[props.configEdit.arrKey])) {
+              selcetMultiple.push(val[props.configEdit.arrLabel])
+            }
+            valLabel = selcetMultiple.join(",")
+            break
+          case "select-obj":
+            valLabel = val
+            break
+        }
+      })
+    return valLabel
+  },
+  set(val) {
+    return val
+  }
+})
+// 子组件名称
+const compChildName = computed(() => {
+  return (configEdit: { type: any }) => {
+    switch (configEdit.type) {
+      case "checkbox":
+        return "el-checkbox"
+      case "radio":
+        return "el-radio"
+      case "el-select-multiple":
+      case "select-arr":
+      case "select-obj":
+        return "el-option"
+    }
+  }
+})
+// 子子组件label
+const compChildLabel = computed(() => {
+  return (configEdit: { type: any; arrLabel: any }, value: { [x: string]: any; value: any }) => {
+    switch (configEdit.type) {
+      case "radio":
+      case "checkbox":
+        return value[configEdit.arrLabel || "label"]
+      case "el-select-multiple":
+      case "select-arr":
+        return value[configEdit.arrLabel || "label"]
+      case "select-obj":
+        return value
+    }
+  }
+})
+// 子子组件value
+const compChildValue = computed(() => {
+  return (
+    configEdit: { type: any; arrKey: any },
+    value: { [x: string]: any; value: any },
+    key: any
+  ) => {
+    switch (configEdit.type) {
+      case "radio":
+      case "checkbox":
+        return value[configEdit.arrKey || "key"]
+      case "el-select-multiple":
+      case "select-arr":
+        return value[configEdit.arrKey || "key"]
+      case "select-obj":
+        return key
+    }
+  }
+})
+// 子子组件文字展示
+const compChildShowLabel = computed(() => {
+  return (configEdit: { type: any; arrLabel: any }, value: { [x: string]: any; label: any }) => {
+    switch (configEdit.type) {
+      case "radio":
+      case "checkbox":
+        return value[configEdit.arrLabel || "label"]
+      case "el-select-multiple":
+      case "select-arr":
+        return value[configEdit.arrLabel || "label"]
+      case "select-obj":
+        return value
+    }
+  }
+})
+const parentCom = ref<null | any>()
+// 点击外层开启编辑focus
+const onFieldClick = () => {
+  if (props.isClickEdit) {
+    editMode.value = true
+    nextTick(() => {
+      let parentRef = parentCom.value
+      if (parentRef && parentRef.focus) {
+        parentRef.focus()
+      }
+    })
+  }
+}
+const onInputExit = () => {
+  editMode.value = false
+}
+// placeholder的显示
+const getPlaceholder = (row: any) => {
+  if (!row.editComponent || typeof row.editComponent !== "string") {
+    return row.label
+  }
+  const componentType = row.editComponent.toLowerCase()
+  if (componentType.includes("input")) {
+    return t("plus.table.pleaseEnter") + row.label
+  } else if (componentType.includes("select") || componentType.includes("date")) {
+    return t("plus.table.pleaseSelect") + row.label
+  }
+  return row.label
+}
+// 绑定的相关事件
+const handleEvent = (type, val, comType) => {
+  // console.log("type---comType", comType)
+  if (comType === "datetime") onInputExit()
+  setTimeout(() => {
+    // console.log("组件", type, childValue.value)
+    emits("handleEvent", { type, val })
+  }, 0)
+}
+defineExpose({ resetClickTselectTable })
+</script>