@jzt-packages/components 1.0.0

package/src/JztQueryTable/hooks/useQueryTable.ts

@@ -0,0 +1,194 @@
+import { ElMessage } from 'element-plus'
+import { Table } from '../interface/index'
+import { ref, toRefs, reactive, computed, nextTick } from 'vue'
+/**
+ * @description table 页面操作方法封装
+ * @param {Function} api 获取表格数据 api 方法 (必传)
+ * @param {Object} initParam 获取数据初始化参数 (非必传，默认为{})
+ * @param {Boolean} isPageable 是否有分页 (非必传，默认为true)
+ * @param {Function} dataCallBack 对后台返回的数据进行处理的方法 (非必传)
+ * */
+
+// 展开grid
+const isShow = ref(true)
+const isExpandAll = ref(false)
+const toggleExpandAll = async (status?: boolean) => {
+  isShow.value = false
+  if (status) {
+    isExpandAll.value = true
+  } else {
+    isExpandAll.value = !isExpandAll.value
+  }
+  await nextTick()
+  isShow.value = true
+}
+export const useOperation = () => {
+  return {
+    isShow,
+    isExpandAll,
+    toggleExpandAll
+  }
+}
+
+export const useTable = (
+  validateSearchForm?: () => Promise<any>,
+  api?: (params: any) => Promise<any>,
+  initParam: object = {},
+  isPageable: boolean = true,
+  dataCallBack?: (data: any) => any,
+  requestError?: (error: any) => void,
+  searchFilter?: (data: any) => Record<string, any>,
+  tableLoaded?: (data: any) => void,
+  loading: any = false,
+  formatterForm?: (data: any) => Record<string, any>
+) => {
+  const state = reactive<Table.StateProps>({
+    // 表格数据
+    tableData: [],
+    // 分页数据
+    pageable: {
+      // 当前页数
+      pageIndex: 1,
+      // 每页显示条数
+      pageSize: 10,
+      // 总条数
+      total: 0
+    },
+    // 查询参数(只包括查询)
+    searchParam: {},
+    // 初始化默认的查询参数
+    searchInitParam: {},
+    initParams: {} //外部传递的固定参数
+  })
+  state.initParams = initParam
+
+  /**
+   * @description 分页查询参数(只包括分页和表格字段排序,其他排序方式可自行配置)
+   * */
+  const pageParam = computed({
+    get: () => {
+      return {
+        pageIndex: state.pageable.pageIndex - 1,
+        pageSize: state.pageable.pageSize
+      }
+    },
+    set: (newVal: any) => {
+      console.log('我是分页更新之后的值', newVal)
+    }
+  })
+
+  /**
+   * @description 获取表格数据
+   * @return void
+   * */
+  const getTableList = async () => {
+    await new Promise((resolve, reject) => {
+      nextTick(async () => {
+        if (!api) return
+        if (validateSearchForm) {
+          const valid = await validateSearchForm()
+          if (!valid) return ElMessage.error('请检查必填项！')
+        }
+        try {
+          loading.value = true
+          // 初始化为空数据,解决bug(未清空数据)
+          state.tableData = []
+          const form =
+            formatterForm &&
+            formatterForm({
+              ...state.searchInitParam,
+              ...state.initParams,
+              ...state.searchParam
+            })
+
+          let data = await api({
+            ...(searchFilter ? searchFilter(form) : form),
+            ...(isPageable ? pageParam.value : {})
+          })
+
+          dataCallBack && (data = dataCallBack(data))
+          if (!data) {
+            data = { list: [], totalCount: 0 }
+          }
+          if (Array.isArray(data)) {
+            state.tableData = data || []
+          } else {
+            state.tableData = data?.result || data?.list || []
+          }
+          // state.tableData = isPageable ? data.result : data.result || data
+          // 解构后台返回的分页数据 (如果有分页更新分页信息)
+          if (isPageable) {
+            state.pageable.total = data.totalCount
+          }
+          setTimeout(() => {
+            tableLoaded && tableLoaded(data)
+          })
+          resolve(data)
+        } catch (error) {
+          loading.value = false
+          requestError && requestError(error)
+          reject(error)
+        } finally {
+          setTimeout(() => {
+            loading.value = false
+          }, 100)
+        }
+      })
+    })
+  }
+
+  /**
+   * @description 表格数据查询
+   * @return void
+   * */
+  const search = async () => {
+    state.pageable.pageIndex = 1
+    await getTableList()
+  }
+
+  /**
+   * @description 表格数据重置
+   * @return void
+   * */
+  const reset = async () => {
+    state.pageable.pageIndex = 1
+    // 重置搜索表单的时，如果有默认搜索参数，则重置默认的搜索参数
+    state.searchParam = { ...state.searchInitParam }
+    await getTableList()
+  }
+
+  /**
+   * @description 每页条数改变
+   * @param {Number} val 当前条数
+   * @return void
+   * */
+  const handleSizeChange = async (val: number) => {
+    state.pageable.pageIndex = 1
+    state.pageable.pageSize = val
+    await getTableList()
+  }
+
+  /**
+   * @description 当前页改变
+   * @param {Number} val 当前页
+   * @return void
+   * */
+  const handleCurrentChange = async (val: number) => {
+    state.pageable.pageIndex = val
+    await getTableList()
+  }
+  // 更新默认传参，  tab切换时可调用此方法
+  const changeInitParams = async params => {
+    state.initParams = params
+  }
+
+  return {
+    ...toRefs(state),
+    getTableList,
+    search,
+    reset,
+    handleSizeChange,
+    handleCurrentChange,
+    changeInitParams
+  }
+}

package/src/JztQueryTable/hooks/useSelection.ts

@@ -0,0 +1,47 @@
+import { ref, computed } from "vue";
+/**
+ * @description 表格多选数据操作
+ * @param {String} rowKey 当表格可以多选时，所指定的 id
+ * */
+export const useSelection = (rowKey: string = "id") => {
+  const isSelected = ref<boolean>(false);
+  const selectedList = ref<{ [key: string]: any }[]>([]);
+
+  // 当前选中的所有 ids 数组
+  // 修复: rowKey 对应的值可能是 string 或 number，返回类型改为联合类型
+  const selectedListIds = computed((): (string | number)[] => {
+    return selectedList.value.map((item) => item[rowKey])
+  });
+
+  /**
+   * @description 多选操作
+   * @param {Array} rowArr 当前选择的所有数据
+   * @return void
+   */
+  const selectionChange = (rowArr: { [key: string]: any }[]) => {
+    rowArr.length ? (isSelected.value = true) : (isSelected.value = false);
+    selectedList.value = rowArr;
+    // emit("selectionChange", {
+    //   isSelected: isSelected.value,
+    //   selectedList: selectedList.value,
+    //   selectedListIds: selectedListIds.value,
+    // });
+  };
+
+  const headerDragend = (
+    newWidth: number,
+    oldWidth: number,
+    column: any,
+    event: MouseEvent
+  ): void => {
+    console.log(newWidth, oldWidth, column, event);
+  };
+
+  return {
+    isSelected,
+    selectedList,
+    selectedListIds,
+    selectionChange,
+    headerDragend,
+  };
+};

package/src/JztQueryTable/hooks/useTableSetting.ts

@@ -0,0 +1,197 @@
+import { deleteGridConfig, getGridConfig, saveGridConfig } from '@jzt-spd/utils/commonApi'
+import { ElMessage } from 'element-plus'
+import { sortBy } from 'lodash-es'
+import { ref } from 'vue'
+import { ColumnProps, GridParams } from '../interface'
+/**
+ * @description table 页面操作方法封装
+ * @param {Function} api 获取表格数据 api 方法 (必传)
+ * @param {Object} initParam 获取数据初始化参数 (非必传，默认为{})
+ * @param {Boolean} isPageable 是否有分页 (非必传，默认为true)
+ * @param {Function} dataCallBack 对后台返回的数据进行处理的方法 (非必传)
+ *
+ * */
+export const useSettingTable = () => {
+  const currentTableColumns = ref<ColumnProps[]>([]) // 当前表格列数据（接口返回的）
+  const getTableSetting = async (
+    gridParams,
+    tableColumns: ColumnProps[],
+    loadingFn: any,
+    backupColumns: ColumnProps[]
+  ): Promise<{
+    columns: ColumnProps[] // 表格列
+    pageSize: number
+    id: string
+  }> => {
+    // console.log('backupColumns---->', backupColumns)
+    loadingFn && loadingFn(true)
+    return new Promise(async (resolve, reject) => {
+      // const asyncColumns = ref<ColumnProps[]>(tableColumns)
+      try {
+        const { pageSize, list, id } = await getGridConfigFn(gridParams)
+        const endColumns = setTable({
+          gridColumns: list,
+          // columns: asyncColumns.value,
+          backupColumns
+        })
+        loadingFn && loadingFn(false)
+        currentTableColumns.value = list && list.length ? endColumns : []
+        resolve({
+          columns: endColumns,
+          pageSize: pageSize,
+          id: id
+        })
+      } catch (error) {
+        currentTableColumns.value = []
+      } finally {
+        setTimeout(() => {
+          loadingFn && loadingFn(false)
+        }, 800)
+      }
+    })
+  }
+  return {
+    getTableSetting,
+    setTableSetting,
+    removeGridConfig,
+    currentTableColumns
+  }
+}
+
+const getGridConfigFn = async (
+  gridParams: GridParams
+): Promise<{
+  list: ColumnProps[]
+  pageSize: number
+  id: string
+}> => {
+  try {
+    if (!gridParams || !gridParams.url) return { list: [], pageSize: 10 }
+    const res = await getGridConfig(gridParams)
+
+    const list = JSON.parse(res.result.configValue) || []
+    return {
+      list: list,
+      pageSize: res.result?.pageSize,
+      id: res.result?.id
+    }
+  } catch (error) {
+    return {
+      list: [],
+      pageSize: 10,
+      id: ''
+    }
+  }
+}
+
+export const setTable = ({ gridColumns, backupColumns }) => {
+  const list = gridColumns
+  if (list && list.length) {
+    const list2 = [] as ColumnProps[]
+    backupColumns.forEach(item => {
+      const index = list.findIndex(i => (i.field || i.text || i.prop) === item.prop)
+      if (index !== -1) {
+        const width = (item.width || item.minWidth) as number
+        const asyncWidth = list[index]?.width || (list[index]?.minWidth as number)
+        const colWidth = asyncWidth || width
+        list2.push({
+          ...item,
+          label: list[index]?.text || list[index]?.label || '',
+          hidden: list[index]?.hidden ?? false,
+          isSetShow: list[index]?.hidden !== true,
+          width: '',
+          minWidth: colWidth > 80 ? colWidth : 80,
+          sortIndex: index
+        })
+      } else {
+        const width = (item.width || item.minWidth) as number
+        list2.push({
+          ...item,
+          isSetShow: true,
+          hidden: false,
+          width: '',
+          minWidth: width > 80 ? width : 80,
+          sortIndex: 999
+        })
+      }
+    })
+    let sortedList = sortBy(list2, ['sortIndex'])
+    return sortedList
+    // list.forEach(item => {
+    //   const index = backupColumns.findIndex((column: any) => item.field === column.prop)
+    //   const width = (item.width || item.minWidth) as number
+    //   if (index !== -1) {
+    //     list2.push({
+    //       ...backupColumns[index],
+    //       hidden: item.hidden,
+    //       label: item.text || '',
+    //       isSetShow: item.hidden !== true,
+    //       width: '',
+    //       minWidth: width > 80 ? width : 80
+    //     })
+    //   }
+    // })
+    // return list2
+  } else {
+    const endColumns = [] as ColumnProps[]
+    backupColumns?.forEach(item => {
+      // if (item.prop !== 'operation' || item.label !== '操作') {
+      const width = (item.width || item.minWidth) as number
+      endColumns.push({
+        ...item,
+        width: '',
+        isSetShow: item.hidden !== true,
+        minWidth: width > 80 ? width : 80
+      })
+      // }
+    })
+    return endColumns
+  }
+}
+interface SetTableSettingParams {
+  gridParams: GridParams
+  tableColumns: ColumnProps[]
+  pageSize: number
+  toast: boolean
+}
+const setTableSetting = async (params: SetTableSettingParams) => {
+  const { gridParams, tableColumns, pageSize, toast } = params
+  return new Promise(async (resolve, reject) => {
+    const list = [] as any[]
+    try {
+      tableColumns.forEach((item: any) => {
+        list.push({
+          columnId: item.prop,
+          field: item.prop,
+          // hidden: item.hidden,
+          hidden: !item.isSetShow,
+          width: item.width || item.minWidth || 60,
+          text: item.label
+        })
+      })
+      // console.log(list)
+      const res = await saveGridConfig({
+        configValue: JSON.stringify(list),
+        ...gridParams,
+        pageSize: pageSize
+      })
+      // console.log(res.result);
+      resolve({
+        id: res.result.id,
+        columns: list
+      })
+      if (toast) {
+        ElMessage.success('设置成功')
+      }
+    } catch (error) {
+      reject()
+    } finally {
+    }
+  })
+}
+
+const removeGridConfig = async (gridParams: GridParams, cancelFn) => {
+  const res = await deleteGridConfig(gridParams)
+  ElMessage.success('重置成功')
+  cancelFn && cancelFn()
+}

package/src/JztQueryTable/hooks/useTemplate.ts

@@ -0,0 +1,127 @@
+import { localGetRolesIds } from '@jzt-spd/utils'
+import { deleteGridConfigTemplate, getGridConfigTemplateList, pushGridConfigTemplate } from '@jzt-spd/utils/commonApi'
+import { reactivePick } from '@vueuse/core'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import * as _ from 'lodash-es'
+import { computed, ref, type Ref } from 'vue'
+import type { ColumnProps, GridParams } from '../interface'
+import { setTable } from './useTableSetting'
+
+export function useTemplate(
+  gridParams: () => GridParams,
+  setPageSize: () => number,
+  dragListColumn: Ref<ColumnProps[]>,
+  originalColumn: Ref<ColumnProps[]>,
+  processColumns: (columns: any) => Promise<any>,
+  onValidIsAllHidden: () => boolean
+) {
+  const loading = ref(false)
+  const deployVisible = ref(false)
+  const deployMode = ref<'add' | 'edit' | 'view'>('add')
+  const isAdmin = computed(() => localGetRolesIds()?.split(',').includes('3a02558d-8b3f-0128-d1ae-092fc6620210'))
+  const configValue = computed(() => {
+    return dragListColumn.value.map((item: any) => {
+      return {
+        columnId: item.prop,
+        field: item.prop,
+        hidden: !item.isSetShow,
+        width: item.width || item.minWidth || 60,
+        text: item.label
+      }
+    })
+  })
+
+  const gridTemplateList = ref<any[]>([])
+  const formData = ref<any>({ configName: '', templateId: null })
+
+  const onOpenDeployDialog = (mode: 'add' | 'edit' | 'view') => {
+    if (!onValidIsAllHidden()) return
+    if (mode === 'add' && gridTemplateList.value.length === 50) {
+      ElMessage.error('已达上限50个，无法继续添加')
+      return
+    }
+    if (mode === 'add') {
+      formData.value.configName = ''
+    }
+    deployMode.value = mode
+    deployVisible.value = true
+  }
+
+  const onRemoveTemplate = async () => {
+    loading.value = true
+    try {
+      await ElMessageBox.confirm('确认删除该角色列配置？删除后角色列配置不会重置，即保持现状！', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+      const { message } = await deleteGridConfigTemplate({ templateId: formData.value.templateId })
+      ElMessage.success(message)
+      await onQueryTemplate()
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const onSaveTemplate = async () => {
+    loading.value = true
+    try {
+      await ElMessageBox.confirm('列配置保存并下发后，会对配置下的账号实时生效！', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+      const { message } = await pushGridConfigTemplate({
+        pageSize: setPageSize(),
+        configValue: JSON.stringify(configValue.value),
+        ...gridParams(),
+        ...reactivePick(formData.value, ['templateId', 'concurrencyStamp'])
+      })
+      ElMessage.success(message)
+      await onQueryTemplate(formData.value.templateId)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const onQueryTemplate = async (templateId: string = '0') => {
+    if (!isAdmin.value) {
+      return
+    }
+    try {
+      loading.value = true
+      const { result } = await getGridConfigTemplateList(gridParams())
+      gridTemplateList.value = [{ id: '0', configName: '当前账号列配置' }, ...result]
+      onChangeTemplate(templateId)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const onChangeTemplate = async (templateId: string) => {
+    const template = gridTemplateList.value.find(item => item.id === templateId) || {}
+    formData.value = { ...template, templateId }
+    if (templateId === '0') {
+      dragListColumn.value = _.cloneDeep(originalColumn.value)
+    } else {
+      dragListColumn.value = setTable({
+        gridColumns: JSON.parse(template.configValue ?? '[]'),
+        backupColumns: originalColumn.value
+      })
+    }
+  }
+
+  return {
+    loading,
+    deployVisible,
+    deployMode,
+    isAdmin,
+    formData,
+    gridTemplateList,
+    onOpenDeployDialog,
+    onRemoveTemplate,
+    onSaveTemplate,
+    onQueryTemplate,
+    onChangeTemplate
+  }
+}

package/src/JztQueryTable/index.scss

@@ -0,0 +1,91 @@
+.el-popover {
+  min-width: 200px;
+  max-width: 300px;
+}
+.fullscreen-page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 99;
+}
+
+/* queryTable */
+.table-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: 8px;
+
+  // 表格 header 样式
+  .table-header {
+    .header-button-lf,
+    .header-button-ri {
+      display: flex;
+      flex-wrap: wrap;
+      // gap: 15px 12px;
+      gap: 5px 2px;
+      // margin-bottom: 2px;
+      text-align: right;
+      // margin-top: 4px;
+      .el-button:not(.el-input .el-button) {
+        margin-left: 0;
+      }
+    }
+    .header-button-ri {
+      justify-content: flex-end;
+      align-items: center;
+      padding: 2px 0;
+      :deep(.el-button) {
+        margin-left: 4px !important;
+      }
+    }
+    :deep(.tool_btn.el-button) {
+      width: var(--el-component-size);
+      // height: 32px;
+      .el-icon,
+      .iconfont {
+        font-size: 16px;
+      }
+    }
+  }
+
+  // .el-table {
+  //   // flex: 1;
+  //   margin-top: 4px;
+  //   .el-scrollbar {
+  //     min-height: 150px;
+  //   }
+  // }
+
+  // .el-tabs .el-tabs__header.is-top {
+  //   margin-bottom: 2px !important;
+  // }
+}
+
+// .el-dialog {
+//   .table-search {
+//     padding-top: 0;
+//     margin-bottom: 0;
+//   }
+//   .spd-card {
+//     border: none !important;
+//     box-shadow: none !important;
+//     padding: 0 10px;
+//   }
+// }
+
+.el-form-item--default {
+  .el-form-item__label {
+    height: 30px !important;
+    line-height: 30px !important;
+  }
+}
+
+.el-form-item--default .el-form-item__content {
+  height: 30px !important;
+  line-height: 30px !important;
+}