sohelp-eleplus 1.1.13

package/sohelp-grid/SohelpGridConfig.js~

@@ -0,0 +1,408 @@
+import { reactive } from "vue";
+import { moduleCache } from "../../cache/ModuleCache";
+import _DefaultGridOptions from "./DefaultGridOptions";
+import { useMobile } from "@/utils/use-mobile";
+
+const { mobile } = useMobile();
+
+function deepClone(obj) {
+  return JSON.parse(JSON.stringify(obj));
+}
+
+// 动态生成cellStyle函数
+function createDynamicCellStyle(styleConfigs = []) {
+  // 预编译条件表达式为函数
+  const compiledConfigs = styleConfigs.map((config) => ({
+    ...config,
+    conditionFn: new Function("row", `return ${config.condition}`)
+  }));
+
+  return function({ row, column }) {
+    const _config = compiledConfigs.filter((c) => c.name === column.field);
+    if (!_config) return null;
+    try {
+      for (const config of _config) {
+        const conditionFn = new Function("row", `return ${config.condition}`);
+        if (conditionFn(row)) {
+          return {
+            color: config.fontColor,
+            backgroundColor: config.bgColor,
+            fontWeight: config?.bold ? "bold" : "",
+            fontStyle: config.italic ? "italic" : "",
+            textDecoration: config.strikethrough ? "line-through" : config.underline ? "underline" : ""
+          };
+        }
+      }
+    } catch (e) {
+      console.error("条件解析错误:", e);
+    }
+    return null;
+  };
+}
+
+// 动态生成RowStyle函数
+function createDynamicRowStyle(styleConfigs = []) {
+  // 预编译条件表达式为函数
+  const compiledConfigs = styleConfigs.map((config) => ({
+    ...config,
+    conditionFn: new Function("row", `return ${config.condition}`)
+  }));
+
+  return function({ row }) {
+    const style = {};
+    for (const config of compiledConfigs) {
+      try {
+        if (config.conditionFn(row)) {
+          Object.assign(style, {
+            color: config.fontColor,
+            backgroundColor: config.bgColor,
+            fontWeight: config?.bold ? "bold" : "",
+            fontStyle: config.italic ? "italic" : "",
+            textDecoration: config.strikethrough ? "line-through" : config.underline ? "underline" : ""
+          });
+        }
+      } catch (e) {
+        console.error(`条件执行错误 [${config.condition}]:`, e);
+      }
+    }
+
+    return style;
+  };
+}
+
+/**列转换*/
+const switchVxeProperty = (property, sortList, f, formulaMap) => {
+  let editor = {
+    field: property.name,
+    title: property.label,
+    query: property.query,
+    width: property.width || 120,
+    type: property.editor || property.type,
+    align: property.align || "left",
+    showOverflow: true,
+    editRender: {
+      enabled: property.edit,
+      edit: property.edit,
+      maxlength: property.length,
+      ...property.editorParam
+    },
+    slots: {
+      default: "default_" + property.name
+    },
+    contentRender: {
+      name: property.render,
+      props: property.renderParam || {},
+      event: "event"
+    }
+  };
+
+  // 编辑
+  if (property.edit) {
+    editor.slots.edit = "edit_" + property.name;
+  }
+
+  if (
+    ["SohelpImageUpload", "SohelpFileUpload", "SohelpRate", "SohelpSwitch", "SohelpProcess"].includes(property.editor)
+  ) {
+    delete editor.slots.edit; //不渲然编辑
+    editor.editRender.enabled = false;
+  }
+
+  //筛选项配置
+  // if (filterMap[property.name]) {
+  if (editor.query) {
+    setFilterConfig(editor);
+  }
+  // }
+
+  //是否统计
+  const isSummary = f.find((item) => item.field === property.name);
+
+  if (isSummary) {
+    editor.slots["footer"] = "footer_" + property.name;
+  }
+
+  // 排序
+  if (sortList?.includes(property.name)) {
+    editor["sortable"] = true;
+  }
+
+  if (property.name === "id") {
+    editor["width"] = 150;
+  }
+
+  return editor;
+};
+
+/**
+ * 筛选配置
+ */
+const setFilterConfig = (editor) => {
+  editor.filters = [{ data: "", checked: false }];
+  editor.filterRender = {};
+  editor.slots = {
+    ...editor.slots,
+    filter: "filter_" + editor.field
+  };
+  return editor;
+};
+
+/**
+ * properties中过滤掉删除的属性
+ * @param {*} _filter
+ * @returns
+ */
+const filterFieldsByProperties = (_data) => {
+  const data = { ..._data };
+  const properties = new Set(data.properties?.map((item) => item.name).filter(Boolean) || []);
+  const filterArray = (list, key) => {
+    return Array.isArray(list) ? list.filter((item) => properties.has(key ? item?.[key] : item)) : [];
+  };
+
+  let validProperties = Object.fromEntries(
+    data.properties.filter((item) => item.name && !item.hidden)?.map((item) => [item.name, item.label])
+  );
+
+  data.list = filterArray(data.list).filter((item) => {
+    return item in validProperties;
+  });
+
+  data.filter.keywords = filterArray(data.filter.keywords);
+  data.filter.field = filterArray(data.filter.field, "name");
+  //过滤掉不在列表中的sort属性
+  data.filter.sort = filterArray(data.filter.sort.filter((item) => data.filter.field.some((f) => f.name === item)));
+  data.properties = data.properties.filter((item) => item.name);
+  return data;
+};
+
+/**初始化配置实例*/
+export async function initial(sohelpVxeGridRef, props, permission) {
+  /**商邦网格列表参数*/
+  const SohelpConfig = reactive({});
+  const propertiesMap = reactive({});
+  var batchButtonsIndex = -1;
+  const footerData = reactive([]);
+  const filterMap = reactive({});
+  const formulaMap = reactive({});
+  const DefaultGridOptions = reactive(deepClone(_DefaultGridOptions));
+  /**获取列表配置*/
+  const data = props.isEntityGrid
+    ? await moduleCache.getEntityGrid(props.refid)
+    : await moduleCache.getGrid(props.refid);
+  if (!data) {
+    throw new Error("Invalid config data or missing code");
+  }
+
+  try {
+    Object.assign(SohelpConfig, filterFieldsByProperties(data));
+    Object.assign(
+      propertiesMap,
+      (data?.properties || [])
+        .filter((item) => !item.hidden)
+        .reduce((acc, cur) => {
+          let param = {};
+          if (cur?.editorParam?.length > 0) {
+            param = JSON.parse(cur.editorParam);
+          }
+
+          acc[cur.name] = { ...cur, editorParam: param };
+          return acc;
+        }, {})
+    );
+
+    // 计算公式
+    if (data.formula && data.formula.length > 0) {
+      Object.assign(formulaMap, data.formula.reduce((a, c) => (a[c.formulaField] || (a[c.formulaField] = c), a), {}));
+    }
+
+    // 筛选
+    Object.assign(
+      filterMap,
+      (SohelpConfig.filter?.field || []).reduce((acc, cur) => {
+        acc[cur.name] = cur;
+        return acc;
+      })
+    );
+
+    // 格式化工具栏
+    const getToolbarsButtons = (data) => {
+      if (data?.length) {
+        const groupedButtons = data.reduce((acc, button) => {
+          const { buttonType } = button;
+          if (!acc[buttonType]) {
+            acc[buttonType] = [];
+          }
+
+          acc[buttonType].push(button);
+          return acc;
+        }, {});
+
+        // 按钮格式化
+        const formatterButton = (arr, type) => {
+          return arr.map((item) => {
+            let obj = {
+              code: item.type,
+              name: item.title,
+              pno: item.pno,
+              handler: item.handler,
+              buttonType: item.buttonType,
+              icon: item.iconCls,
+              ...JSON.parse(item.params || "{}")
+            };
+            return obj;
+          });
+        };
+
+        const { common = [], more = [], batch = [] } = groupedButtons;
+        let arr = [...formatterButton(common)];
+        if (more.length > 0) {
+          arr.push({
+            code: "more",
+            name: "更多操作",
+            dropdowns: formatterButton(more)
+          });
+        }
+        if (batch.length > 0) {
+          arr.push({
+            code: "batchMore",
+            name: "批量操作",
+            dropdowns: formatterButton(batch, "batch"),
+            disabled: true
+          });
+        }
+        return arr;
+      }
+      return [];
+    };
+
+    // 按钮权限过滤
+    const buttons = getToolbarsButtons(data.toolbars.filter((f) => !f.pno || permission.hasPermission(f.pno)));
+    if (buttons && buttons.length > 0) {
+      DefaultGridOptions.toolbarConfig.buttons = buttons;
+      // 更多下拉菜单索引
+      batchButtonsIndex = buttons.reduce((acc, curr, index) => {
+        if (curr.code === "batchMore") acc.push(index);
+        return acc;
+      }, []);
+    }
+
+    //初始化属性列表配置
+    DefaultGridOptions.columns = [
+      {
+        field: "_checkbox",
+        title: "",
+        fixed: mobile.value ? false : "left",
+        type: "checkbox",
+        align: "center",
+        width: 40
+      },
+      { field: "_seq", type: "seq", title: "#", fixed: mobile.value ? false : "left", align: "center", width: 40 }
+    ];
+
+    const isRowDrag = props.rowDrag || data.rowDrag;
+    //是否支持拖动
+    if (isRowDrag) {
+      DefaultGridOptions.columns.unshift({
+        title: "",
+        fixed: mobile.value ? false : "left",
+        width: 40,
+        align: "center",
+        dragSort: true,
+        field: "_drag"
+      });
+    }
+
+    //是否开启表尾
+    Object.assign(
+      footerData,
+      (data.properties || [])
+        .filter((item) => item.summaryType)
+        ?.map((item) => {
+          return {
+            [item.name]: 0,
+            summaryRender: item.summaryRender ? JSON.parse(item.summaryRender) : null,
+            field: item.name,
+            type: item.summaryType
+          };
+        })
+    );
+    DefaultGridOptions.showFooter = footerData?.length > 0;
+
+    //商邦列转换成Vxe列
+    if (SohelpConfig?.list && SohelpConfig.list.length > 0) {
+      const requireData = {};
+      const columns = [];
+      SohelpConfig.list.forEach((name, index) => {
+        let item = propertiesMap[name];
+        if (item) {
+          const row = switchVxeProperty(item, SohelpConfig.filter?.sort, footerData, formulaMap);
+          columns.push(row);
+          if (item.edit && item.notNull) {
+            requireData[item.name] = [
+              {
+                required: true,
+                message: item.label + "不能为空"
+              }
+            ];
+          }
+        }
+      });
+
+      DefaultGridOptions.columns.push(...columns);
+      DefaultGridOptions.editRules = { ...requireData };
+    }
+
+    //操作栏
+    if (data?.operationToolbars?.length) {
+      DefaultGridOptions.columns.push({
+        field: "_operate",
+        title: "操作",
+        width: (data.operationToolbars.length + 1) * 80 + "px",
+        align: "center",
+        fixed: mobile.value ? false : "right",
+        slots: {
+          default: "operate"
+        }
+      });
+    }
+
+    // 拦截编辑
+    DefaultGridOptions.editConfig.beforeEditMethod = ({ row, column }) => {
+      if (column.type === "SohelpTextarea") {
+        return false;
+      }
+      return true;
+    };
+
+    // 设置分页数据
+    DefaultGridOptions.pagerConfig.enabled = data.paging;
+    DefaultGridOptions.pagerConfig.pageSize = data.limit || 50;
+
+    // 行列样式
+    if (data.colors && data.colors.length > 0) {
+      const rowData = data.colors.filter((item) => item.type === "r");
+      const cellData = data.colors.filter((item) => item.type === "c");
+      if (rowData.length > 0) {
+        DefaultGridOptions.rowStyle = createDynamicRowStyle(rowData);
+      } else {
+        DefaultGridOptions.stripe = true;
+      }
+      if (cellData.length > 0) {
+        DefaultGridOptions.cellStyle = createDynamicCellStyle(cellData);
+      }
+    }
+
+    //转化初始化其他参数...
+  } catch (error) {
+    throw error; //重新抛出错误，以便调用者可以处理它
+  }
+
+  return {
+    gridOptions: DefaultGridOptions,
+    sohelpConfig: SohelpConfig,
+    propertiesMap,
+    batchButtonsIndex: batchButtonsIndex,
+    footerData: footerData,
+    formulaMap
+  };
+}

package/sohelp-grid/components/filter-condition-item.vue

@@ -0,0 +1,298 @@
+<script setup>
+  import { reactive, ref, watch } from 'vue';
+  import { CaretBottom } from '@element-plus/icons-vue';
+  import { comparisonOptions, comparisonType } from '../js/ConditionType.js';
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+
+  const props = defineProps({
+    modelValue: Object,
+    properties: Object,
+    teleported: {
+      type: Boolean,
+      default: true
+    }
+  });
+
+  const emit = defineEmits(['update:modelValue', 'change']);
+  const condition = reactive({});
+
+  const dropDownRef = ref(null);
+
+  const isNumber = (val) => {
+    return typeof val === 'number';
+  };
+
+  const getComparisonByEditor = (type) => {
+    let data = null;
+    if (comparisonType[type]) {
+      data = comparisonOptions.filter((option) => comparisonType[type].includes(option.command));
+    } else {
+      data = comparisonOptions;
+    }
+    data.forEach((option) => {
+      option['title'] = option.i18n ? t(option.i18n) : option.title;
+    });
+    return data;
+  };
+
+  const conditionChange = (properties) => {
+    const { name, editor } = properties;
+    if (editor === 'SohelpDatetime' || editor === 'SohelpDate') {
+      if (condition.comparison === 'LIKE' || condition.comparison === 'NOT_LIKE') {
+        condition.value = [];
+      } else {
+        condition.value = '';
+      }
+    }
+  };
+
+  watch(
+    () => condition,
+    (val) => {
+      emit('update:modelValue', val);
+      emit('change', val);
+    },
+    {
+      deep: true
+    }
+  );
+
+  watch(
+    () => props.modelValue,
+    (val) => {
+      if (!val.comparison) {
+        const first = getComparisonByEditor(props?.properties?.editor);
+        val.comparison = first?.[0].command || 'LIKE';
+      }
+      Object.assign(condition, val);
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+</script>
+<script>
+  export default {
+    name: 'FilterConditionItem'
+  };
+</script>
+<template>
+  <div class="sohelp-filter-condition" v-if="properties">
+    <el-form-item :label="t(properties.i18n) || properties.label">
+      <ele-dropdown
+        ref="dropDownRef"
+        v-model="condition.comparison"
+        trigger="click"
+        :items="getComparisonByEditor(properties.editor)"
+        :teleported="teleported"
+        @change="conditionChange(properties)"
+      >
+        <template #default="{ selected }">
+          <el-button text bg size="small"
+            >{{ selected?.title }}
+            <el-icon style="margin-left: 3px">
+              <CaretBottom />
+            </el-icon>
+          </el-button>
+        </template>
+      </ele-dropdown>
+    </el-form-item>
+
+    <!-- 字典 -->
+    <sohelp-dict
+      v-model="condition.value"
+      type="multipleSelect"
+      v-if="properties.editor === 'SohelpDict'"
+      v-bind="properties.editorParam"
+      :readonly="false"
+      :disabled="condition.comparison === 'EMPTY' || condition.comparison === 'NOT_EMPTY'"
+      :code="properties?.dict || properties.editorParam?.code"
+      style="width: 160px"
+      :teleported="teleported"
+      class="filter-condition"
+    />
+    <div v-else-if="properties.editor === 'SohelpProcess'">
+      <sohelp-number-range
+        v-model="condition.value"
+        v-bind="properties.editorParam"
+        style="width: 160px"
+        :readonly="false"
+        class="filter-condition"
+        :min="0"
+        :max="100"
+        :disabled="condition.comparison === 'EMPTY' || condition.comparison === 'NOT_EMPTY'"
+        v-if="condition.comparison === 'LIKE' || condition.comparison === 'NOT_LIKE'"
+      ></sohelp-number-range>
+
+      <sohelp-process
+        v-else
+        v-model="condition.value"
+        v-bind="properties.editorParam"
+        style="width: 160px"
+        :disabled="condition.comparison === 'EMPTY' || condition.comparison === 'NOT_EMPTY'"
+        class="filter-condition"
+      ></sohelp-process>
+    </div>
+
+    <div v-else-if="properties.editor === 'SohelpRate'">
+      <sohelp-number-range
+        v-model="condition.value"
+        v-bind="properties.editorParam"
+        style="width: 160px"
+        class="filter-condition"
+        :min="1"
+        :max="5"
+        :readonly="false"
+        :disabled="condition.comparison === 'EMPTY' || condition.comparison === 'NOT_EMPTY'"
+        v-if="condition.comparison === 'LIKE' || condition.comparison === 'NOT_LIKE'"
+      ></sohelp-number-range>
+      <sohelp-rate
+        v-model="condition.value"
+        :disabled="condition.comparison === 'EMPTY' || condition.comparison === 'NOT_EMPTY'"
+        v-else
+        v-bind="properties.editorParam"
+        style="width: 160px"
+        type="select"
+        class="filter-condition"
+      />
+    </div>
+
+    <!-- 数字输入框 -->
+    <div v-else-if="properties.editor === 'SohelpNumberInput'">
+      <sohelp-number-range
+        v-model="condition.value"
+        v-if="condition.comparison === 'LIKE' || condition.comparison === 'NOT_LIKE'"
+        v-bind="properties.editorParam"
+        style="width: 160px"
+        :readonly="false"
+        :disabled="condition.comparison === 'EMPTY' || condition.comparison === 'NOT_EMPTY'"
+        class="filter-condition"
+      ></sohelp-number-range>
+      <el-input
+        type="number"
+        v-else
+        v-model="condition.value"
+        v-bind="properties.editorParam"
+        :readonly="false"
+        style="width: 160px"
+        :disabled="condition.comparison === 'EMPTY' || condition.comparison === 'NOT_EMPTY'"
+        class="filter-condition"
+      ></el-input>
+    </div>
+
+    <!-- 开关 -->
+    <div v-else-if="properties.editor === 'SohelpSwitch' || properties.editor === 'SohelpCheckbox'">
+      <sohelp-select
+        v-model="condition.value"
+        v-bind="properties.editorParam"
+        :datasource="[
+          { label: '是', value: isNumber(condition.value) ? 1 : 'true' },
+          { label: '否', value: isNumber(condition.value) ? 0 : 'false' }
+        ]"
+        style="width: 160px"
+        :disabled="condition.comparison === 'EMPTY' || condition.comparison === 'NOT_EMPTY'"
+        class="filter-condition"
+        :teleported="teleported"
+      ></sohelp-select>
+    </div>
+
+    <!-- 日期、日期时间 -->
+    <div v-else-if="properties.editor === 'SohelpDatetime' || properties.editor === 'SohelpDate'">
+      <sohelp-datetime-picker
+        v-model="condition.value"
+        v-bind="properties.editorParam"
+        style="width: 245px"
+        :readonly="false"
+        :disabled="condition.comparison === 'EMPTY' || condition.comparison === 'NOT_EMPTY'"
+        class="filter-condition"
+        type="daterange"
+        value-format="YYYY-MM-DD"
+        v-if="condition.comparison === 'LIKE' || condition.comparison === 'NOT_LIKE'"
+      ></sohelp-datetime-picker>
+
+      <sohelp-datetime
+        v-else
+        v-model="condition.value"
+        v-bind="properties.editorParam"
+        style="width: 245px"
+        :readonly="false"
+        type="date"
+        value-format="YYYY-MM-DD"
+        :disabled="condition.comparison === 'EMPTY' || condition.comparison === 'NOT_EMPTY'"
+        class="filter-condition"
+      ></sohelp-datetime>
+    </div>
+
+    <!-- 文本域 -->
+    <sohelp-input
+      v-model.trim="condition.value"
+      v-else-if="properties.editor === 'SohelpTextarea'"
+      style="width: 160px"
+      :readonly="false"
+      v-bind="properties.editorParam"
+      :rows="1"
+      :disabled="condition.comparison === 'EMPTY' || condition.comparison === 'NOT_EMPTY'"
+      class="filter-condition"
+    />
+
+    <!-- 下拉用户选择 -->
+    <sohelp-user-select
+      v-else-if="properties.editor === 'SohelpUserSelect'"
+      v-model="condition.value"
+      v-bind="properties.editorParam"
+      :multiple="true"
+      :datasource="userDatasource"
+      style="width: 160px"
+      :readonly="false"
+      :teleported="teleported"
+      :disabled="condition.comparison === 'EMPTY' || condition.comparison === 'NOT_EMPTY'"
+      class="filter-condition"
+    />
+
+    <!-- 下拉组织机构 -->
+    <sohelp-org-tree-select
+      v-else-if="properties.editor === 'SohelpOrgTreeSelect'"
+      v-model="condition.value"
+      v-bind="properties.editorParam"
+      :multiple="true"
+      :datasource="orgDatasource"
+      style="width: 160px"
+      :teleported="teleported"
+      :disabled="condition.comparison === 'EMPTY' || condition.comparison === 'NOT_EMPTY'"
+      class="filter-condition"
+    />
+
+    <sohelp-input
+      v-model.trim="condition.value"
+      v-else
+      :readonly="false"
+      :disabled="condition.comparison === 'EMPTY' || condition.comparison === 'NOT_EMPTY'"
+      v-bind="properties.editorParam"
+      :show-word-limit="false"
+      style="width: 160px"
+      class="filter-condition"
+    ></sohelp-input>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .sohelp-filter-condition {
+    // width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .el-form-item {
+      :deep(.el-form-item__label) {
+        font-size: 14px !important;
+        font-weight: normal;
+        color: #000;
+        padding-right: 0;
+      }
+
+      margin-bottom: 5px !important;
+    }
+  }
+</style>