@jzt-packages/components 1.0.0

package/src/JztLeftRightMode/hooks/useRightLayout.ts

@@ -0,0 +1,215 @@
+import { axiosCanceler } from '@jzt-spd/utils'
+import { reactiveComputed, reactiveOmit, useVModel } from '@vueuse/core'
+import { ElMessage } from 'element-plus'
+import { computed, ref, watch } from 'vue'
+
+import { type JztFormInstance } from '../../JztFormGrid/interface'
+import { type ProTableInstance } from '../../JztQueryTable/interface'
+import { type RightLayoutEmits, type RightLayoutProps, type TotalData } from '../types/index'
+
+const defaultConfigs = [
+  {
+    type: 'count' as const,
+    show: true,
+    label: '总数量：',
+    valueKey: 'sumCount',
+    unit: '',
+    color: '#ff6000'
+  },
+  {
+    type: 'amount' as const,
+    show: true,
+    label: '总金额：',
+    valueKey: 'sumPrice',
+    unit: '元',
+    color: '#ff6000'
+  }
+]
+
+export const getSortParams = (sort: any) => {
+  let sortParams = {}
+  if (sort.order == 'descending') {
+    sortParams = {
+      sortDirection: 'DESC',
+      sortField: sort.prop
+    }
+  } else if (sort.order == 'ascending') {
+    sortParams = {
+      sortDirection: 'ASC',
+      sortField: sort.prop
+    }
+  }
+  return sortParams
+}
+
+export const useRightLayout = (props: RightLayoutProps, emits: RightLayoutEmits) => {
+  let currentRequestId = 0
+
+  const tableRef = ref<ProTableInstance>()
+  const formGridRef = ref<JztFormInstance>()
+  const rightLayoutRef = ref<HTMLDivElement>()
+
+  const background = ref('')
+  const sortParams = ref<{ sortField?: string; sortDirection?: 'ASC' | 'DESC' }>({})
+  const totalData = ref<TotalData>({ count: '0.0000', amount: '0.0000' })
+  const currentId = ref<string>('')
+
+  const loading = useVModel(props, 'loading', emits, { passive: true })
+  const headerData = useVModel(props, 'modelValue', emits, { passive: true })
+
+  const tableInfo = computed(() => tableRef.value)
+  const mergedTotalProps = reactiveComputed(() => {
+    const { totalProps } = props.tableProps ?? {}
+    if (!totalProps || totalProps.length === 0) {
+      return defaultConfigs
+    }
+    return totalProps
+      .map(config => {
+        const defaultConfig = defaultConfigs.find(d => d.type === config.type)
+        return { ...defaultConfig, ...config }
+      })
+      .filter(config => config.show !== false)
+  })
+  const descriptionsProps = reactiveComputed(() => ({
+    ruleForm: headerData,
+    queryItems: props.descriptionsProps?.queryItems ?? [],
+    ...reactiveOmit(props.descriptionsProps as any, ['queryItems', 'ruleForm'])
+  }))
+
+  const onSortChange = (sort: any) => {
+    const {
+      column: { sortMethod }
+    } = sort
+    sortParams.value = getSortParams(sort)
+    !sortMethod && tableRef.value?.searchAndClear()
+  }
+
+  const onQueryOrderDetail = async (id: string) => {
+    try {
+      const { requestApi } = props.headerProps ?? {}
+      if (!requestApi) return headerData.value
+      const { result } = await requestApi({ id })
+      headerData.value = result
+    } catch (err) {
+      console.error('单据详情请求失败：', err)
+    }
+  }
+
+  const onQueryTableList = async (param: Record<string, unknown>) => {
+    try {
+      const { requestApi, initParam } = props.tableProps ?? {}
+      if (!requestApi) throw new Error('表格列表请求接口未配置')
+      return await requestApi({
+        ...param,
+        ...initParam,
+        ...sortParams.value
+      })
+    } catch (err) {
+      console.error('表格列表请求失败：', err)
+    }
+  }
+
+  const onGetTableData = async (param: Record<string, unknown>) => {
+    loading.value = true
+    axiosCanceler?.removeAllPending()
+    const requestId = ++currentRequestId
+    try {
+      await onQueryOrderDetail(currentId.value)
+      const tableRes = await onQueryTableList(param)
+      mergedTotalProps.forEach(item => {
+        if (item.valueKey) {
+          totalData.value[item.type] = tableRes?.[item.valueKey] ?? '0.0000'
+        }
+      })
+      return {
+        result: tableRes?.result ?? [],
+        totalCount: tableRes?.totalCount ?? 0
+      }
+    } catch (err) {
+      return { result: [], totalCount: 0 }
+    } finally {
+      if (requestId === currentRequestId) loading.value = false
+    }
+  }
+
+  const onValidate = (err: any) => {
+    Object.keys(err).forEach(key => ElMessage.error(err[key][0]?.message))
+  }
+
+  watch(
+    () => headerData.value[props?.rowKey ?? 'id'],
+    newVal => newVal && (currentId.value = newVal)
+  )
+
+  const expose = {
+    data: headerData,
+    tableRef,
+    formGridRef,
+    search: () => {
+      if (currentRequestId === 0 && props.tableProps?.gridParams) {
+        return
+      }
+      tableRef.value?.searchAndClear()
+    },
+    validate: () => {
+      return new Promise((resolve, reject) =>
+        formGridRef.value?.formRef?.validate((valid: boolean, errors: any) => {
+          if (valid) {
+            resolve(valid)
+          } else {
+            props.showValidate && onValidate(errors)
+            reject(errors)
+          }
+        })
+      )
+    },
+    validateField: (field: string | string[]): Promise<boolean> => {
+      return new Promise((resolve, reject) =>
+        formGridRef.value?.formRef?.validateField(field, (valid: boolean, errors: any) => {
+          if (valid) {
+            resolve(valid)
+          } else {
+            props.showValidate && onValidate(errors)
+            reject(errors)
+          }
+        })
+      )
+    },
+    resetFields: () => {
+      formGridRef.value?.formRef?.resetFields()
+    },
+    clearValidate: () => {
+      formGridRef.value?.formRef?.clearValidate()
+    },
+    setData: (value: any) => {
+      headerData.value = value
+    },
+    setLoading: (value: boolean) => {
+      loading.value = value
+    },
+    selectedList: () => {
+      return tableRef.value?.selectedList
+    },
+    selectedListIds: () => {
+      return tableRef.value?.selectedListIds
+    }
+  }
+
+  return {
+    tableRef,
+    rightLayoutRef,
+    formGridRef,
+    sortParams,
+    totalData,
+    loading,
+    currentId,
+    background,
+    headerData,
+    tableInfo,
+    mergedTotalProps,
+    expose,
+    descriptionsProps,
+    onSortChange,
+    onGetTableData
+  }
+}

package/src/JztLeftRightMode/hooks/useSlots.ts

@@ -0,0 +1,15 @@
+import { useSlots } from 'vue'
+
+export const useFilterSlots = () => {
+  const slots = useSlots()
+  const onFilterSlots = (prefix: string) => {
+    return Object.keys(slots)
+      .filter(name => name.startsWith(prefix))
+      .map(name => ({ templateName: name.slice(prefix.length), slotName: name }))
+  }
+
+  return {
+    slots,
+    onFilterSlots
+  }
+}

package/src/JztLeftRightMode/index.ts

@@ -0,0 +1,3 @@
+export { default as LeftLayout } from './components/LeftLayout.vue'
+export { default as RightLayout } from './components/RightLayout.vue'
+export { default as JztLeftRightMode } from './index.vue'