vue-super-crud 1.7.1

package/packages/crud/mixins/validate.js

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

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

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

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