@utogether/udp-core 1.0.1-beta.2 → 1.0.1-beta.4

package/src/components/udp/grid.vue

@@ -0,0 +1,505 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:33:37
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-07-23 10:21:02
+ * @Description: file content
+-->
+<template>
+  <div style="width: 100%">
+    <vxe-grid
+      ref="xgrid"
+      v-bind="data"
+      class="ut-grid-wrapper"
+      v-on="attrs.events || {}"
+      @toolbarButtonClick="toolbarButtonClick"
+      @toolbarToolClick="toolbarButtonClick"
+      @cell-click="cellClick"
+      @cell-dblclick="cellDbclick"
+      @edit-activated="editEctivated"
+    />
+    <!-- <SearchScheme
+      v-if="showModal && props.url"
+      :items="items"
+      :view="viewCode"
+      @search="onSearch"
+      @close="showModal = false"
+    /> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+// @ts-nocheck
+import { useI18n } from 'vue-i18n';
+import {
+  ref,
+  onBeforeMount,
+  reactive,
+  getCurrentInstance,
+  toRaw,
+  useAttrs,
+  onUnmounted,
+  nextTick
+} from 'vue';
+import { VxeGridProps } from 'vxe-table';
+import Sortable from 'sortablejs';
+import { clone } from 'xe-utils';
+import {
+  formatGridItems,
+  i18nColums,
+  formatRules,
+  errorMessage,
+  dbstorage,
+  warnMessage
+} from '@utogether/utils';
+import {
+  queryAll,
+  query,
+  del,
+  save,
+  footerSumMethod,
+  getToolBarConfig,
+  defaultColums,
+  onCheckMethod,
+  getAttrs
+} from './utils';
+// import SearchScheme from '../components/SuSearch.vue';
+// import type { IRecord, IFormItemProps, ITableColProps } from '../../types';
+
+defineOptions({
+  name: 'UtGrid'
+});
+
+export interface IProps {
+  checkMethod?: Function;
+  serviceCode?: IRecord;
+  defaultValue?: IRecord;
+  defaultParams?: IRecord;
+  url?: string;
+  columns: Array<ITableColProps>;
+  items?: Array<IFormItemProps>;
+  editable?: boolean;
+  needExport?: boolean; // 是否需要导出
+  autoLoad?: boolean; // 自动加载查询数据
+}
+
+const attrs: IRecord = getAttrs(useAttrs());
+
+const kSTORECOLUM = 'U_TABLE_COLUMNN_SORT';
+let storeColums;
+const cacheColumns = {};
+
+// console.log(attrs);
+const instance = getCurrentInstance()!;
+const hasAuthority = instance.appContext.config.globalProperties.$hasAuthority;
+const serviceApi = instance.appContext.config.globalProperties.$serviceApi;
+const viewCode = instance.parent.type.name;
+const $mode = instance.appContext.config.globalProperties.$mode;
+
+const props = withDefaults(defineProps<IProps>(), {
+  /**
+   * @deprecated 2.10.0版本失效,
+   * */
+  serviceCode: (): IRecord => {
+    return {};
+  },
+  items: () => [],
+  columns: () => [],
+  editable: true,
+  autoLoad: true,
+  needExport: true
+});
+
+const { t } = useI18n();
+
+const xgrid = ref(null);
+const showModal = ref(false);
+
+const favorite = {
+  icon: 'vxe-icon-setting',
+  name: 'favorite',
+  events: {
+    click: (e, option) => {
+      if (option.name === 'favorite') {
+        showModal.value = true;
+      }
+    }
+  }
+};
+
+/**
+ * @description: 根据items 获取必填选
+ */
+const getRules = () => {
+  if (!props.columns.length) return {};
+  return formatRules(props.columns, t);
+};
+/**
+ * @description: colum 统一添加国家化
+ */
+const getColumns = () => {
+  const columns = props.columns;
+  if (attrs.gridId) {
+    const cols = defaultColums
+      .filter(f => !columns.some(s => s.field === f.field))
+      .map(col => {
+        if (attrs.format && ['lastUpdateDate', 'creationDate'].includes(col.field)) {
+          col.formatter = attrs.format;
+          col.width = 90;
+        }
+        return col;
+      });
+    const idx = columns.findIndex(s => s.field === 'operate');
+    if (idx !== -1) {
+      columns.splice(idx, 0, ...cols);
+    } else {
+      columns.push(...cols);
+    }
+  }
+  const act_columns = attrs.gridId ? formatColums(columns) : columns;
+
+  return i18nColums(act_columns);
+};
+
+dbstorage.getItem(kSTORECOLUM).then(value => {
+  storeColums = value;
+  data.columns = getColumns();
+});
+
+const data = reactive<VxeGridProps>({
+  border: true,
+  pagerConfig: { pageSize: attrs.pageSize || 20 },
+  editConfig: {},
+  editRules: getRules(),
+  formConfig: {},
+  columnConfig: { useKey: true },
+  toolbarConfig: { enabled: false },
+  sortConfig: { multiple: true, trigger: 'cell' },
+  height: $mode ? undefined : window.innerHeight - 90,
+
+  checkboxConfig: {
+    checkMethod: ({ row }) => onCheckMethod(row, props),
+    checkRowKeys: props.checkRowKeys
+  },
+  loading: false,
+  footerRowClassName: 'ut-grid-footer',
+  proxyConfig: {
+    form: true, // 查询是需要启用表单代理
+    autoLoad: props.autoLoad,
+    // 接收 Promise
+    ajax: {
+      queryAll: ({ form }) => queryAll(props, serviceApi, form),
+      query: ({ page, form }) => query(props, form, page, serviceApi, $mode),
+      delete: ({ body: { removeRecords } }) => del(serviceApi, removeRecords, props),
+      save: ({ body }) => Promise.all(save(serviceApi, body, props)),
+      querySuccess: e => querySuccess(e)
+    }
+  },
+  columns: !attrs.gridId ? getColumns() : [],
+  ...attrs
+});
+
+/**
+ * @description: 预处理查询form
+ * @return {*} items
+ */
+const getItems = () => {
+  if (!props.items.length) return props.items;
+  return formatGridItems(clone(props.items, true), viewCode && props.url ? favorite : viewCode);
+};
+
+/**
+ * @description 格式化column
+ * @return {*} columns
+ */
+function formatColums(columns) {
+  const customSort = storeColums ? storeColums[attrs.gridId] : {};
+  if (!customSort) return columns;
+  return columns
+    .map((col, idx) => {
+      const sort = (idx + 1) * 10;
+      col._sort = customSort[col.field] || sort;
+      // 缓存列索引数据
+      cacheColumns[col.field] = col._sort;
+      return col;
+    })
+    .sort((a, b) => a._sort - b._sort);
+}
+
+/**
+ * @description: 设置grid参数
+ */
+const setGridConfig = () => {
+  // 查询
+  if (props.items.length) {
+    // data.formConfig = {};
+    data.formConfig = {
+      titleWidth: 100,
+      titleAlign: 'right',
+      items: getItems(),
+      rules: formatRules(props.items, t),
+      validConfig: { showMessage: false }
+    };
+  }
+  // tool bar
+  const obj = getToolBarConfig(data, props, attrs, hasAuthority);
+  Object.assign(data, obj);
+  // 表格id，用于自定义列
+  if (attrs.gridId) {
+    data.id = attrs.gridId;
+    data.customConfig = {
+      storage: true,
+      mode: 'popup',
+      checkMethod({ column }) {
+        return column.field === 'operate' || ['checkbox', 'radio'].includes(column.type) ? false : true;
+      },
+      modalOptions: {
+        width: 750,
+        height: '75%'
+      }
+    };
+  }
+  if (attrs.mergeFooter) {
+    // 合计方法
+    data.showFooter = true;
+    data.footerMethod = ({ columns, data }) => footerSumMethod({ columns, data }, attrs.mergeFooter);
+  }
+};
+/**
+ * @description 手动调用查询方法
+ */
+const refreshData = () => {
+  xgrid.value.commitProxy('query');
+};
+/**
+ * @description 刷新列数据
+ */
+const refreshColumn = () => {
+  data.editRules = getRules();
+  return xgrid.value.refreshColumn();
+};
+/**
+ * @description 显示加载框
+ */
+const showLoading = () => {
+  data.loading = true;
+};
+/**
+ * @description 隐藏加载框
+ */
+const hiddenLoading = () => {
+  data.loading = false;
+};
+/**
+ * @description 获取实例方法
+ * @return vxe-grid实例的方法
+ */
+const getInstance = () => {
+  return toRaw(xgrid.value);
+};
+/**
+ * @description 获取表格全量数据方法
+ * @return vxe-grid表格全量数据
+ */
+const getTableData = () => {
+  return xgrid.value.getTableData().fullData;
+};
+/**
+ * @description 获取表格选中的行
+ * @return vxe-grid表格勾选行
+ */
+const getSelectRecords = (isFull = false) => {
+  const columnType = props.columns[0].type;
+  const checkRecords =
+    columnType === 'radio' ? xgrid.value.getRadioRecord(isFull) : xgrid.value.getCheckboxRecords(isFull);
+  if (columnType === 'checkbox' && !checkRecords.length) {
+    warnMessage(t('message.tip_selectedRecord'));
+    return [];
+  } else if (columnType === 'radio' && !checkRecords) {
+    warnMessage(t('message.tip_selectedRecord'));
+    return null;
+  }
+  return checkRecords;
+};
+
+let sortable2: any;
+const columnDrop = () => {
+  const $grid = xgrid.value;
+  sortable2 = Sortable.create($grid.$el.querySelector('.vxe-table--header .vxe-header--row'), {
+    disabled: !attrs.gridId,
+    handle: '.vxe-header--column',
+    onEnd: async sortableEvent => {
+      const targetThElem = sortableEvent.item;
+      const newIndex = sortableEvent.newIndex as number;
+      const oldIndex = sortableEvent.oldIndex as number;
+      const { fullColumn, tableColumn } = $grid.getTableColumn();
+      const wrapperElem = targetThElem.parentNode as HTMLElement;
+      const newColumn = fullColumn[newIndex];
+      const item = fullColumn[oldIndex];
+      let nodrag = false;
+      let msg = '固定列';
+      if (newColumn.fixed) {
+        nodrag = false;
+      } else if (newIndex === 0 || ['checkbox', 'radio'].includes(item.type)) {
+        msg = '勾选列';
+        nodrag = true;
+      } else if (item.field === 'operate' || newIndex === fullColumn.length - 1) {
+        nodrag = true;
+        msg = '操作列';
+      }
+      if (nodrag) {
+        // 错误的移动
+        const oldThElem = wrapperElem.children[oldIndex] as HTMLElement;
+        if (newIndex > oldIndex) {
+          wrapperElem.insertBefore(targetThElem, oldThElem);
+        } else {
+          wrapperElem.insertBefore(targetThElem, oldThElem ? oldThElem.nextElementSibling : oldThElem);
+        }
+        return errorMessage(msg + '不允许拖动！');
+      }
+      // 获取列索引 columnIndex > fullColumn
+      const oldColumnIndex = $grid.getColumnIndex(tableColumn[oldIndex]);
+      const newColumnIndex = $grid.getColumnIndex(tableColumn[newIndex]);
+      // 移动到目标列
+      const currRow = fullColumn.splice(oldColumnIndex, 1)[0];
+      fullColumn.splice(newColumnIndex, 0, currRow);
+
+      // 拖拽方向 1: 右 -1: 左
+      const direction = newColumnIndex - oldColumnIndex > 0 ? 1 : -1;
+
+      // 获取新列
+      const newSort = (newColumnIndex + 1) * 10;
+      const oldSort = (oldColumnIndex + 1) * 10;
+      // 目标列索引+1，方便后续计算
+      const comparisonVal = newSort + 1 * direction;
+      for (const key in cacheColumns) {
+        const cacheValue = cacheColumns[key];
+        if (direction > 0 && cacheValue < comparisonVal && cacheValue > oldSort) {
+          // 大于拖拽列且小于目标列的索引,均向前移动一个单位
+          cacheColumns[key] = cacheValue - 10 * direction;
+        } else if (direction < 0 && cacheValue > comparisonVal && cacheValue < oldSort) {
+          // 小于拖拽列且大于目标列的索引,  均向后移动一个单位
+          cacheColumns[key] = cacheValue - 10 * direction;
+        }
+      }
+
+      cacheColumns[currRow.field] = newSort;
+
+      dbstorage.setItem(kSTORECOLUM, { [attrs.gridId]: cacheColumns });
+      $grid.loadColumn(fullColumn);
+    }
+  });
+};
+
+/**
+ * @description 常用查询面板确认查询
+ * @param data 常用查询条件
+ */
+const onSearch = data => {
+  showModal.value = false;
+  const { form } = xgrid.value.getProxyInfo();
+  Object.assign(form, data);
+  refreshData();
+};
+
+const querySuccess = e => {
+  console.log(e);
+};
+
+/**
+ * @description Vue实例对外暴露的相关方法或属性
+ */
+defineExpose({
+  getTableData,
+  getSelectRecords,
+  refreshData,
+  refreshColumn,
+  getInstance,
+  showLoading,
+  hiddenLoading
+});
+
+const toolbarButtonClick = ({ code }) => {
+  emit('buttonClick', code);
+};
+const cellClick = e => {
+  emit('cellClick', e);
+};
+const cellDbclick = e => {
+  emit('cellDbclick', e);
+};
+const editEctivated = e => {
+  emit('editEctivated', e);
+};
+
+/**
+ * @description: 监听窗口变化，动态改变表格的高度
+ */
+const addResizeListener = () => {
+  window.onresize = () => {
+    return (() => {
+      console.log('onresize');
+      let height = attrs?.height || window.innerHeight - 90 - 1;
+      if (attrs?.mode === 'form' && !attrs?.height) {
+        height = window.innerHeight - 180;
+      }
+      data.height = height < 240 ? 240 : height;
+      console.log(data.height);
+    })();
+  };
+};
+
+let initTime: any;
+nextTick(() => {
+  // 加载完成之后在绑定拖动事件
+  initTime = setTimeout(() => {
+    columnDrop();
+  }, 500);
+});
+
+/**
+ * @description Vue实例卸载
+ */
+onUnmounted(() => {
+  clearTimeout(initTime);
+  sortable2 && sortable2.destroy();
+});
+/**
+ * @description Vue实例挂载
+ */
+onBeforeMount(() => {
+  setGridConfig();
+  addResizeListener();
+});
+
+const emit = defineEmits<{
+  (e: 'buttonClick', code: string): void;
+  (e: 'cellClick', data: any): void;
+  (e: 'cellDbclick', data: any): void;
+  (e: 'editEctivated', data: any): void;
+}>();
+</script>
+
+<style lang="scss">
+.ut-grid-wrapper {
+  padding: 5px;
+  background-color: #fff;
+
+  .vxe-form--item {
+    padding: 0.1em 0.8em 0.1em 0 !important;
+
+    .el-select {
+      .el-input {
+        height: 26px;
+      }
+
+      .el-select__tags-text {
+        color: #000;
+      }
+    }
+  }
+  .vxe-grid--layout-body-content-wrapper {
+    overflow: hidden;
+  }
+}
+</style>

package/src/components/udp/index.ts

@@ -1,4 +1,7 @@
-import UtModalForm2 from './modal-form.vue';
-import FormUpload2 from './form-upload.vue';
-
-export { UtModalForm2, FormUpload2 };
+import UtModalForm2 from './modal-form.vue';
+import FormUpload2 from './form-upload.vue';
+import utLov2 from './lov.vue';
+import UtModalGrid2 from './modal-grid.vue';
+import UtGrid2 from './grid.vue';
+
+export { UtGrid2, UtModalForm2, FormUpload2, utLov2, UtModalGrid2 };