vue-super-crud 1.7.1 → 1.7.2

package/packages/crud/mixins/validate.js

@@ -1,219 +0,0 @@
-import { debounce, get, omit } from "lodash-es";
-import { findTreeNodePath } from "../utils";
-export default {
-  data() {
-    return {
-      errorContent: "",
-      errorMap: new Map(), // 存储错误信息
-    };
-  },
-  created() {
-    this.activateTooltip = debounce(
-      (tooltip) => tooltip.handleShowPopper(),
-      50
-    );
-  },
-  methods: {
-    handleValidateError(fullProp, msg, isValid = true) {
-      const cell = this.$el
-        .querySelector(".el-table__body")
-        .querySelector(`[data-full-prop="${fullProp}"]`);
-      if (!cell) return;
-
-      // 向上查找父元素直到找到 el-table__cell
-      let targetCell = cell;
-      let loopCount = 0;
-      const maxLoops = 5;
-
-      while (
-        targetCell &&
-        !targetCell.classList.contains("el-table__cell") &&
-        loopCount < maxLoops
-      ) {
-        targetCell = targetCell.parentElement;
-        loopCount++;
-      }
-
-      if (!targetCell || loopCount >= maxLoops) return;
-
-      if (!isValid) {
-        // 添加错误状态
-        targetCell.classList.add("error-badge");
-        this.errorMap.set(fullProp, msg);
-        this.showErrorTooltip(cell);
-      } else {
-        // 移除错误状态
-        targetCell.classList.remove("error-badge");
-        this.errorMap.delete(fullProp);
-        this.cellMouseLeave();
-      }
-    },
-    createListError(prop, valid, msg) {
-      this.handleValidateError(prop, msg, valid);
-    },
-    clearErrorMsg(row, prop) {
-      const targetPath =
-        "list." +
-        findTreeNodePath(this.list, (node) => node === row, "children") +
-        "." +
-        prop;
-      this.handleValidateError(targetPath, "", true);
-    },
-    cellMouseEnter(row, column, cell, event) {
-      const el = cell.querySelector("[data-full-prop]");
-      if (!el) return;
-      this.showErrorTooltip(el);
-    },
-    showErrorTooltip(el) {
-      const targetPath = el.getAttribute("data-full-prop");
-      this.errorContent = this.errorMap.get(targetPath);
-      const tooltip = this.$refs.tooltip;
-      tooltip.referenceElm = el;
-      tooltip.$refs.popper && (tooltip.$refs.popper.style.display = "none");
-      tooltip.doDestroy();
-      if (!this.errorContent) return;
-      tooltip.setExpectedState(true);
-      this.activateTooltip(tooltip);
-    },
-    cellMouseLeave() {
-      const tooltip = this.$refs.tooltip;
-      if (tooltip) {
-        tooltip.setExpectedState(false);
-        tooltip.handleClosePopper();
-      }
-    },
-    validate(callBack) {
-      return new Promise((resolve, reject) => {
-        this.$refs.tableFormRef.validate((valid, obj) => {
-          if (!valid) {
-            reject(obj);
-            if (Object.keys(obj).length) {
-              this.tbodyWrapEl = this.$el.querySelector(
-                ".el-table__body-wrapper"
-              );
-              this.tbodyEl = this.tbodyWrapEl.querySelector("tbody");
-              const tableListEl = this.tbodyEl.childNodes;
-              const index = Object.keys(obj)[0].split(".")[1];
-              tableListEl[index].scrollIntoView({
-                behavior: "smooth",
-                block: "center",
-              });
-              // 校验信息是否提示
-              if (this.crudOptions.validateMsg && this.errorMap.size) {
-                const firstErrorKey = Array.from(this.errorMap.keys())[0];
-                const msg = this.errorMap.get(firstErrorKey);
-                msg && this.$message.error(msg);
-              }
-            }
-          } else {
-            callBack && callBack(this.list);
-            resolve({ list: this.list });
-          }
-        });
-      });
-    },
-    validateField(params) {
-      const options = typeof params === "number" ? { index: params } : params;
-      return this._validateField(options);
-    },
-    _validateField(options = {}) {
-      return new Promise((resolve, reject) => {
-        const { index, id, row, prop } = options;
-
-        // 查找目标行的路径
-        let targetPath = null;
-
-        if (index !== undefined) {
-          // 通过索引直接定位
-          targetPath = `list.${index}`;
-        } else if (id) {
-          // 通过 ID 查找路径
-          targetPath =
-            "list." +
-            findTreeNodePath(
-              this.list,
-              (node) => node[this.valueKey] === id,
-              "children"
-            );
-        } else if (row) {
-          // 通过对象引用查找路径
-          targetPath =
-            "list." +
-            findTreeNodePath(this.list, (node) => node === row, "children");
-        }
-
-        if (!targetPath) {
-          reject(new Error("未找到目标行"));
-          return;
-        }
-
-        // 获取需要校验的字段
-        const fields = this.$refs.tableFormRef.fields.filter((field) => {
-          const fieldPath = field.prop.split(".");
-
-          // 如果指定了具体字段，则只校验该字段
-          if (prop) {
-            return field.prop === `${targetPath}.${prop}`;
-          }
-
-          // 否则校验该行所有字段
-          return fieldPath.slice(0, -1).join(".") === targetPath;
-        });
-
-        if (fields.length === 0) {
-          resolve();
-          return;
-        }
-
-        // 执行校验
-        const validates = [];
-        const errors = [];
-
-        const validatePromises = fields.map((field) => {
-          return new Promise((fieldResolve) => {
-            field.validate("", (errorMsg) => {
-              if (errorMsg) {
-                validates.push(false);
-                errors.push({
-                  field: field.prop.split(".").pop(),
-                  message: errorMsg,
-                });
-              } else {
-                validates.push(true);
-              }
-              fieldResolve();
-            });
-          });
-        });
-
-        // 等待所有字段校验完成
-        Promise.all(validatePromises).then(() => {
-          if (validates.every((v) => v)) {
-            resolve({
-              valid: true,
-              path: targetPath,
-            });
-          } else {
-            reject({
-              valid: false,
-              path: targetPath,
-              errors: errors,
-            });
-          }
-        });
-      });
-    },
-    clearValidate() {
-      this.$refs.tableFormRef.clearValidate();
-      this.errorMap.clear();
-      this.errorContent = "";
-      const cells =
-        this.$el
-          .querySelector(".el-table__body")
-          .querySelectorAll(".error-badge") || [];
-      cells.forEach((c) => {
-        c.classList.remove("error-badge");
-      });
-    },
-  },
-};

package/packages/crud/pagination.vue

@@ -1,110 +0,0 @@
-<template>
-  <el-pagination
-    :class="b()"
-    :style="{
-      'text-align': pagination.align,
-    }"
-    v-show="showPagination"
-    :current-page.sync="pageNum"
-    :page-size.sync="pageSize"
-    :total="total"
-    :disabled="ctx.loadingStatus"
-    @size-change="handleSizeChange"
-    @current-change="handleCurrentChange"
-    v-bind="pagination"
-    v-on="paginationOn"
-  />
-</template>
-
-<script>
-import create from "core/create";
-import { checkVisibility } from "utils";
-export default create({
-  name: "crud-pagination",
-  inject: ["ctx"],
-  computed: {
-    showPagination() {
-      return checkVisibility(this.pagination, null, this.total > 0);
-    },
-    pagination() {
-      return this.ctx.crudOptions.pagination;
-    },
-    paginationOn() {
-      return this.pagination?.on;
-    },
-    props() {
-      return this.ctx.crudOptions.props;
-    },
-    pageNum: {
-      get() {
-        return this.ctx.query[this.props.pageNum];
-      },
-      set(val) {
-        this.ctx.query[this.props.pageNum] = val;
-      },
-    },
-    pageSize: {
-      get() {
-        return this.ctx.query[this.props.pageSize];
-      },
-      set(val) {
-        this.ctx.query[this.props.pageSize] = val;
-      },
-    },
-    total() {
-      if (this.ctx.localFilteredData !== undefined) {
-        return this.ctx.localFilteredData?.length || 0;
-      }
-      if (this.ctx.crudOptions.localPagination) {
-        return this.ctx.data.length;
-      }
-      return this.ctx.total;
-    },
-  },
-  watch: {
-    total(total) {
-      //如果当前页面删除没数据了调用第一页
-      if (total === (this.pageNum - 1) * this.pageSize && total != 0) {
-        this.pageNum = this.pageNum - 1;
-      }
-    },
-  },
-  created() {
-    this.initPage();
-  },
-  methods: {
-    initPage() {
-      this.$set(
-        this.ctx.query,
-        this.props.pageNum,
-        this.ctx.search[this.props.pageNum] || 1
-      );
-      this.$set(
-        this.ctx.query,
-        this.props.pageSize,
-        this.ctx.setOptions.pageSize || this.ctx.search[this.props.pageSize]
-      );
-    },
-    handleSizeChange(val) {
-      if (this.pageNum * val > this.total) {
-        this.pageNum = 1;
-      }
-      this.ctx.setOptions.pageSize = val;
-      this.ctx.saveLocalCache(false);
-      this.handleDataChange();
-    },
-    handleCurrentChange(val) {
-      this.handleDataChange();
-    },
-    handleDataChange() {
-      if (this.ctx.crudOptions.localPagination) {
-        this.$nextTick(() => {
-          this.ctx.updateSelection();
-        });
-      } else {
-        this.ctx.getList();
-      }
-    },
-  },
-});
-</script>

package/packages/crud/search.vue

@@ -1,119 +0,0 @@
-<template>
-  <scForm
-    :class="[b({ 'show-search': ctx.showSearch })]"
-    ref="searchForm"
-    :autoFill="true"
-    v-model="ctx.query"
-    :options="options"
-    :loading="ctx.loadingStatus"
-  ></scForm>
-</template>
-
-<script>
-import create from "core/create";
-import scForm from "../form/index.vue";
-import { merge, isFunction } from "lodash-es";
-import defaultRender from "core/defaultRender";
-import { filterColumns } from "utils";
-export default create({
-  name: "crud-search",
-  inject: ["ctx"],
-  components: { scForm },
-  computed: {
-    searchForm() {
-      const opt = this.ctx.crudOptions.searchForm;
-      return {
-        ...opt,
-        renderColumns: filterColumns(this.ctx.getRenderColumns("search")),
-      };
-    },
-    options() {
-      return merge(
-        {
-          size: this.ctx.crudOptions.size,
-          shrinkLabel: false,
-          columnWidth: "300px",
-          action: {
-            fill: false,
-            search: {
-              label: "查询",
-              icon: "el-icon-search",
-              type: "primary",
-              onClick: this.ctx.handleSearch,
-            },
-            reset: {
-              icon: "el-icon-refresh",
-              label: "重置",
-              onClick: () => this.ctx.handleReset(),
-            },
-          },
-          slots: this.ctx.extendsScopedSlots,
-          mode: "search",
-          defaultRender: (h, scope) => {
-            if (isFunction(this.searchForm.defaultRender)) {
-              return this.searchForm.defaultRender(h, scope);
-            }
-            return defaultRender.input(h, scope);
-          },
-        },
-        this.searchForm
-      );
-    },
-  },
-  watch: {
-    "ctx.query": {
-      handler(val) {
-        this.queryChange = true;
-        this.ctx.$emit("update:search", val);
-        this.$nextTick(() => {
-          this.queryChange = false;
-        });
-      },
-      deep: true,
-    },
-    "ctx.search": {
-      handler(val) {
-        if (this.queryChange) return;
-        this.$nextTick(() => {
-          this.ctx.query = { ...this.ctx.query, ...val };
-        });
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
-  created() {
-    // this.saveInitSearch();
-    if (
-      (this.searchForm && this.searchForm.initShow) ||
-      this.ctx.crudOptions?.expandSearch
-    ) {
-      this.ctx.showSearch = true;
-    }
-  },
-  methods: {
-    saveInitSearch() {
-      // 保存初始搜索参数
-      if (this.ctx.search) {
-        this._search = { ...this.ctx.search };
-      }
-    },
-    setInitSearch() {
-      // 表单加载完成后再设置初始搜索参数，防止重置残留初始搜索参数
-      if (this._search) {
-        setTimeout(() => {
-          Object.keys(this._search).forEach((key) => {
-            this.$set(this.ctx.query, key, this._search[key]);
-          });
-        }, 0);
-      }
-    },
-    resetField(prop) {
-      this.$refs.searchForm.resetField(prop);
-    },
-    resetFields() {
-      this.$refs.searchForm.resetFields();
-    },
-  },
-});
-</script>

package/packages/crud/searchHeader.vue

@@ -1,231 +0,0 @@
-<script>
-import { isEmptyData } from "utils";
-import { create } from "core";
-import Render from "core/components/render";
-import { isFunction, merge, isPlainObject, get } from "lodash-es";
-export default create({
-  name: "crud-search-header",
-  props: {
-    item: {},
-  },
-  mixins: [],
-  inject: ["ctx"],
-  provide() {
-    return {
-      searchHeader: this,
-    };
-  },
-  data() {
-    return {
-      active: false,
-    };
-  },
-  created() {
-    this.$emit("update:isSearch", this.isSearch());
-    this.ctx.$on("closeSearchPopover", (prop) => {
-      if (prop === this.item.prop) return;
-      this.closePopover();
-    });
-    this.$watch(
-      () =>
-        this.item.validateProp
-          ? get(this.ctx.query, this.item.validateProp)
-          : this.ctx.query[this.item.prop],
-      (val) => {
-        this.$emit("update:isSearch", this.isSearch());
-      },
-      {
-        deep: true,
-      }
-    );
-  },
-  computed: {
-    searchHeader() {
-      return this.ctx.crudOptions.searchHeader;
-    },
-    mergeConfig() {
-      let mergeConfig = merge({}, this.searchHeader, this.item);
-      if (mergeConfig && typeof mergeConfig.width === "string") {
-        mergeConfig.width = parseInt(mergeConfig.width);
-      }
-      return mergeConfig;
-    },
-    componentStrategy() {
-      return [
-        {
-          rule: "*input",
-          comp: {
-            nativeOn: {
-              keyup: (e) => {
-                if (e.keyCode === 13) {
-                  this.search();
-                }
-              },
-            },
-            on: {
-              clear: () => {
-                this.search();
-              },
-            },
-          },
-        },
-        {
-          rule: "*select",
-          comp: {
-            on: {
-              change: (val) => {
-                this.isChange = true;
-              },
-              "visible-change": (val) => {
-                if (!val && this.isChange) {
-                  this.isChange = false;
-                  this.search();
-                }
-              },
-            },
-          },
-        },
-        {
-          rule: "*cascader",
-          comp: {
-            on: {
-              change: (val) => {
-                this.isChange = true;
-              },
-              "visible-change": (val) => {
-                if (!val && this.isChange) {
-                  this.isChange = false;
-                  this.search();
-                }
-              },
-            },
-          },
-        },
-        {
-          rule: "*date-picker",
-          comp: {
-            on: {
-              change: (val) => {
-                this.search();
-              },
-            },
-          },
-        },
-      ];
-    },
-  },
-  methods: {
-    closePopover() {
-      this.$refs.popover && this.$refs.popover.doClose();
-    },
-    search(val) {
-      if (this.justSearched) return;
-      this.justSearched = true;
-      this.ctx.handleSearch();
-      this.closePopover();
-      setTimeout(() => {
-        this.justSearched = false;
-      }, 200);
-    },
-    reset() {
-      if (isFunction(this.item.reset)) this.item.reset();
-      this.ctx.handleReset(this.item.prop);
-      this.closePopover();
-    },
-    popClick(e) {
-      e.stopPropagation();
-    },
-    isSearch() {
-      const value = this.item.validateProp
-        ? get(this.ctx.query, this.item.validateProp)
-        : this.ctx.query[this.item.prop];
-      if (Array.isArray(value) && value.length) {
-        return value.every((item) => !isEmptyData(item));
-      }
-      if (isPlainObject(value) && Object.keys(value).length) {
-        return Object.values(value).every((item) => !isEmptyData(item));
-      }
-      return !isEmptyData(value);
-    },
-  },
-  render(h) {
-    const contentRender = () => {
-      return (
-        <Render
-          props={this.item}
-          item={this.item}
-          slots={this.ctx.extendsScopedSlots}
-          scope={{
-            row: this.ctx.query,
-          }}
-          mode="searchHeader"
-          size={this.ctx.crudOptions.size}
-          compStrategy={this.componentStrategy}
-          commonCompStrategy={{
-            mounted: (scope, ref) => {
-              this.instance = ref;
-            },
-          }}
-          defaultComp={{
-            name: "el-input",
-            props: {
-              clearable: true,
-            },
-          }}
-        ></Render>
-      );
-    };
-    const footer = () => {
-      return (
-        <div style="display: flex; align-items: center;">
-          {this.mergeConfig.searchBtn && (
-            <el-button
-              icon="el-icon-search"
-              type="primary"
-              onClick={this.search}
-              style="margin-left: 10px;"
-            ></el-button>
-          )}
-          {this.mergeConfig.resetBtn && (
-            <el-button
-              icon="el-icon-refresh-right"
-              onClick={this.reset}
-              style="margin-left: 10px;"
-            ></el-button>
-          )}
-        </div>
-      );
-    };
-    return (
-      <el-popover
-        popper-class={this.b()}
-        ref="popover"
-        placement="bottom"
-        trigger="click"
-        props={this.mergeConfig}
-        onShow={() => {
-          this.ctx.$emit("closeSearchPopover", this.item.prop);
-          this.ctx.showPopperNum++;
-          this.$nextTick(() => {
-            this.instance?.$el.querySelector("input")?.focus();
-          });
-        }}
-        onHide={() => {
-          this.isSearch && this.search();
-          if (this.ctx.showPopperNum > 0) {
-            this.ctx.showPopperNum--;
-          }
-        }}
-        scopedSlots={{
-          reference: () => (
-            <i class="el-icon-search search-btn" onClick={this.popClick}></i>
-          ),
-        }}
-      >
-        {contentRender()}
-        {footer()}
-      </el-popover>
-    );
-  },
-});
-</script>