sohelp-eleplus 1.1.13

package/sohelp-grid/index.vue

@@ -0,0 +1,1886 @@
+<script setup>
+import { Filter, Search, Sort, SortDown, SortUp } from "@element-plus/icons-vue";
+import { useMobile } from "@/utils/use-mobile";
+import { usePermission } from "@/utils/use-permission";
+import DefaultProps from "./js/DefaultProps";
+import { computed, nextTick, reactive, ref, watch } from "vue";
+import DefaultGridOptions from "./js/DefaultGridOptions";
+import { calcSummary, switchGridValue } from "./js/SohelpGridConfig";
+import { EleMessage } from "@/components/ele-admin-plus/components";
+import { ElMessageBox } from "element-plus/es";
+import { useFormData } from "@/utils/use-form-data";
+import { CrudHttp, resetCommonConfig, updateCommonConfig } from "@/components/sohelp-eleplus";
+import ApprovalModal from "@/views/user/todo/components/approval-modal.vue";
+import WorkflowDrawer from "@/views/user/todo/components/workflow-drawer.vue";
+import SohelpTextareaInput from "@/components/sohelp-eleplus/sohelp-textarea-input/index.vue";
+import SohelpPower from "@/components/sohelp-eleplus/sohelp-power/index.vue";
+import FilterConditionItem from "@/components/sohelp-eleplus/sohelp-grid/components/filter-condition-item.vue";
+import { useSohelpGridConfig } from "./js/useSohelpGridConfig.js";
+import { useI18n } from "vue-i18n";
+import SohelpEntityForm from "@/components/sohelp-eleplus/sohelp-entity-form/index.vue";
+
+const { initial, isConfigDone } = useSohelpGridConfig();
+const { t } = useI18n();
+const { mobile } = useMobile();
+const permission = usePermission();
+const props = defineProps({ ...JSON.parse(JSON.stringify(DefaultProps)) });
+const emit = defineEmits(["resetFilter", "checkboxAll", "checkboxChange", "toolbarButtonClick", "operationButtonClick", "menuRightClick", "showFilter", "editClosed", "currentColumnChange"]);
+const drawerKey = ref(0);
+const todoDrawerRef = ref(null);
+const drawerVisible = ref(false);
+const drawerData = ref(null);
+const current = ref(null);
+const isPage = ref(false);
+const approvalModalVisible = ref(false);
+const approvalData = ref({});
+
+//报表打印
+const currentReportValue = ref(null);
+const visibleReport = ref(false);
+const reportData = ref([]);
+const currentRow = ref(null);
+const loadReport = () => {
+  SohelpHttp.get("/engine/web/report/list", { refid: props.refid }).then(res => {
+    if (res.meta.success) {
+      reportData.value = res.data.map(item => ({
+        value: item.refid,
+        refid: item.refid,
+        name: item.name,
+        createDate: item.createDate
+      }));
+      if (reportData.value.length > 0) {
+        currentReportValue.value = reportData.value[0].refid;
+      }
+    } else {
+      EleMessage.error(res.meta.message);
+    }
+  });
+};
+
+const designReport = () => {
+  if (!currentReportValue.value || !currentRow?.value?.id) {
+    EleMessage.error("请选择报表模板或报表数据!");
+    return;
+  }
+  const baseURl = SohelpHttp.getBaseUrl();
+  const url = baseURl.endsWith("/") ? baseURl : baseURl + "/";
+  window.open(url + `ureport/designer?_u=${currentReportValue.value}&id=${currentRow?.value?.id}&refid=${currentReportValue?.value}`);
+};
+const openReport = () => {
+  if (!currentReportValue.value || !currentRow?.value?.id) {
+    EleMessage.error("请选择报表模板或报表数据!");
+    return;
+  }
+  const baseURl = SohelpHttp.getBaseUrl();
+  const url = baseURl.endsWith("/") ? baseURl : baseURl + "/";
+  window.open(url + `ureport/preview?_u=${currentReportValue.value}&id=${currentRow?.value?.id}&refid=${currentReportValue?.value}`);
+};
+const closeReport = () => {
+  visibleReport.value = false;
+};
+
+const loading = ref(false);
+//显示实体表单
+const visibleEntityForm = ref(false);
+//当前工具栏配置信息
+const toolbarButtonParams = ref({});
+const entityFormRef = ref(null);
+const entityFormData = ref({});
+const entityFormValue = ref({});
+const entityFormConfig = ref({});
+const closeEntityForm = () => {
+  visibleEntityForm.value = false;
+};
+const saveEntityForm = () => {
+  loading.value = true;
+  entityFormRef.value.save({}, (res) => {
+    loading.value = false;
+    if (res.meta.success) {
+      refresh();
+      visibleEntityForm.value = false;
+    } else {
+      EleMessage.error(res.meta.message);
+    }
+  });
+};
+
+
+//配置加载状态
+// Grid配置
+const sohelpConfig = defineModel("config");
+// 过滤条件数据
+const filterValue = defineModel("filterValue", {
+  type: Object,
+  default: () => ({
+    keywords: "",
+    power: 0,
+    filter: [],
+    scheme: "",
+    sort: "",
+    order: ""
+  })
+});
+
+// 属性映射
+const propertiesMap = defineModel("propertiesMap");
+
+// Grid实例
+const sohelpVxeGridRef = ref(null);
+// GridOptions配置
+const gridOptions = reactive(JSON.parse(JSON.stringify(DefaultGridOptions)));
+const batchButtonsIndex = ref(2);
+const sortValue = ref("");
+/**
+ * 缓存网格列表数据
+ * @type {UnwrapNestedRefs<*[]>}
+ */
+const gridData = reactive([]);
+/**
+ * 记忆原始过虑条件数据
+ * @type {Ref<UnwrapRef<string>>}
+ */
+const originFilterValue = ref("");
+
+/**
+ * 选中数据庥
+ * @type {Ref<UnwrapRef<*[]>>}
+ */
+const selections = ref([]);
+/**
+ * 网格列表底部数据
+ * @type {UnwrapNestedRefs<*[]>}
+ */
+const footerData = reactive([]);
+/**
+ * 定义计算公式
+ * @type {UnwrapNestedRefs<{}>}
+ */
+const formulaMap = reactive({});
+/**
+ * 定义合计数据
+ * @type {UnwrapNestedRefs<{}>}
+ */
+const summaryData = reactive({});
+
+/**
+ * 查看范围
+ * @type 类型
+ * @users 用户列表
+ */
+const changePower = (type, users) => {
+  filterValue.value.power = type;
+  if (type == 9) {
+    filterValue.value.powerUsers = users;
+  }
+  filter();
+};
+
+
+const getCellValue = (rowIndex, name) => {
+  return (gridData[rowIndex] && gridData[rowIndex][name]) ? gridData[rowIndex][name] : "";
+};
+
+/**
+ * 获取关键字描述
+ */
+const getKeywordsPlaceholder = computed(() => {
+  if (sohelpConfig.value?.filter?.keywords?.length) {
+    return t("grid.toolbar.keywords") + ",【" + sohelpConfig.value.filter?.keywords?.filter(key => propertiesMap.value[key]).map(key => t(propertiesMap.value[key].i18n) || propertiesMap.value[key].label).join("/") + "】";
+  }
+  return t("grid.toolbar.keywords");
+});
+
+
+/**
+ * SohelpTextareaInput弹窗标题
+ */
+const getCurrentFieldLabel = computed(() => {
+  return (propertiesMap.value[textareaState["field"]]?.label || "") + "修改";
+});
+
+const keywordsChange = (val) => {
+  filterValue.value = {
+    ...filterValue.value,
+    keywords: val
+  };
+};
+
+/**
+ * 获取当前筛选
+ * @param field
+ */
+const getCurrentFilter = (field) => {
+  return computed({
+    get: () => {
+      return filterValue.value.filter?.find(f => f.name === field);
+    },
+    set: (newValue) => {
+      const newFilters = [...(filterValue.value.filter || [])];
+      const index = newFilters.findIndex(f => f.name === field);
+      if (index >= 0) {
+        newFilters[index] = { ...newFilters[index], ...newValue };
+      }
+      filterValue.value = { ...filterValue.value, filter: newFilters };
+    }
+  });
+};
+
+/**
+ *获取外键标签
+ */
+const getTableSelectLabel = (val, index, field, column) => {
+  if (!gridData[index] || !gridData[index][field]) {
+    return "";
+  }
+  let obj = gridData[index][field];
+  if (obj && typeof obj === "object") {
+    if (!Array.isArray(obj)) {
+      obj = [obj];
+    }
+    const { labelField = "label", valueField = "id" } = column.editRender;
+    const arr = Array.isArray(val) ? val : [val];
+    return obj.filter(item => arr.includes(item.id))?.map(row => row[labelField]).filter(Boolean).join(",");
+
+  } else {
+    return "";
+  }
+};
+
+/**
+ * 获取排序数据
+ */
+const sortList = computed(() => {
+  return sohelpConfig.value.filter?.sort?.map((field) => {
+    let p = propertiesMap.value[field];
+    return {
+      title: p?.label || field,
+      field: field
+    };
+  });
+});
+
+/**
+ * 排序点击事件
+ */
+const sortCommand = (field, order) => {
+  if (sohelpVxeGridRef.value) {
+    sohelpVxeGridRef.value.setSort({ field, order });
+  }
+  closeSortDropCard();
+};
+
+const isActiveSort = computed(() => {
+  return (field, order) => {
+    return sortValue.value === field + "!" + order ? "primary" : "";
+  };
+});
+
+/**
+ *
+ * @param val 监听高级筛选值变化
+ */
+const filterValueChange = (val) => {
+  //console.log('v', val);
+};
+
+/**
+ * 初始化数据
+ */
+const loadConfig = (param = {}) => {
+  initial(!props.isEntityGrid, props.refid)
+    .then((config) => {
+      /**配置刷新功能 */
+      config.gridOptions = {
+        ...config.gridOptions,
+        toolbarConfig: {
+          ...config.gridOptions?.toolbarConfig,
+          refresh: true,
+          zoom: true
+        },
+        proxyConfig: {
+          autoLoad: false,
+          ajax: {
+            query: () => refresh()
+          }
+        }
+      };
+
+      //工具栏按钮权限
+      Object.assign(formulaMap, config.formulaMap);
+      Object.assign(gridOptions, config.gridOptions);
+      // 过滤位置
+      config.sohelpConfig.filter.config._visibleFilter = config.sohelpConfig?.filter.config.visibleFilter || false;
+      sohelpConfig.value = { ...config.sohelpConfig };
+
+      Object.assign(propertiesMap.value, config.propertiesMap);
+
+      Object.assign(footerData, config.footerData);
+      batchButtonsIndex.value = config.batchButtonsIndex;
+      sohelpConfig.value.list = config.sohelpConfig.list;
+
+      if (!filterValue.value.filter) {
+        filterValue.value.filter = [];
+      }
+
+      Object.assign(filterValue.value.filter, config.sohelpConfig.filter?.field || []);
+      //存储原始查询数据，用于重置
+      originFilterValue.value = JSON.stringify(filterValue.value);
+
+      nextTick(() => {
+        if (sohelpVxeGridRef.value && props.autoLoad === true) {
+          sohelpVxeGridRef.value.commitProxy("query");
+        }
+      });
+    })
+    .catch((e) => {
+      console.error("Initial Configuration Error:", e);
+      EleMessage.error(e.message);
+    });
+};
+
+
+const gridValue = ref();
+
+
+const load = async (params = {}, callback) => {
+  //清空选中
+  selections.value = [];
+  gridOptions.loading = true;
+  gridOptions.params = params;
+  await isConfigDone();
+  const $grid = sohelpVxeGridRef.value;
+  if ($grid) {
+    const url = props.url || sohelpConfig.value.requestValue;
+    if (sohelpConfig.value.requestType != "crud" && !url) {
+      gridOptions.loading = false;
+      return { results: [], total: 0 };
+    }
+
+    let pageConfig = {};
+    // 是否分页
+    if (gridOptions.pagerConfig?.enabled) {
+      pageConfig.page = gridOptions.pagerConfig?.currentPage ?? 1;
+      pageConfig.limit = gridOptions.pagerConfig?.pageSize ?? 50;
+    }
+
+    //过滤条件筛选
+    params["filter"] = filterValue.value.filter?.filter(item => (item.comparison === "EMPTY" || item.comparison === "NOT_EMPTY") || item.value?.length > 0);
+    const res = await SohelpHttp.get(url, {
+      refid: props.refid,
+      ...filterValue.value,
+      ...params,
+      ...pageConfig
+    });
+
+
+    if (res?.meta?.success) {
+      if (res.data) {
+        gridOptions.pagerConfig.total = Number(res.data.total);
+        Object.assign(gridData, JSON.parse(JSON.stringify(res.data.results)));
+        gridValue.value = switchGridValue(res.data.results);
+        $grid.loadData(gridValue.value);
+        Object.assign(summaryData, res.data?.summary || {});
+        updateColumnsFilter();
+        gridOptions.loading = false;
+        //统计
+        if (footerData.length > 0) {
+          gridOptions.footerData = updateSummary(res.data.results, res.data?.summary || {});
+          $grid?.refreshColumn();
+        }
+      }
+    } else {
+      EleMessage.error(res.meta.message);
+    }
+    gridOptions.loading = false;
+    //回调方法
+    if (callback && typeof callback === "function") {
+      callback(res);
+    }
+  }
+};
+
+/**
+ * 重新加载数据
+ */
+const reload = async (params = {}) => {
+  Object.assign(gridOptions.params, params);
+  load(gridOptions.params);
+};
+
+
+/**
+ * 单元格点击更新 表尾统计
+ */
+const cellClick = () => {
+  const data = sohelpVxeGridRef.value?.getFullData();
+  gridOptions.footerData = updateSummary(data, summaryData);
+};
+
+/**
+ * 统计
+ */
+const updateSummary = (data, summaryMap = {}) => {
+  const arr = footerData.map(item => {
+    const field = data.map(f => {
+      let val = Number(f[item.field]);
+      return isNaN(val) ? 0 : val;
+    });
+
+    let value = calcSummary(field, item.type);
+    if (item.type === "remotesum") {
+      value = summaryMap[item.field] || "";
+    }
+
+    if (item.summaryRender) {
+      try {
+        const func = new Function("return " + item.summaryRender)();
+        value = func.call(sohelpVxeGridRef, value);
+      } catch (e) {
+        console.error("函数执行错误:", e);
+      }
+    }
+
+    return {
+      [item.field]: value
+    };
+  });
+
+  arr.unshift({ _seq: "统计" });
+  return [Object.assign({}, ...arr)];
+};
+
+
+/**
+ * 分页事件
+ */
+const pageChangeEvent = (page) => {
+  isPage.value = true;
+  gridOptions.pagerConfig.currentPage = page.currentPage;
+  gridOptions.pagerConfig.pageSize = page.pageSize;
+  reload();
+};
+
+
+/**
+ * 获取Common类型操作栏 并根据flw_id判断是否显示
+ * @param row
+ */
+const getOperationButtonsByType = (row, type = "common") => {
+  let common = getOperationToolbars.value?.[type] || [];
+  if (common.length > 0) {
+    if (row.hasOwnProperty("flw_id")) {
+      const field = row.flw_id === "0" ? "workflow.view" : "workflow.submit";
+      common = common.filter(f => f.code != field);
+    } else {
+      common = common.filter(f => (f.code != "workflow.submit" || f.code != "workflow.view"));
+    }
+    return common;
+  }
+  return [];
+};
+
+/**
+ * 获取操作栏
+ */
+const getOperationToolbars = computed(() => {
+  const buttonsMap = {};
+  sohelpConfig.value.operationToolbars?.filter(f => !f.authority || permission.hasPermission(f.authority)).map(button => {
+    const type = button.buttonType || "common";
+    const code = button.type === "custom" ? button.id : button.type;
+    if (!buttonsMap[type]) {
+      buttonsMap[type] = [];
+    }
+    const title = (button.type === "custom") ? button.title : t("grid.toolbar." + button.type?.replaceAll(".", "-"));
+    let params = button.params || {};
+    if (button.params && typeof button.params === "string") {
+      try {
+        params = JSON.parse(button.params);
+      } catch (e) {
+        params = {};
+        EleMessage.error("button.params配置JSON参数格式错误");
+      }
+    }
+    buttonsMap[type].push({
+      title: title || button.title,
+      "id": button.id,
+      code: code,
+      handler: button.handler,
+      icon: button.iconCls,
+      params: params,
+      refid: button.refid,
+      openType: button.openType
+    });
+  });
+  return buttonsMap;
+});
+
+
+/**
+ * 行操作栏点击事件
+ * @param row
+ * @param item
+ */
+const operationHandler = ({ item, row, $grid }) => {
+  //操作栏事件执行
+  if (item.handler && typeof item.handler === "string") {
+    try {
+      const func = new Function("row", "$grid", `return (async () => { ${item.handler} })()`);
+      (async () => {
+        const context = {
+          $message: EleMessage,
+          $SohelpModule: window.$SohelpModule,
+          $SohelpHttp: window.$SohelpHttp,
+          $confirm: (title, callback) => {
+            ElMessageBox.confirm(title, "提示", {
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
+              type: "warning"
+            }).then(() => {
+              callback && callback();
+            }).catch(() => {
+            });
+          }
+        };
+        await func.call(context, row, $grid); // 显式传递所有参数
+      })();
+    } catch (e) {
+      EleMessage.error(`操作栏事件出错:${e.message}`);
+    }
+  } else if (item.refid) {
+    if (item.openType === "tab") {
+      window.$SohelpModule.openTab(item.refid, { id: row.id }, item.params || {});
+    } else if (item.openType === "drawer") {
+      console.error("item", item.params);
+      window.$SohelpModule.openDrawer(item.refid, { id: row.id }, item.params || {});
+    } else {
+      window.$SohelpModule.openModal(item.refid, { id: row.id }, item.params || {});
+    }
+  } else {
+    switch (item.code) {
+      case "crud.edit":
+        visibleEntityForm.value = true;
+        toolbarButtonParams.value = item.params || {};
+        if (!toolbarButtonParams.value["title"]) {
+          toolbarButtonParams.value["title"] = t("grid.toolbar.edit");
+        }
+        loading.value = true;
+        CrudHttp.detail(props.refid, { id: row.id }).then(res => {
+          if (res.meta.success) {
+            setTimeout(() => {
+              entityFormRef.value.setFormData(res.data);
+            }, 10);
+          } else {
+            EleMessage.error(res.meta.message);
+          }
+          loading.value = false;
+        }).catch(e => {
+          loading.value = false;
+        });
+
+        break;
+      case "crud.view":
+        visibleEntityForm.value = true;
+        toolbarButtonParams.value = item.params || {};
+        if (!toolbarButtonParams.value["title"]) {
+          toolbarButtonParams.value["title"] = t("grid.toolbar.view");
+        }
+        toolbarButtonParams.value["readonly"] = true;
+        CrudHttp.detail(props.refid, { id: row.id }, (res) => {
+          if (res.meta.success) {
+            setTimeout(() => {
+              entityFormRef.value.setFormData(res.data);
+            }, 10);
+          } else {
+            EleMessage.error(res.meta.message);
+          }
+        });
+        break;
+      case "crud.delete" :
+        remove({ id: [row.id] });
+        break;
+      case "workflow.submit":
+        submitWorkflow({ id: [row.id] });
+        break;
+      case "workflow.view" :
+        viewWorkflow(row.id);
+        break;
+      case "report.print" :
+        visibleReport.value = true;
+        currentRow.value = row;
+        loadReport();
+        break;
+      default:
+        break;
+    }
+  }
+  emit("operationButtonClick", { item, row, $grid });
+};
+
+/**
+ * 获取表格数据
+ */
+const getTableData = () => {
+  return sohelpVxeGridRef.value?.getTableData();
+};
+
+/**
+ * 获取处理过的数据
+ */
+const getData = () => {
+  const { tableData } = getTableData();
+  return tableData;
+};
+
+/**
+ * 更新
+ */
+const updateValue = () => {
+  emit("update:modelValue", getData());
+  emit("change", getData());
+};
+/**
+ * 指定index位置插入数据
+ * @param data
+ * @param index
+ */
+const insertField = (data, index = -1) => {
+  if (sohelpVxeGridRef.value) {
+    sohelpVxeGridRef.value.insertAt(data, index);
+    sohelpVxeGridRef.value.clearEdit();
+  }
+  updateValue();
+};
+
+
+/**
+ * 刷新列表
+ */
+const refresh = () => {
+  if (!isPage.value) {
+    if (gridOptions.pagerConfig && gridOptions.pagerConfig.enabled) {
+      gridOptions.pagerConfig.currentPage = 1;
+    }
+    emit("refresh");
+  }
+  isPage.value = false;
+  reload({ ...gridOptions.params });
+};
+
+/**
+ * 列表头右键菜单事件
+ * @param column
+ */
+const headerCellMenu = ({ column }) => {
+  if (column.editRender?.edit && gridOptions.menuConfig.header.options.length > 0) {
+    // 只对特定类型的列显示菜单项
+    const visible = column && (column.type === "SohelpSwitch" || column.type === "SohelpCheckbox");
+    // 设置每个菜单项的可见性
+    gridOptions.menuConfig.header.options[0].forEach(item => {
+      item.visible = visible;
+    });
+  }
+};
+
+/**
+ * 右键菜单点击事件
+ * @param menu 菜单项
+ * @param row 行数据
+ * @param column 列配置
+ * @param rowIndex 行索引
+ */
+const menuRightClick = async ({ menu, row, column, rowIndex }) => {
+  const $grid = sohelpVxeGridRef.value;
+  if ($grid) {
+    $grid.setCurrentRow(row);
+    const { fullData } = $grid.getTableData();
+    switch (menu.code) {
+      case "insert":
+        await $grid.insertAt({ role_name: "sales user" }, rowIndex);
+        break;
+      case "all-select":
+        fullData.forEach(row => {
+          row[column.field] = ["0", 0, "1", 1].includes(row[column.field]) ? 1 : true;
+        });
+        break;
+      case "revert-select":
+        fullData.forEach(row => {
+          if (["0", 0, "1", 1].includes(row[column.field])) {
+            row[column.field] = 1 - row[column.field];
+          } else {
+            row[column.field] = !row[column.field];
+          }
+        });
+        break;
+      default:
+        break;
+    }
+  }
+
+  // 执行右击事件
+  emit("menuRightClick", { menu, row, column, rowIndex });
+};
+
+const sohelpSortRef = ref(null);
+const closeSortDropCard = () => {
+  if (sohelpSortRef.value) {
+    sohelpSortRef.value.close();
+  }
+};
+
+/**
+ * 获取用户数据源
+ */
+const userDatasource = computed(async () => {
+  return await SohelpHttp.get("/engine/web/user/list")
+    .then((res) => {
+      if (res.data) {
+        return [...res.data];
+      }
+    })
+    .catch((err) => {
+      EleMessage.error(err.message || "error");
+    });
+});
+
+/**
+ * SohelpTextareaInput 弹窗
+ */
+const [textareaState, resetTextareaState, setTextareaState] = useFormData({
+  visible: false,
+  value: "",
+  row: null,
+  field: ""
+});
+
+/**
+ * 显示 SohelpTextareaInput 弹窗
+ */
+const showTextareaModal = (column, field, row) => {
+  if (column?.editRender?.enabled) {
+    setTextareaState({
+      visible: true,
+      value: row[field],
+      row,
+      field
+    });
+  }
+};
+
+/**
+ * 取消 SohelpTextareaInput 弹窗
+ */
+const textareaCancel = () => {
+  resetTextareaState();
+};
+
+/**
+ * checkbox复选框
+ */
+const onCheckboxChange = () => {
+  selections.value = sohelpVxeGridRef.value?.getCheckboxRecords() || [];
+  emit("checkbox-change", selections.value);
+};
+
+
+/**
+ * 确定 SohelpTextareaInput 弹窗
+ */
+const textareaConfirm = () => {
+  const $grid = sohelpVxeGridRef.value;
+  if ($grid) {
+    $grid.setRow(textareaState.row, {
+      ...textareaState.row,
+      [textareaState.field]: textareaState.value
+    });
+  }
+  textareaCancel();
+};
+
+/**
+ * 获取组织数据源
+ */
+const orgDatasource = computed(async () => {
+  return await SohelpHttp.get("/engine/web/org/list")
+    .then((res) => {
+      if (res.data) {
+        return [...res.data];
+      }
+    })
+    .catch((err) => {
+      EleMessage.error(err.message || "error");
+    });
+});
+/**
+ * 根据引擎表格获取更新数据
+ * @returns {{inserted: {}, deleted: {}, updated: {}}}
+ */
+const getCrudUpdater = () => {
+  const $grid = sohelpVxeGridRef.value;
+  return {
+    "inserted": $grid?.getInsertRecords().map(item => {
+      return { ...item };
+    }) || [],
+    "updated": $grid?.getUpdateRecords(),
+    "deleted": $grid?.getRemoveRecords().map(item => item.id) || []
+  };
+};
+
+/**
+ * 删除记录
+ */
+const remove = (params) => {
+  ElMessageBox.confirm("确定要删除吗？", "提示").then(() => {
+    CrudHttp.delete(props.refid, params, (res) => {
+      if (res.meta.success) {
+        EleMessage.success(res.meta.message);
+        refresh();
+      } else {
+        EleMessage.error(res.meta.message);
+      }
+    });
+  }).catch(() => {
+  });
+};
+
+/**
+ *
+ * @param handler
+ */
+const executeToolbarCustomHandler = (button) => {
+  const $grid = sohelpVxeGridRef.value;
+  try {
+    let isRows = button.code.includes("batch.");
+    const func = new Function(isRows ? "rows" : "row", "$grid", `return (async () => { ${button.handler} })()`);
+    (async () => {
+      const context = {
+        $message: EleMessage,
+        $confirm: (title, callback) => {
+          ElMessageBox.confirm(title, "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(() => {
+            callback && callback();
+          }).catch(() => {
+          });
+        },
+        $grid: $grid,
+        getCrudUpdater: getCrudUpdater
+      };
+      $grid.refresh = refresh;
+      await func.call(context, isRows ? selections.value : current, $grid); // 显式传递所有参数
+    })();
+  } catch (e) {
+    EleMessage.error(`${e.message}`);
+  }
+};
+/**
+ * 工具栏点击事件
+ * @param param0
+ */
+const toolbarClick = async ({ button }) => {
+  const $grid = sohelpVxeGridRef.value;
+  let rowIndex = -1;
+  const row = {};
+
+
+  const current = $grid?.getCurrentRecord();
+  if (current) {
+    rowIndex = $grid?.getVTRowIndex(current);
+  }
+
+  //工具栏事件执行
+  if (button?.handler) {
+    executeToolbarCustomHandler(button);
+  } else if (button.refid) {
+    if (button.openType === "tab") {
+      window.$SohelpModule.openTab(button.refid, {}, button.params || {});
+    } else if (button.openType === "drawer") {
+      window.$SohelpModule.openDrawer(button.refid, {}, button.params || {});
+    } else {
+      window.$SohelpModule.openModal(button.refid, {}, button.params || {});
+    }
+  } else {
+    switch (button.code) {
+      case "row.add":
+        insertField(row, -1);
+        break;
+      case "row.copy":
+        if (current) {
+          Object.assign(row, { ...current });
+          if (row?.name) {
+            row.name = "";
+          }
+          delete row._X_ROW_KEY;
+        }
+        break;
+      case "row.insert":
+        rowIndex = getData()?.length > 0 ? rowIndex : -1;
+        insertField(row, rowIndex);
+        break;
+      case "row.delete":
+        $grid.removeCheckboxRow();
+        break;
+      case "crud.create":
+        visibleEntityForm.value = true;
+        toolbarButtonParams.value = button.params || {};
+        if (!toolbarButtonParams.value["title"]) {
+          toolbarButtonParams.value["title"] = t("grid.toolbar.create");
+        }
+        CrudHttp.initial(props.refid, { id: row.id }, (res) => {
+          if (res.meta.success) {
+            setTimeout(() => {
+              entityFormRef.value.setFormData(res.data);
+            }, 10);
+          } else {
+            EleMessage.error(res.meta.message);
+          }
+        });
+        break;
+      case "crud.save":
+        CrudHttp.save(props.refid, { "default": getCrudUpdater() }, (res) => {
+          if (res.meta.success) {
+            EleMessage.success(res.meta.message);
+            refresh();
+          } else {
+            EleMessage.error(res.meta.message);
+          }
+        });
+        break;
+      case "crud.view":
+        break;
+      case "crud.delete":
+        remove({ id: selections.value.map(item => item.id) });
+        break;
+      case "workflow.submit":
+        submitWorkflow({ id: selections.value.map(item => item.id) });
+        break;
+      case "report.print":
+        break;
+      case "batch.import":
+        break;
+      case "batch.delete":
+        break;
+      case "batch.export":
+        break;
+      case "batch.print":
+        break;
+      default:
+        break;
+    }
+
+  }
+};
+
+/**
+ * grid事件
+ * 排序
+ */
+const gridEvents = {
+  sortChange({ field = "", order = "" }) {
+    if (!order) {
+      field = order = "";
+    }
+    sortValue.value = field + "!" + order;
+    filterValue.value.sort = field;
+    filterValue.value.order = order;
+    filter({});
+  },
+
+  toolbarButtonClick(config) {
+    toolbarClick(config);
+    emit("toolbarButtonClick", config);
+  }
+
+};
+
+/**
+ * 查询
+ * param type：'filter' | 'column', default(filter) 区分是高级筛选，还是列筛选
+ */
+const filter = (param = {}) => {
+  gridOptions.pagerConfig.currentPage = 1;
+  reload();
+};
+
+
+/**
+ * 重置
+ */
+const resetFilter = () => {
+  filterValue.value = JSON.parse(originFilterValue.value);
+  //重置列筛选
+  if (sohelpVxeGridRef.value) {
+    sohelpVxeGridRef.value.clearFilter();
+  }
+  filter();
+};
+
+/**
+ * 筛选弹窗
+ */
+const showFilter = () => {
+  if (sohelpConfig.value.filter?.config.filterPosition === "NONE") {
+    sohelpConfig.value.filter.config.filterPosition = "TOP";
+    sohelpConfig.value.filter.config.visibleFilter = false;
+  }
+  emit("showFilter", sohelpConfig.value.filter.config.filterPosition);
+};
+
+
+/**
+ * 打开提交工作流界面
+ */
+const submitWorkflow = (ids) => {
+  approvalData.value = {
+    refid: props.refid,
+    ...ids
+  };
+  approvalModalVisible.value = true;
+};
+
+/**
+ * 查看工作流
+ * @param row
+ */
+const viewWorkflow = (id) => {
+  drawerData.value = {
+    id: id,
+    refid: props.refid
+  };
+  drawerVisible.value = true;
+};
+
+/**
+ *  筛选
+ */
+const changeNameFilter = (option, val, column) => {
+  console.log("option", option, val, column);
+  const $grid = sohelpVxeGridRef.value;
+  if ($grid) {
+    $grid.setFilter(column.field, [{
+      data: val?.value || "",
+      value: val.value || "",
+      checked: true
+    }]);
+    $grid.updateFilterOptionStatus(option, true);
+  }
+};
+
+const filterVisible = ({ column, field, visible }) => {
+  if (visible) {
+    const hasField = filterValue.value.filter?.find(f => f.name === field);
+    if (!hasField) {
+      filterValue.value.filter = [...filterValue.value.filter, {
+        comparison: "LIKE",
+        name: field,
+        value: ""
+      }];
+    }
+    const $grid = sohelpVxeGridRef.value;
+    if ($grid) {
+      $grid.setFilter(field, [{
+        data: "",
+        value: "",
+        checked: true
+      }]);
+    }
+
+    // $grid.updateFilterOptionStatus({
+    //   label: field,
+    //   value: "123",
+    //   data: 456
+    // }, true);
+
+
+  }
+};
+
+/**
+ *列筛选
+ */
+const handleFilterChange = ({ field, datas }) => {
+  filter();
+  //重置功能 重置要清空filterValue.filter对象的项
+  if (!datas?.length) {
+    const map = new Map(filterValue.value.filter?.map(item => [item.name, item]));
+    if (map.get(field)) {
+      map.get(field).value = "";
+    }
+  }
+};
+
+/**
+ * 过滤掉对象中_开头的属性 _sqe、_checkbox、_operation
+ * @param obj
+ */
+const filterUnderscoreProps = (obj = {}) => {
+  if (typeof obj !== "object" || obj === null || Array.isArray(obj)) {
+    return {};
+  }
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    const filterKey = ["_checkbox", "_seq"];
+    if (!filterKey.includes(key)) {
+      acc[key] = typeof value === "object" ? filterUnderscoreProps(value) : value;
+    }
+    return acc;
+  }, {});
+};
+
+
+/**
+ * 根据 obj 对象的值修改 properties 数组中对应项的指定属性
+ * @param {Object} obj
+ * @param {Array} properties
+ * @param {string} key
+ */
+const updateProperties = (obj, properties, key, propertiesMap) => {
+  if (!obj || Object.keys(obj).length === 0) return;
+  const map = propertiesMap || new Map(properties.map((item, index) => [item.name, index]));
+  Object.entries(obj).forEach(([name, value]) => {
+    const index = map.get(name);
+    if (index !== undefined && properties[index]) {
+      properties[index][key] = value;
+      //fixed
+      if (key === "lockAlign") {
+        properties[index]["lock"] = value ? true : false;
+      }
+    }
+  });
+};
+
+
+/**
+ * 属性根据sortData排序
+ * @param {Array} properties
+ * @param {Object} sortData
+ */
+const sortPropertiesInPlace = (properties, sortData) => {
+  const sortOrder = {};
+  Object.entries(sortData)
+    .sort((a, b) => a[1] - b[1])
+    .forEach(([key], index) => {
+      sortOrder[key] = index;
+    });
+
+  properties.sort((a, b) => {
+    const aOrder = sortOrder[a.name];
+    const bOrder = sortOrder[b.name];
+
+    if (aOrder !== undefined && bOrder !== undefined) {
+      return aOrder - bOrder;
+    }
+    if (aOrder !== undefined) return -1;
+    if (bOrder !== undefined) return 1;
+    return 0;
+  });
+};
+
+/**
+ * 列设置操作
+ */
+const handleCustom = async ({ type, $grid }) => {
+  // 恢复默认
+  if (type === "reset") {
+    const loading = EleMessage.loading("恢复默认中..");
+    const message = await resetCommonConfig({ refid: props.refid }).catch(err => {
+      EleMessage.error(err.message);
+      loading.close();
+    });
+    if (message) {
+      EleMessage.success(message);
+    }
+    loading.close();
+  }
+
+  //确认
+  if (type === "confirm") {
+    //获取当前列配置
+    const { sortData, ...columnsData } = filterUnderscoreProps($grid?.getCustomStoreData());
+    const properties = JSON.parse(JSON.stringify([...sohelpConfig.value.properties])).map(item => {
+      return {
+        ...item,
+        list: sohelpConfig.value.list.includes(item.name)
+      };
+    });
+
+    const propertiesMap = new Map(properties.map((item, index) => [item.name, index]));
+
+
+    //修改对应的field
+    const fieldMapping = {
+      fixedData: "lockAlign",
+      resizableData: "width",
+      visibleData: "list"
+    };
+    // 修改属性
+    Object.entries(columnsData).forEach(([key, value]) => {
+      updateProperties(value, properties, fieldMapping[key], propertiesMap);
+    });
+    //根据sortData排序
+    sortPropertiesInPlace(properties, sortData);
+    const loading = EleMessage.loading("保存配置中..");
+
+    const message = await updateCommonConfig({
+      refid: props.refid,
+      properties: properties.map(item => {
+        return {
+          name: item.name,
+          width: item.width,
+          list: item.list,
+          lockAlign: item.lockAlign,
+          lock: item.lock
+        };
+      })
+    }).catch(err => {
+      EleMessage.error(err.message);
+      loading.close();
+    });
+    if (message) {
+      EleMessage.success(message);
+    }
+
+    localStorage.setItem("VXE_CUSTOM_STORE", "");
+    loading.close();
+  }
+};
+
+
+/**
+ * 更新columns过滤状态
+ */
+const updateColumnsFilter = () => {
+  const $grid = sohelpVxeGridRef.value;
+  if ($grid && filterValue.value.filter?.length) {
+    filterValue.value.filter?.forEach((item) => {
+      $grid.setFilter(item.name, [
+        {
+          checked: item.value?.length > 0
+        }
+      ]);
+    });
+  }
+};
+
+
+/**
+ * 计算公式
+ * @param row
+ * @param column
+ */
+const editClosed = (props) => {
+  const { row, column } = props;
+  Object.entries(formulaMap).forEach(([key, value]) => {
+    try {
+      const formulaValue = formulaMap[key]["formulaValue"];
+      if (formulaValue.indexOf(column.field) > 0) {
+        const str = formulaValue.replace(/\s+/g, "")
+          .replace(/\${/g, "row.")
+          .replace(/}/g, "");
+        const v = new Function("row", `return ${str}`)(row);
+        if (!Number.isNaN(v)) {
+          row[key] = v;
+        }
+      }
+    } catch (e) {
+      console.error("计算公式错误：", e);
+      EleMessage.error("计算公式错误：", e.message);
+    }
+    nextTick(() => {
+      if (row[column.property] && row[column.property].toString().trim() !== "") {
+        sohelpVxeGridRef.value?.clearValidate([column.property]);
+      }
+    });
+  });
+  emit("editClosed", props);
+};
+
+const validate = async () => {
+  const $grid = sohelpVxeGridRef.value;
+  if ($grid) {
+    const errMap = await $grid.fullValidate(true);
+    return errMap || false;
+  }
+};
+
+const currentColumnChange = (props) => {
+  emit("currentColumnChange", props);
+};
+
+/**
+ * 监听是否被选中，更新工具栏批量操作
+ */
+watch(
+  () => selections.value,
+  (val) => {
+    const isDisabled = val.length < 1;
+    if (batchButtonsIndex.value?.length > 0) {
+      batchButtonsIndex.value.forEach(idx => {
+        gridOptions.toolbarConfig.buttons[idx].disabled = isDisabled;
+      });
+    }
+  }
+);
+
+watch(
+  () => props.refid, (refid) => {
+    //加载列表配置
+    loadConfig();
+  }, {
+    immediate: true
+  });
+
+defineExpose({
+  getData,
+  getCrudUpdater,
+  resetFilter,
+  refresh,
+  loadConfig,
+  reload,
+  load,
+  validate,
+  selections
+});
+</script>
+
+<template>
+  <vxe-grid
+    v-bind="gridOptions"
+    ref="sohelpVxeGridRef"
+    @menuClick="menuRightClick"
+    @checkboxChange="onCheckboxChange"
+    @checkboxAll="onCheckboxChange"
+    class="sohelp-grid-view"
+    id="sohelp-grid"
+    v-on="gridEvents"
+    @filter-change="handleFilterChange"
+    @custom="handleCustom"
+    @cellClick="cellClick"
+    @editClosed="editClosed"
+    @header-cell-menu="headerCellMenu"
+    :key="sohelpConfig.uuid"
+    :keep-source="true"
+    @currentColumnChange="currentColumnChange"
+    @filter-visible="filterVisible"
+  >
+    <!--定义国际化I18n-->
+    <template
+      v-for="item in sohelpConfig?.properties?.map(item => item)"
+      v-slot:[`header_${item.name}`]="{ column, rowIndex }"
+      :key="item.name"
+    >
+      {{ item.i18n ? t(item.i18n) : item.label }}
+    </template>
+
+    <!--自定义定义分页--->
+    <template #pager>
+      <vxe-pager
+        v-if="gridOptions.pagerConfig.enabled"
+        v-model:currentPage="gridOptions.pagerConfig.currentPage"
+        v-model:pageSize="gridOptions.pagerConfig.pageSize"
+        :total="gridOptions.pagerConfig.total"
+        @page-change="pageChangeEvent">
+      </vxe-pager>
+    </template>
+
+    <!-- 高级筛选 -->
+    <template v-for="field in Object.values(propertiesMap).filter(item => item.query)" :key="field.name"
+              #[`filter_${field.name}`]="{ column }">
+      <div v-for="(option, index) in column.filters" :key="index" class="condition-box">
+        <filter-condition-item
+          :key="field.name"
+          v-model="getCurrentFilter(field.name).value"
+          :properties="propertiesMap[field.name]"
+          :teleported="false"
+        />
+      </div>
+    </template>
+
+    <!-- 工具栏 -->
+    <template #toolbarTools>
+      <div class="toolbar-box">
+        <!-- 查看范围 -->
+        <div class="power-box">
+          <sohelp-power @change="changePower" v-if="sohelpConfig?.filter?.config?.visibleDataRange"></sohelp-power>
+        </div>
+
+        <div class="search-box" v-if="sohelpConfig?.filter?.config?.visibleKeywords">
+          <!-- 关键字 -->
+          <ele-tooltip :content="getKeywordsPlaceholder" placement="top" :offset="3">
+            <sohelp-input :model-value="filterValue.keywords" @update:model-value="keywordsChange"
+                          :placeholder="getKeywordsPlaceholder" clearable
+                          @keyup.enter="filter" size="small" style="width: 160px;">
+              <template #append>
+                <el-button :icon="Search" @click="filter" size="small" />
+              </template>
+            </sohelp-input>
+          </ele-tooltip>
+          <el-button size="small" @click="resetFilter">{{ t("grid.toolbar.reset") }}</el-button>
+        </div>
+
+        <div class="tools-btns">
+          <sohelp-drop-card :title="t('grid.toolbar.sort')" :icon="Sort" ref="sohelpSortRef"
+                            v-if="sohelpConfig?.filter?.config?.visibleSort && sortList.length > 0">
+            <div class="sort-list">
+              <ele-card v-for="item in sortList" :key="item.title" :header="item.title"
+                        :bodyStyle="{padding: '0'}"
+                        :headerStyle="{fontSize: '14px', fontWeight: 'normal', padding: '5px 0'}">
+                <template #extra>
+                  <ele-text :icon="SortUp" style="cursor: pointer;" :underline="false" size="sm"
+                            @click="sortCommand(item.field,'asc')" plain :type="isActiveSort(item.field,'asc')">
+                    t("grid.toolbar.asc")
+                  </ele-text>
+                  <ele-text :icon="SortDown" style="cursor: pointer;margin-left:5px!important" :underline="false"
+                            size="sm" @click="sortCommand(item.field,'desc')" plain
+                            :type="isActiveSort(item.field,'desc')">t("grid.toolbar.desc")
+                  </ele-text>
+                </template>
+              </ele-card>
+            </div>
+          </sohelp-drop-card>
+          <el-button :icon="Filter" size="small" @click="showFilter()"
+                     :type="(sohelpConfig?.filter?.config?.visibleFilter && sohelpConfig?.filter?.config?.filterPosition !== 'NONE')?'primary':''"
+                     v-if="sohelpConfig?.filter?.config?._visibleFilter">
+          </el-button>
+        </div>
+      </div>
+    </template>
+
+
+    <!-- 未编辑状态 -->
+    <template
+      v-for="name in sohelpConfig?.properties?.map(item => item.name)"
+      v-slot:[`default_${name}`]="{ row, column, rowIndex }"
+      :key="name"
+    >
+
+      <sohelp-dict
+        type="text"
+        v-model="row[name]"
+        v-if="column.type === 'SohelpDict'"
+        v-bind="column.editRender"
+      />
+
+      <!-- 图片 -->
+      <sohelp-image-upload v-else-if="column.type === 'SohelpImageUpload'"
+                           v-model="row[name]"
+                           v-bind="column.editRender"
+                           :data="getCellValue(rowIndex,name)"
+                           :readonly="!column.editRender.edit">
+      </sohelp-image-upload>
+      <!-- 附件 -->
+      <sohelp-file-upload
+        v-else-if="column.type === 'SohelpFileUpload'"
+        v-model="row[name]"
+        v-bind="column.editRender"
+        :data="getCellValue(rowIndex,name)"
+        :readonly="!column.editRender.edit">
+      </sohelp-file-upload>
+
+      <!-- 下拉选择表格 -->
+      <div v-else-if="column.type === 'SohelpTableSelect' || column.type === 'ORG' || column.type ==='USER'">
+        <span>{{ getTableSelectLabel(row[name], rowIndex, name, column) }}</span>
+      </div>
+
+      <!-- 评分 -->
+      <sohelp-rate
+        v-else-if="column.type==='SohelpRate'"
+        v-model="row[name]"
+        v-bind="column.editRender"
+        :disabled="!column.editRender.edit"
+        show-score
+        score-template="{value} 分"
+        style="width: 100%;"
+      />
+
+      <!-- 进度 -->
+      <sohelp-process
+        v-else-if="column.type==='SohelpProcess'"
+        v-model="row[name]"
+        v-bind="column.editRender"
+        style="width: 100%"
+        :readonly="!column.editRender.edit"
+      ></sohelp-process>
+
+
+      <!-- 下拉用户选择 -->
+      <div v-else-if="column.type === 'SohelpUserSelect'">
+        {{ gridData[rowIndex][name]?.["user_name"] }}
+      </div>
+
+      <!-- 下拉组织选择 -->
+      <div v-else-if="column.type === 'SohelpOrgTreeSelect'">
+        {{ gridData[rowIndex][name]?.["org_name"] }}
+      </div>
+
+      <!-- 开关 -->
+      <div v-else-if="column.type==='SohelpSwitch' || column.type === 'SohelpCheckbox'">
+        <span v-if="!column.editRender.edit">
+          {{ !!row[name] ? "V" : "" }}
+        </span>
+        <sohelp-switch
+          v-model="row[name]"
+          v-bind="column.editRender"
+          style="width: 100%;"
+          v-else
+          :activeValue="1"
+          :inactiveValue="0"
+        />
+      </div>
+
+      <!-- 文本域 -->
+      <p style="margin: 0;"
+         class="textarea-reference"
+         @click="showTextareaModal(column, name, row)"
+         v-bind="column.editRender"
+         v-else-if="column.type === 'SohelpTextarea'"
+      >{{ row[name] }}
+      </p>
+
+      <!-- 外键关联 -->
+      <div v-else-if="column.type === 'RELATION' || column.type === 'SohelpTableSelect'">
+        {{ gridData[rowIndex][name]?.[column?.editRender?.labelField] || "" }}
+      </div>
+
+      <!-- 富文本 -->
+      <div v-else-if="column.type === 'SohelpRichText'" v-html="row[name]"></div>
+
+      <div v-else>
+        {{ row[name] }}
+      </div>
+
+    </template>
+
+    <!-- 可编辑状态 -->
+    <template
+      v-for="name in sohelpConfig?.properties?.map(item => item.name)"
+      v-slot:[`edit_${name}`]="{ row, column, rowIndex }"
+      :key="name"
+    >
+      <div v-if="column.editRender.enabled">
+        <!-- 字典 -->
+        <!--        <sohelp-dict-->
+        <!--          v-model="row[name]"-->
+        <!--          :code="column.dict"-->
+        <!--          v-if="column.type === 'SohelpDict'"-->
+        <!--          v-bind="column.editRender"-->
+        <!--          style="width: 100%;"-->
+        <!--          :visible="true"-->
+        <!--        />-->
+        <div v-if="column.type === 'SohelpDict'">
+          {{ column }}
+        </div>
+
+        <!-- 下拉用户选择 -->
+        <sohelp-number-input
+          v-model="row[name]"
+          v-else-if="column.type==='SohelpInputNumber'"
+          v-bind="column.editRender"
+          style="width: 100%;"
+        />
+
+        <!-- 日期、日期时间 -->
+        <sohelp-datetime
+          v-model="row[name]"
+          v-else-if="column.type==='SohelpDatetime' || column.type==='SohelpDate'"
+          v-bind="column.editRender"
+          style="width: 100%;"
+          :focus="true"
+        />
+
+        <!-- 下拉用户选择 -->
+        <sohelp-user-select
+          v-else-if="column.type==='SohelpUserSelect'"
+          v-model="row[name]"
+          v-bind="column.editRender"
+          :datasource="userDatasource"
+        />
+
+        <!-- 下拉组织机构 -->
+        <sohelp-org-tree-select
+          v-else-if="column.type==='SohelpOrgTreeSelect'"
+          v-model="row[name]"
+          v-bind="column.editRender"
+          :datasource="orgDatasource"
+        />
+
+        <!-- 外键关联 -->
+        <sohelp-table-select v-else-if="column.type==='SohelpTableSelect'"
+                             v-model:value="row[name]"
+                             v-model:data="gridData[rowIndex][name]"
+                             v-bind="column.editRender"
+        ></sohelp-table-select>
+
+        <!-- 数值 -->
+        <sohelp-number-input
+          v-model="row[name]"
+          v-else-if="column.type==='SohelpNumberInput'"
+          v-bind="column.editRender"
+          style="width: 100%;"
+          :autoFocus="true"
+        />
+
+        <!-- 其他 -->
+        <sohelp-input
+          v-model="row[name]"
+          v-bind="column.editRender"
+          :autoFocus="true"
+          v-else
+          style="width: 100%;"
+          :show-word-limit="false"
+        />
+      </div>
+    </template>
+
+    <!-- 操作栏 -->
+    <template #_operation="{ row }">
+      <div class="flex gap-10 justify-center" style="padding: 0 10px;">
+        <template v-if="getOperationButtonsByType(row)?.length > 0">
+          <el-link
+            v-for="item in getOperationButtonsByType(row)"
+            :key="item.code"
+            :type="item.code === 'crud.delete' ? 'danger' : 'primary'"
+            v-bind="item.params"
+            :icon="item.icon"
+            @click="operationHandler({item:item, row:row,$grid:sohelpVxeGridRef})"
+          >
+            {{ item.title }}
+          </el-link>
+        </template>
+        <!-- 更多 -->
+        <template v-if="getOperationButtonsByType(row,'more')?.length > 0">
+          <el-dropdown>
+            <el-link :underline="false">
+              <span>更多</span>
+              <el-icon style="margin-left: 4px;">
+                <arrow-down />
+              </el-icon>
+            </el-link>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item v-for="item in getOperationButtonsByType(row,'more')" :key="item.code"
+                                  @click="operationHandler({item:item, row:row,$grid:sohelpVxeGridRef})"
+                                  v-bind="item.props">
+                  <el-icon :size="16" style="margin-right: 6px; vertical-align: -5px" v-if="item.icon">
+                    <component :is="eleIcons[item.icon]" />
+                  </el-icon>
+                  {{ item.title }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </template>
+
+        <slot name="_operation" :row="row"></slot>
+      </div>
+    </template>
+
+    <!-- 统计 -->
+    <template
+      v-for="field in footerData"
+      v-slot:[`footer_${field["field"]}`]="{ row, column,rowIndex}"
+    :key="field['field']"
+    >
+    <div v-html="row[column.field]"></div>
+</template>
+
+<!-- 验证 -->
+<template #valid_slot="{content}">
+  {{ content }}
+</template>
+</vxe-grid>
+
+<!-- workflow -->
+<workflow-drawer
+  :data="drawerData"
+  v-model="drawerVisible"
+  :showOpera="false"
+  ref="todoDrawerRef"
+  :key="drawerKey"
+></workflow-drawer>
+
+<!-- 提交审批 -->
+<approval-modal
+  v-model="approvalModalVisible"
+  type="submit"
+  :data="approvalData"
+  @confirm="reload"
+></approval-modal>
+
+<!-- SohelpTextareaInput 编辑弹窗 -->
+<ele-modal :width="460" v-model="textareaState['visible']" :title="getCurrentFieldLabel">
+<sohelp-textarea-input v-model="textareaState['value']" :rows="6"></sohelp-textarea-input>
+<template #footer>
+  <el-button @click="textareaCancel">{{ t("common.cancel") }}</el-button>
+  <el-button type="primary" @click="textareaConfirm(row, column)">{{ t("common.save") }}</el-button>
+</template>
+</ele-modal>
+
+<!--实体表单-->
+<ele-modal :title="toolbarButtonParams?.title || ''"
+           :width="toolbarButtonParams?.width || 860"
+           v-model="visibleEntityForm" v-loading="loading">
+<sohelp-entity-form ref="entityFormRef"
+                    :refid="props.refid"
+                    v-model="entityFormValue"
+                    :data="entityFormData"
+                    :config="entityFormConfig"
+                    :readonly="toolbarButtonParams?.readonly"
+></sohelp-entity-form>
+<template #footer v-if="!toolbarButtonParams?.readonly">
+  <el-button @click="closeEntityForm()">{{ t("common.close") }}</el-button>
+  <el-button type="primary" @click="saveEntityForm()" v-loading="loading">{{ t("common.save") }}</el-button>
+</template>
+</ele-modal>
+<!--打印报表-->
+<ele-modal :title="toolbarButtonParams?.title|| t('grid.report.title')" :width="toolbarButtonParams?.width|| 600"
+           v-model="visibleReport">
+
+<ele-check-card v-model="currentReportValue" :items="reportData" :row="{ gutter: 2 }">
+  <template #item="{ item }">
+    <ele-text size="md" style="padding:10px;">{{ item.name }}</ele-text>
+  </template>
+</ele-check-card>
+
+<template #footer>
+  <el-button @click="closeReport()">{{ t("common.close") }}</el-button>
+  <el-button @click="designReport()" v-if="reportData && reportData.length>0">{{ t("common.design") }}</el-button>
+  <el-button type="primary" @click="openReport()" v-if="reportData && reportData.length>0">{{ t("common.print") }}
+  </el-button>
+</template>
+</ele-modal>
+</template>
+
+<style scoped lang="scss">
+.sohelp-grid-view {
+  padding: 0px;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+
+  :deep(.vxe-grid--table-wrapper) {
+    .vxe-table {
+      height: 100%;
+    }
+  }
+
+
+  .toolbar-box {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+
+    .tools-btns {
+      display: flex;
+      gap: 10px;
+      margin-right: 10px;
+
+      :deep(.el-button) {
+        margin-left: 0 !important;
+      }
+    }
+  }
+
+  .ele-split-panel {
+    :deep(.ele-split-panel-side) {
+      border: none !important;
+    }
+  }
+
+  .vxe-grid {
+    height: 100%;
+
+    :deep(.vxe-grid--layout-body-content-wrapper) {
+      display: flex;
+      flex-direction: column;
+
+      .vxe-grid--table-container {
+        flex: 1;
+      }
+    }
+
+    :deep(.col--SohelpImageUpload) {
+      .vxe-cell--wrapper {
+        overflow: initial !important;
+      }
+    }
+
+    :deep(.vxe-table--render-default) {
+      .vxe-body--row.row--stripe > .vxe-body--column {
+        // background-color: transparent;
+      }
+    }
+
+  }
+}
+
+.sort-list :deep(.el-button:focus),
+.sort-list :deep(.el-button:hover) {
+  background-color: #e8f1ff !important;
+  color: #1677ff !important;
+}
+
+.filter-header {
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  width: 100%;
+  height: 35px;
+  line-height: 40px;
+  box-sizing: border-box;
+  margin: 0 0 0 10px;
+}
+
+.sohelp-grid-view.right {
+  .ele-split-panel {
+    :deep(.ele-split-panel-side) {
+      height: 100% !important;
+      border: 0;
+      display: flex;
+      flex-direction: column;
+      border-left: 1px solid #ddd !important;
+    }
+  }
+}
+
+:deep(.tooltip-btn) {
+  margin-left: 5px;
+  height: 22px;
+  line-height: 22px;
+  margin-top: 2px;
+  padding: 0px 5px !important;
+}
+
+:deep(.vxe-cell--wrapper) {
+  height: 100%;
+}
+
+.textarea-reference {
+  display: flex;
+  height: 100%;
+}
+
+:deep(.ele-split-panel.is-vertical) {
+  .ele-split-panel-wrap > .ele-split-panel-space .ele-split-resize-line::after {
+    background: #eee;
+  }
+}
+
+.condition-box {
+  padding: 10px;
+}
+
+.sohelp-filter-card.right {
+  height: 100%;
+  overflow: hidden;
+
+  :deep(.ele-card-header) {
+    min-width: 230px;
+  }
+
+  :deep(.ele-card-body) {
+    height: 100% !important;
+  }
+}
+
+
+</style>