@ethan1979/jf-lib 0.0.32

package/src/components/v-table/components/modal-form.vue

@@ -0,0 +1,111 @@
+<template>
+  <a-modal
+    v-model:visible="_visible"
+    modal-class="table-modal"
+    unmount-on-close
+    @before-ok="handleOk"
+    @close="handleClose"
+  >
+    <template #title> {{ props.title }} </template>
+    <div>
+      <a-form
+        ref="formRef"
+        :model="formData"
+        :style="{ width: '100%' }"
+        :label-col-props="{ span: 6 }"
+        :wrapper-col-props="{ span: 18 }"
+        :rules="rules"
+      >
+        <a-row>
+          <a-form-item
+            v-for="{
+              formItem: { dataIndex, title: label, tooltip },
+              render,
+            } in form || []"
+            :key="dataIndex"
+            :span="6"
+            :field="dataIndex"
+            :label="label"
+          >
+            <a-col :span="24">
+              <component
+                :is="getRenderFunction(render, props.renderParams)"
+                v-model="formData[dataIndex]"
+                :style="{
+                  width: hasTooltip ? '94%' : '100%',
+                }"
+              />
+              <a-tooltip v-if="tooltip" :content="tooltip">
+                <div
+                  style="display: inline-block; width: 6%; text-align: right"
+                >
+                  <icon-info-circle />
+                </div>
+              </a-tooltip>
+            </a-col>
+            <!-- <a-col
+              :span="24"
+              style="font-size: 12px; color: var(--color-text-3)"
+            >
+              123
+            </a-col> -->
+          </a-form-item>
+        </a-row>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { Form } from '@arco-design/web-vue'
+import { cloneDeep } from 'lodash'
+import { computed, inject, ref } from 'vue'
+import { BaseObj } from '../../../types/global'
+import getRenderFunction from '../get-render-function'
+import { useTableForm } from '../hooks'
+import { TableConfig } from '../typings'
+
+const props = defineProps<{
+  type: 'Add' | 'Update'
+  visible: boolean
+  title: string
+  renderParams?: BaseObj
+}>()
+const emit = defineEmits(['update:visible', 'okEvent'])
+
+const config = inject<TableConfig>('config')
+const { form, formData, rules, hasTooltip, resetFormData } = useTableForm(
+  config?.columns,
+  props.type
+)
+const _visible = computed<boolean>({
+  get() {
+    return props.visible
+  },
+  set(val) {
+    emit('update:visible', val)
+  },
+})
+const formRef = ref<InstanceType<typeof Form>>()
+const handleOk = (done: (closed: boolean) => void) => {
+  formRef.value?.validate().then((errors) => {
+    if (errors) {
+      done(false)
+      return
+    }
+    emit('okEvent', cloneDeep(formData.value))
+    done(true)
+  })
+}
+const handleClose = () => {
+  resetFormData()
+  formRef?.value?.resetFields()
+}
+
+defineExpose({
+  formData,
+  resetFormData,
+})
+</script>
+
+<style scoped></style>

package/src/components/v-table/components/search.vue

@@ -0,0 +1,181 @@
+<template>
+  <div>
+    <div v-if="form.length > 0" class="search-form-wrapper">
+      <a-row>
+        <a-col :flex="1">
+          <a-form
+            ref="formRef"
+            :model="formData"
+            :style="{ width: '100%' }"
+            label-align="left"
+          >
+            <a-row :gutter="16">
+              <a-col
+                v-for="{
+                  formItem: { dataIndex, title },
+                  render,
+                  searchColSpan,
+                } in visibleForm"
+                :key="dataIndex"
+                :span="getSpan(searchColSpan)"
+              >
+                <a-form-item
+                  :field="dataIndex"
+                  :label="title"
+                  :label-col-props="{
+                    span: getFormItemSpan(searchColSpan, 'label'),
+                  }"
+                  :wrapper-col-props="{
+                    span: getFormItemSpan(searchColSpan, 'wrapper'),
+                  }"
+                >
+                  <component
+                    :is="getRenderFunction(render)"
+                    @change="handleSearchParamsChange"
+                    v-model="formData[dataIndex]"
+                    style="width: 100%"
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </a-col>
+        <a-divider
+          :style="{ height: isVertical ? '84px' : '32px' }"
+          direction="vertical"
+        />
+        <a-col :flex="'86px'" style="text-align: right">
+          <a-space
+            :direction="isVertical ? 'vertical' : 'horizontal'"
+            :size="18"
+          >
+            <a-button type="primary" @click="search">
+              <template #icon>
+                <icon-search />
+              </template>
+              搜索
+            </a-button>
+            <a-button v-if="!config?.search?.hiddenReset" @click="reset">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              重置
+            </a-button>
+            <a-button
+              v-if="hasExpandableFields"
+              type="text"
+              :aria-expanded="expanded"
+              @click="expanded = !expanded"
+            >
+              <template #icon>
+                <icon-up v-if="expanded" />
+                <icon-down v-else />
+              </template>
+              {{ expanded ? '收起' : '展开' }}
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+    </div>
+    <!-- <div class="search-btn-wrapper"></div> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, PropType, ref } from 'vue'
+import Form from '@arco-design/web-vue/es/form'
+import { SearchColSpan, TableConfig } from '../typings'
+import getRenderFunction from '../get-render-function'
+import { useTableForm } from '../hooks'
+
+const props = defineProps({
+  config: Object as PropType<TableConfig>,
+})
+const emit = defineEmits(['search'])
+
+const { form, formData, resetFormData } = useTableForm(
+  props.config?.columns,
+  'Search'
+)
+const formRef = ref<InstanceType<typeof Form>>()
+const expanded = ref(false)
+const defaultVisibleFields = computed(
+  () => props.config?.search?.defaultVisibleFields || []
+)
+const hasExpandableFields = computed(
+  () =>
+    props.config?.search?.collapsible === true &&
+    defaultVisibleFields.value.length > 0 &&
+    form.value.some(
+      ({ formItem: { dataIndex } }) =>
+        !defaultVisibleFields.value.includes(dataIndex)
+    )
+)
+const visibleForm = computed(() => {
+  if (!hasExpandableFields.value || expanded.value) return form.value
+  return form.value.filter(({ formItem: { dataIndex } }) =>
+    defaultVisibleFields.value.includes(dataIndex)
+  )
+})
+const search = () => {
+  emit('search', formData.value)
+}
+
+const handleSearchParamsChange=()=>{
+  if(props.config?.search?.searchOnchange!==false) search()
+}
+
+const reset = () => {
+  resetFormData()
+  search()
+  // formRef?.value?.resetFields()
+}
+
+const getSpan = (config: SearchColSpan | undefined) => {
+  if (!config) return 6
+  if (typeof config === 'number') return config
+  return config.span ?? 6
+}
+const formItemSpanSize = {
+  label: 7,
+  wrapper: 17,
+}
+const getFormItemSpan = (
+  config: SearchColSpan | undefined,
+  type: 'label' | 'wrapper'
+) => {
+  const size = formItemSpanSize[type]
+  if (!config || typeof config === 'number' || !config.formItem) {
+    return size
+  }
+  return config?.formItem[`${type}ColSpan`] || size
+}
+
+const isVertical = computed(() => {
+  let colSpans = 0
+  visibleForm.value.forEach(({ searchColSpan }) => {
+    colSpans += getSpan(searchColSpan)
+  })
+  return colSpans > 24
+})
+
+onMounted(()=>{
+  nextTick(()=>{
+    search()
+  })
+})
+
+defineExpose({
+  reset,
+  search,
+})
+</script>
+
+<style lang="less">
+.search-form-wrapper{
+  margin-top: 16px;
+  .arco-form-item{
+    margin-bottom: 16px;
+  }
+}
+</style>

package/src/components/v-table/components/toolbar.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="table-toolbar">
+    <a-divider
+      style="margin-top: 0; margin-bottom: 16px"
+      divider-style
+      :style="{
+        ...dividerStyle,
+        borderBottom: `${
+          searchForm.length > 0 ? 1 : 0
+        }px solid var(--color-neutral-3)`,
+      }"
+    />
+    <a-row
+      style="padding-bottom: 16px"
+      v-if="config?.batchDelete || form.length > 0 || onBeforeAddModalOpen"
+    >
+      <a-col :span="16" class="toolbar-left">
+        <a-space>
+          <slot name="toolbar-left">
+            <a-button
+              v-if="form.length > 0 || onBeforeAddModalOpen"
+              type="primary"
+              @click="handleClickAdd"
+            >
+              <template #icon>
+                <icon-plus />
+              </template>
+              新增
+            </a-button>
+            <a-popconfirm
+              v-if="config?.batchDelete"
+              :content="`是否删除选中的${selectedRowKeys?.length}项内容`"
+              :disabled="selectedRowKeys?.length === 0"
+              :ok-button-props="{
+                status: 'danger',
+              }"
+              type="error"
+              position="bl"
+              @ok="emit('batchDelete')"
+            >
+              <a-button
+                type="primary"
+                status="danger"
+                :disabled="selectedRowKeys?.length === 0"
+              >
+                <template #icon>
+                  <icon-minus />
+                </template>
+                删除
+              </a-button>
+            </a-popconfirm>
+          </slot>
+          <slot name="toolbar-left-extend"></slot>
+        </a-space>
+      </a-col>
+      <a-col :span="8" class="toolbar-right">
+        <slot name="toolbar-right"></slot>
+      </a-col>
+    </a-row>
+    <template v-if="form.length > 0">
+      <modal-form
+        v-model:visible="visible"
+        title="新增"
+        type="Add"
+        @ok-event="(data) => emit('add', data)"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, Ref, inject, ref, computed } from "vue";
+import { useTableForm } from "../hooks";
+import { TableConfig } from "../typings";
+
+import ModalForm from "./modal-form.vue";
+
+const props = defineProps({
+  config: Object as PropType<TableConfig>,
+});
+const emit = defineEmits(["add", "batchDelete"]);
+
+const selectedRowKeys = inject<Ref<number[] | string[]>>("selectedRowKeys");
+
+const visible = ref(false);
+const { form } = useTableForm(props.config?.columns, "Add");
+const onBeforeAddModalOpen = computed(() => {
+  return props.config?.toolbar?.onBeforeAddModalOpen;
+});
+const handleClickAdd = async () => {
+  if (typeof onBeforeAddModalOpen.value === "function") {
+    const result = await onBeforeAddModalOpen.value();
+    if (result === false) return;
+  }
+  visible.value = true;
+};
+
+const { form: searchForm } = useTableForm(props.config?.columns, "Search");
+const dividerStyle = computed(() => {
+  return props.config?.card
+    ? {
+        left: "-16px",
+        width: "calc(100% + 32px)",
+        minWidth: "calc(100% + 32px)",
+      }
+    : {};
+});
+</script>
+
+<style lang="less">
+.table-toolbar {
+  // padding-bottom: 16px;
+  .arco-space {
+    width: 100%;
+  }
+
+  .toolbar-right {
+    text-align: right;
+  }
+}
+</style>

package/src/components/v-table/get-render-function.ts

@@ -0,0 +1,15 @@
+import { h, getCurrentInstance } from 'vue'
+import { toPascalCase } from '../../utils/utils'
+import { FormRender } from './typings'
+import { BaseObj } from '../../types/global'
+
+export default (render: FormRender, renderParams?: BaseObj | undefined) => {
+  if (typeof render === 'function') {
+    return render(renderParams)
+  }
+  const component =
+    getCurrentInstance()?.appContext.components[toPascalCase(render.type)] ||
+    render.type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return h(component as any, render.props)
+}

package/src/components/v-table/hooks.ts

@@ -0,0 +1,128 @@
+import { FieldRule } from '@arco-design/web-vue/es/form/interface'
+import { cloneDeep } from 'lodash'
+import { ref, toRefs, watchEffect } from 'vue'
+import { BaseObj } from '../../types/global'
+import { Columns, FormRender, SearchColSpan } from './typings'
+
+const defineRender = (title: string) => ({
+  type: 'a-input',
+  props: {
+    placeholder: `请输入${title}`,
+    allowClear: true,
+    maxLength: 100,
+  },
+})
+
+type FormType = 'Search' | 'Update' | 'Add'
+
+const getIndexAndConvert = (column: Columns, type: FormType) => {
+  const { form } = column
+  if (typeof form !== 'object') return 0
+  const _key = type.toLocaleLowerCase() as 'add' | 'update' | 'search'
+  // console.log('_key', _key, form[`${_key}Config`], form.defaultValue=11111)
+  if (form[`${_key}Config`]) {
+    column.form = {
+      ...form,
+      ...form[`${_key}Config`],
+    }
+  }
+  return form?.yIndex || 0
+}
+
+const getForm = (columns: Array<Columns> | undefined, type: FormType) => {
+  // const formData: BaseObj = {}
+  const defaultValues: BaseObj = {}
+  const rules: Record<string, FieldRule[]> = {}
+  let hasTooltip = false
+  const addRule = (dataIndex: string, rule: FieldRule | FieldRule[]) => {
+    if (!rules[dataIndex]) rules[dataIndex] = []
+    if (rule instanceof Array) {
+      rules[dataIndex].push(...rule)
+    } else {
+      rules[dataIndex].push(rule)
+    }
+  }
+  const _columns = cloneDeep(columns?.filter((column) => column.form))
+  _columns?.sort((a, b) => {
+    return getIndexAndConvert(b, type) - getIndexAndConvert(a, type)
+  })
+  const form = _columns
+    ?.map(({ form, title, dataIndex }) => {
+      let formItem: BaseObj = {
+        title,
+        dataIndex,
+      }
+      if (typeof form !== 'object') {
+        defaultValues[dataIndex as string] = ''
+        const render =
+          typeof form === 'boolean' ? defineRender(title as string) : form
+        return {
+          formItem,
+          render,
+        }
+      }
+      if (form[`hidden${type}`]) return false
+      const { searchColSpan, tooltip } = form
+      if (tooltip) hasTooltip = true
+      formItem = {
+        ...formItem,
+        tooltip,
+      }
+      if (form.title) formItem.title = form.title
+      // console.log('form.defaultValue', form.defaultValue, form)
+      defaultValues[dataIndex as string] = form.defaultValue ?? ''
+      if (form.required)
+        addRule(dataIndex as string, {
+          required: true,
+          message: `${title}不能为空`,
+        })
+      if (form.rule) addRule(dataIndex as string, form.rule)
+      return {
+        formItem,
+        render: form.render || defineRender(title as string),
+        searchColSpan,
+      }
+    })
+    .filter((item) => item)
+  return {
+    form: form as Array<{
+      formItem: {
+        title: string
+        dataIndex: string
+        tooltip?: string
+      }
+      render: FormRender
+      searchColSpan?: SearchColSpan
+    }>,
+    formData: cloneDeep(defaultValues),
+    defaultValues,
+    rules,
+    hasTooltip,
+  }
+}
+
+export function useTableForm(
+  columns: Array<Columns> | undefined,
+  type: 'Search' | 'Update' | 'Add'
+) {
+  const form = ref(getForm(columns, type))
+  watchEffect(() => {
+    // form.value = getForm(columns, type)
+    const {
+      form: _form,
+      formData,
+      rules,
+      defaultValues,
+    } = getForm(columns, type)
+    form.value.form = _form
+    form.value.formData = formData
+    form.value.rules = rules
+    form.value.defaultValues = defaultValues
+  })
+  return {
+    ...toRefs(form.value),
+    resetFormData() {
+      form.value.formData = cloneDeep(form.value.defaultValues)
+    },
+  }
+}