vue-super-crud 1.7.1 → 1.7.4

package/packages/core/rules.js

@@ -1,111 +0,0 @@
-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

@@ -1,205 +0,0 @@
-<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

@@ -1,207 +0,0 @@
-<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

@@ -1,146 +0,0 @@
-<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>