vue-super-crud 1.7.1

package/packages/core/rules.js

@@ -0,0 +1,111 @@
+import { batchMerge, mergeTemp } from "utils/mergeTemp";
+import { executeFunctionByObject } from "utils";
+
+export function generateRules(item, scope) {
+  // 获取经过scope处理后的配置
+  const config = executeFunctionByObject(
+    {
+      required: item.required,
+      regular: item.regular,
+      limit: item.limit,
+      rules: item.rules,
+    },
+    scope
+  );
+
+  const rules = [];
+  const rawRules = [];
+
+  // 处理必填规则
+  if (config.required) {
+    const requiredRule = generateRequiredRule(config.required, item);
+    rules.push(requiredRule);
+    rules.required = true;
+  }
+
+  // 处理长度限制规则
+  if (config.limit) {
+    rules.push(generateLimitRule(config.limit));
+  }
+
+  // 处理正则校验规则
+  if (config.regular) {
+    const regularRules = generateRegularRules(
+      config.regular,
+      item,
+      scope,
+      rawRules
+    );
+    rules.push(...regularRules);
+  }
+
+  // 处理自定义规则
+  if (config.rules) {
+    const customRules = generateCustomRules(
+      config.rules,
+      item,
+      scope,
+      rawRules
+    );
+    rules.push(...customRules);
+  }
+
+  return {
+    rules,
+    rawRules,
+  };
+}
+function generateRequiredRule(required, item) {
+  return mergeTemp("rules", "required", required, { item });
+}
+
+function generateLimitRule([min, max]) {
+  return {
+    min,
+    max,
+    message:
+      min === max ? `请输入 ${min} 个字符` : `请输入 ${min} 到 ${max} 个字符`,
+    trigger: "change",
+  };
+}
+
+function generateRegularRules(regular, item, scope, rawRules) {
+  const rules = batchMerge("rules", regular, { item });
+  rawRules.push(...rules);
+  return handleRegularRule(rules, scope);
+}
+
+function generateCustomRules(rules, item, scope, rawRules) {
+  const customRules = batchMerge("rules", rules, { item });
+  rawRules.push(...customRules);
+  return handleRegularRule(customRules, scope);
+}
+
+function handleRegularRule(rules, scope) {
+  return rules.map((item) => {
+    if (item.regular && item.msg) {
+      return {
+        validator: (rule, value, callback) => {
+          if (!value || item.regular.test(value)) {
+            callback();
+          } else {
+            callback(new Error(item.msg));
+          }
+        },
+        trigger: item.trigger || "change",
+        message: item.msg,
+      };
+    } else {
+      if (item.validator) {
+        const validator = item.validator;
+        return {
+          ...item,
+          validator: (...args) => {
+            validator(...args.slice(0, 3), scope);
+          },
+        };
+      }
+      return item;
+    }
+  });
+}

package/packages/crud/column.vue

@@ -0,0 +1,205 @@
+<script>
+import create from "core/create";
+import calcColumnWidth from "./mixins/calcColumnWidth";
+import columnCell from "./columnCell.vue";
+import column from "./column.vue";
+import searchHeader from "./searchHeader.vue";
+import position from "core/components/position";
+import { set, merge, isFunction } from "lodash-es";
+import { checkVisibility } from "utils";
+// 调试时element-ui导入地址需要改成引入项目下的node_modules地址
+import { TableColumn } from "element-ui";
+// import { TableColumn } from "C:/Users/Administrator/Desktop/jhfCloud2/ruoyi-ui/lib";
+
+TableColumn.destroyed = function () {
+  if (!this.$parent) return;
+  let parent = this.$parent;
+  if (parent.$options.name === "sc-crud-column") {
+    // 解决children动态变化时el-table的columns被错误删除的问题，因为给el-table-column多套了一层，导致饿了么内部parent取错，所以这里需要再往上取一层
+    parent = parent.$parent;
+  }
+  this.owner.store.commit(
+    "removeColumn",
+    this.columnConfig,
+    this.isSubColumn ? parent.columnConfig : null
+  );
+};
+
+export default create({
+  name: "crud-column",
+  props: {
+    col: Object,
+  },
+  inject: ["ctx"],
+  mixins: [calcColumnWidth],
+  data() {
+    return {
+      isSearch: false,
+    };
+  },
+  components: { TableColumn, columnCell, column, searchHeader, position },
+  watch: {
+    col() {
+      this.bindColumnConfig();
+    },
+  },
+  computed: {
+    defaultMinWidth() {
+      // 计算头部默认宽度
+      const labelSpan = document.createElement("span");
+      labelSpan.innerText = this.col.label;
+      document.body.appendChild(labelSpan);
+      let labelMinWidth = labelSpan.getBoundingClientRect().width + 20;
+      this.col.search && (labelMinWidth += 20);
+      this.col.sortable && (labelMinWidth += 25);
+      document.body.removeChild(labelSpan);
+      labelMinWidth = Math.round(labelMinWidth);
+      return Math.max(labelMinWidth, 80);
+    },
+    showOverflowTooltip() {
+      const col = this.col;
+      if (col.showOverflowTooltip !== undefined) return col.showOverflowTooltip;
+      return this.ctx.isDefaultColumn(col);
+    },
+    calcOpts() {
+      return { ...this.ctx.crudOptions.calcColumnWidth, ...this.col };
+    },
+    colWidth() {
+      return this.getColumnWidth(
+        this.col.width,
+        this.col.prop,
+        this.ctx.data,
+        this.calcOpts.widthType,
+        this.calcOpts.widthFont,
+        this.calcOpts.calcWidth
+      );
+    },
+    colMinWidth() {
+      if (!this.col.width) {
+        return this.defaultMinWidth;
+      }
+      return this.getColumnWidth(
+        this.col.minWidth,
+        this.col.prop,
+        this.ctx.data,
+        this.calcOpts.widthType,
+        this.calcOpts.widthFont,
+        this.calcOpts.calcWidth
+      );
+    },
+    isShow() {
+      // hiddenList 只隐藏列表
+      if (this.col.hiddenList) return false;
+      return !this.hidden;
+    },
+    hidden() {
+      if (this.ctx.setOptions.hidden.includes(this.col.prop)) return true;
+    },
+    fixed() {
+      if (this.col.fixed) return this.col.fixed;
+      const fixed = this.ctx.setOptions.fixed[this.col.prop];
+      if (fixed) return fixed;
+    },
+    showSearchHeader() {
+      if (this.col.search?.hidden) return false;
+      if (this.col.searchHeader?.hidden) return false;
+      const show = checkVisibility(this.ctx.crudOptions.searchHeader);
+      return (this.col.search && show) || (this.col.searchHeader && show);
+    },
+  },
+  methods: {
+    bindColumnConfig() {
+      const columnConfig = this.$refs.column?.columnConfig;
+      if (columnConfig) {
+        columnConfig.col = { ...this.col };
+        columnConfig.options = { ...this.ctx.crudOptions };
+      }
+    },
+    getTopProps() {
+      return {
+        size: this.ctx.crudOptions.size,
+        isTree: this.ctx.isTree,
+        valueKey: this.ctx.valueKey,
+        extendsScopedSlots: this.ctx.extendsScopedSlots,
+        defaultRender: this.ctx.crudOptions.defaultRender,
+      };
+    },
+  },
+  render(h) {
+    const {
+      col,
+      ctx,
+      showSearchHeader,
+      showOverflowTooltip,
+      isShow,
+      fixed,
+    } = this;
+    const isDefaultColumn = this.ctx.isDefaultColumn(col);
+    if (!isShow) return null;
+    const topProps = this.getTopProps();
+    const cellRender = (scope) => {
+      return (
+        <columnCell col={col} scope={scope} ctx={ctx} topProps={topProps} />
+      );
+    };
+    const columnHeader = () => {
+      return (
+        <div
+          class={this.b(["header"])}
+          style={{ color: this.isSearch ? "var(--color-primary)" : "" }}
+        >
+          <position
+            slotName={`${col.prop}-header`}
+            render={col.labelRender || col.headerRender}
+            slots={ctx.$scopedSlots}
+          >
+            <span
+              style="white-space: nowrap;" // 解决动态列因为换行导致el-table中updateElsHeight重新计算有误
+              domProps={{
+                innerHTML: col.label,
+              }}
+            ></span>
+          </position>
+          {showSearchHeader && (
+            <searchHeader
+              on={{
+                "update:isSearch": (val) => {
+                  this.isSearch = val;
+                },
+              }}
+              item={col.searchHeader}
+            />
+          )}
+        </div>
+      );
+    };
+    return (
+      <TableColumn
+        ref="column"
+        props={col}
+        prop={col.prop}
+        fixed={fixed}
+        header-align={col.headerAlign || col.align || "center"}
+        align={col.align || "center"}
+        width={col.width}
+        min-width={col.minWidth}
+        show-overflow-tooltip={showOverflowTooltip}
+        scopedSlots={{
+          default: !isDefaultColumn ? (scope) => cellRender(scope) : null,
+          header: columnHeader,
+        }}
+        on={{
+          "hook:mounted": () => {
+            this.bindColumnConfig();
+          },
+        }}
+      >
+        {col.children &&
+          col.children.map((sub) => {
+            return <column key={sub.label + sub.prop} col={sub}></column>;
+          })}
+      </TableColumn>
+    );
+  },
+});
+</script>

package/packages/crud/columnAction.vue

@@ -0,0 +1,207 @@
+<template>
+  <!-- 操作栏 -->
+  <el-table-column
+    ref="column"
+    v-if="showAction"
+    v-bind="action"
+    :width="width"
+    :fixed="fixed"
+    @hook:mounted="bindColumnConfig"
+  >
+    <template v-slot="scope">
+      <div :class="b()" ref="actionRef">
+        <button_
+          v-for="(btn, index) in handleActionButtons(scope, actionButtons)"
+          :type="btn.type || 'text'"
+          :size="ctx.crudOptions.size"
+          :scope="scope"
+          v-bind="btn"
+          :key="index"
+        />
+      </div>
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+import create from "core/create";
+import { batchMerge } from "utils/mergeTemp";
+import { checkVisibility } from "utils";
+import button_ from "pak/button";
+import { cloneDeep, debounce } from "lodash-es";
+
+export default create({
+  name: "crud-action-column",
+  components: {
+    button_,
+  },
+  inject: ["ctx"],
+  data() {
+    return {
+      buttonList: [],
+      actionWidth: "",
+    };
+  },
+  created() {
+    const calcAutoWidth = this.calcAutoWidth;
+    this.calcAutoWidth = debounce(calcAutoWidth, 0);
+  },
+  watch: {
+    action() {
+      this.bindColumnConfig();
+    },
+  },
+  computed: {
+    width() {
+      if (this.action.width === "auto")
+        return Math.max(this.actionWidth, this.action.defaultWidth);
+      if (this.action.width) return this.action.width;
+      return this.action.defaultWidth;
+    },
+    fixed() {
+      if (this.action.fixed) return this.action.fixed;
+      return this.ctx.setOptions.fixed[this.action.prop];
+    },
+    action() {
+      const editConfig = this.ctx.editConfig;
+      return {
+        type: "action",
+        delete: editConfig.delete,
+        view: editConfig.view,
+        edit: editConfig.edit,
+        rowEdit: editConfig.rowEdit,
+        rowSave: editConfig.rowEdit,
+        rowCancel: editConfig.rowEdit,
+        ...cloneDeep(this.ctx.crudOptions.action),
+      };
+    },
+    showAction() {
+      if (this.ctx.setOptions.hidden.includes(this.action.prop)) return false;
+      return checkVisibility(this.action, null, this.actionButtons.length > 0);
+    },
+    actionButtons() {
+      let buttons = [];
+      const merges = batchMerge(
+        "btn.crud.action",
+        this.action,
+        {
+          ctx: this.ctx,
+        },
+        this.actionTemps
+      );
+      buttons.push(...merges);
+      return buttons;
+    },
+    actionTemps() {
+      return {
+        rowEdit: (item, { ctx }) => ({
+          icon: "el-icon-edit",
+          label: "编辑",
+          order: 9,
+          disabled: (scope) => {
+            return this.ctx.disabledRowEdit({
+              row: scope.row,
+              $index: scope.$index,
+            });
+          },
+          innerHide: (scope) => this.isRowEditing(scope),
+          onClick: (scope) => {
+            this.ctx.handleRowEdit(scope);
+          },
+        }),
+        rowSave: (item, { ctx }) => ({
+          icon: "el-icon-circle-check",
+          label: "保存",
+          order: 10,
+          innerHide: (scope) => !this.isRowEditing(scope),
+          onClick: (scope) => {
+            this.ctx.handleRowSave(scope);
+          },
+        }),
+        rowCancel: (item, { ctx }) => ({
+          icon: "el-icon-circle-close",
+          label: "取消",
+          order: 11,
+          innerHide: (scope) => !this.isRowEditing(scope),
+          onClick: (scope) => {
+            this.ctx.handleRowCancel(scope);
+          },
+        }),
+        view: (item, { ctx }) => ({
+          icon: "el-icon-view",
+          label: "查看",
+          order: 8,
+          onClick: (scope) => {
+            this.ctx.handleView(scope);
+          },
+        }),
+        edit: (item, { ctx }) => ({
+          icon: "el-icon-edit",
+          label: "编辑",
+          order: 9,
+          onClick: (scope) => {
+            this.ctx.handleEdit(scope);
+          },
+        }),
+        delete: (item, { ctx }) => ({
+          icon: "el-icon-delete",
+          label: "删除",
+          order: 12,
+          innerHide: (scope) =>
+            this.ctx.editConfig.mode === "row" && this.isRowEditing(scope),
+          onClick: (scope) => {
+            this.ctx.handleDelete(scope);
+          },
+        }),
+      };
+    },
+  },
+  methods: {
+    bindColumnConfig() {
+      const columnConfig = this.$refs.column?.columnConfig;
+      if (columnConfig) {
+        columnConfig.col = { ...this.action };
+        columnConfig.options = { ...this.ctx.crudOptions };
+      }
+    },
+    isRowEditing(scope) {
+      return this.ctx.editState.isRowEditing(scope.row);
+    },
+    handleActionButtons(scope, actionButtons) {
+      let buttons = actionButtons;
+
+      buttons = buttons.filter((btn) => {
+        if (btn.innerHide && btn.innerHide(scope)) {
+          return false;
+        }
+        return true;
+      });
+
+      this.ctx.buttonList[scope.$index] = this.buttonList[
+        scope.$index
+      ] = buttons;
+
+      this.$nextTick(() => {
+        this.calcAutoWidth();
+      });
+      return buttons;
+    },
+    calcAutoWidth() {
+      if (this.action.width === "auto") {
+        let width = this.actionWidth;
+        let list = document.querySelectorAll(".sc-crud-action-column");
+        list.forEach((ele) => {
+          let childList = ele.children;
+          let allWidth = 0;
+          for (let i = 0; i < childList.length; i++) {
+            const child = childList[i];
+            allWidth += child.offsetWidth + this.action.calcWidth;
+          }
+          if (allWidth >= width) width = allWidth;
+        });
+        this.actionWidth = width;
+      }
+    },
+  },
+});
+</script>

package/packages/crud/columnCell.vue

@@ -0,0 +1,146 @@
+<script>
+import create from "core/create";
+import { generateRules } from "core";
+import Render from "core/components/render";
+import { bem } from "src/utils/bem";
+import { defaultRender } from "core";
+
+export default create({
+  functional: true,
+  name: "crud-cell",
+  props: {
+    col: Object,
+    scope: Object,
+    ctx: Object,
+    topProps: Object,
+  },
+  render(h, context) {
+    const { props, data } = context;
+    const { col, scope, ctx, topProps } = props;
+
+    const b = (...args) => bem("sc-crud-cell", ...args);
+
+    // 辅助函数
+    const findTreeProp = (tree, targetId, path = "") => {
+      for (let i = 0; i < tree.length; i++) {
+        const node = tree[i];
+        if (node.id === targetId) {
+          return path + i;
+        }
+        if (node.children && node.children.length > 0) {
+          const childPath = `${path}${i}.children.`;
+          const result = findTreeProp(node.children, targetId, childPath);
+          if (result !== null) {
+            return result;
+          }
+        }
+      }
+      return null;
+    };
+
+    // 获取表单属性
+    const getFormProp = (item) => {
+      if (!item.prop) return;
+      if (topProps.isTree) {
+        return (
+          "list." +
+          findTreeProp(ctx.list, scope.row[topProps.valueKey]) +
+          "." +
+          item.prop
+        );
+      }
+      return "list." + scope.$index + "." + (item.validateProp || item.prop);
+    };
+
+    // 获取渲染项
+    const getItem = (editMode) => {
+      const props = { ...col };
+      return (editMode && props[editMode]) || props;
+    };
+
+    // 单元格渲染
+    const cellRender = (item, editMode, rawRules, formProp) => {
+      return (
+        <Render
+          props={item}
+          item={item}
+          slots={topProps.extendsScopedSlots}
+          mode={editMode}
+          scope={scope}
+          size={topProps.size}
+          rawRules={rawRules}
+          defaultRender={topProps.defaultRender}
+          controlDefault={(defaultRender, scope) => {
+            if (editMode === "add" || editMode === "edit") {
+              return defaultRender.input;
+            }
+          }}
+          data-row-key={scope.row[topProps.valueKey]}
+          data-full-prop={formProp}
+          data-prop={item.prop}
+        ></Render>
+      );
+    };
+
+    const cellDefaultRender = (item) => {
+      const _scope = {
+        ...scope,
+        item,
+        $value: {
+          get: scope.row[item.prop],
+        },
+      };
+      return defaultRender.formatter(h, _scope);
+    };
+
+    const isDefaultRender = (item) => {
+      if (
+        item.comp ||
+        item.render ||
+        ctx.extendsScopedSlots[item.prop] ||
+        item.position ||
+        item.formatData
+      ) {
+        return false;
+      }
+      return true;
+    };
+
+    // 主渲染逻辑
+    const editMode = ctx.validateEdit(col, scope);
+    const item = getItem(editMode);
+    const formProp = getFormProp(item);
+    const { rules, rawRules } = generateRules(item, scope);
+    const isValidate = editMode && rules.length;
+    const CompName = editMode && isValidate ? "el-form-item" : "div";
+    let VNode;
+
+    if (isDefaultRender(item) && !editMode) {
+      VNode = cellDefaultRender(item);
+    } else {
+      VNode = cellRender(item, editMode, rawRules, formProp);
+    }
+    return (
+      <CompName
+        class={[
+          rules.required && editMode ? "is-required" : "",
+          b([col.align || "center"]),
+          col.showOverflowTooltip && "sc-over-ellipsis",
+        ]}
+        label-width={item.labelWidth}
+        size={topProps.size}
+        prop={formProp}
+        rules={rules}
+        style="width:100%"
+        on={{
+          "hook:destroyed": () => {
+            ctx.clearErrorMsg(scope.row, item.prop);
+          },
+        }}
+      >
+        {VNode}
+      </CompName>
+    );
+  },
+});
+</script>