vue-super-crud 1.7.1 → 1.7.2

package/packages/form/index.vue

@@ -1,451 +0,0 @@
-<template>
-  <div
-    :class="[
-      b(),
-      { 'sc-form--border': isDetail && isBorder, 'sc-form--group': isGroup },
-    ]"
-    :style="{ padding: formOptions.gap }"
-    @contextmenu="handleContextMenu"
-  >
-    <div style="min-height: 0; position: relative;">
-      <position
-        slotName="title"
-        :render="formOptions.titleRender"
-        :slots="$scopedSlots"
-        ><div v-if="formOptions.title" class="sc-title">
-          {{ formOptions.title }}
-        </div></position
-      >
-      <el-form
-        v-loading="isLoading"
-        :disabled="isDisabled"
-        ref="formRef"
-        :model="value"
-        v-bind="formProps"
-        :key="key"
-        @submit.native.prevent
-      >
-        <template v-if="isGroup">
-          <group
-            v-for="(item, index) in columns"
-            v-bind="item"
-            :key="index"
-            :border="!isBorder"
-          >
-            <component
-              v-if="item.children"
-              :is="formOptions.layout"
-              v-bind="item"
-              :style="{ padding: `0 ${item.gap}px` }"
-            >
-              <formItem
-                v-for="(i, idx) in item.children"
-                :key="idx"
-                :col="i"
-                v-bind="i"
-                :is-first-row="idx <= firstRowLastCellIndex[index]"
-                :ref="i.prop"
-              ></formItem
-            ></component>
-            <position
-              v-else
-              :slotName="item.prop"
-              :render="item.render"
-              :slots="slots"
-              :scope="formScope"
-            />
-          </group>
-          <formAction />
-        </template>
-        <component
-          v-else
-          :is="formOptions.layout"
-          v-bind="formOptions"
-          :style="{ padding: `0 ${formOptions.gap}px` }"
-        >
-          <formItem
-            v-for="(item, index) in columns"
-            :key="index"
-            :col="item"
-            v-bind="item"
-            :is-first-row="index <= firstRowLastCellIndex"
-            :ref="item.prop"
-          ></formItem
-          ><formAction
-        /></component>
-      </el-form>
-    </div>
-    <draftDrawer ref="draftDrawer" />
-  </div>
-</template>
-
-<script>
-// TODO 详情模式：增加 detail 配置详情单独渲染的组件
-// TODO 提交清除hidden 字段
-import { create, init, event } from "core";
-import formItem from "./formItem.vue";
-import grid from "../grid/index.vue";
-import cell from "pak/grid/cell.vue";
-import group from "../group/index.vue";
-import formAction from "./formAction.vue";
-import draftDrawer from "./draftDrawer.vue";
-import contextMenu from "./contextMenu";
-import {
-  isFunction,
-  isPlainObject,
-  uniqueId,
-  set,
-  get,
-  cloneDeep,
-  merge,
-  omit,
-  pick,
-} from "lodash-es";
-import { mergeTemp } from "utils/mergeTemp";
-import { isEmptyData, toCamelCase, filterColumns } from "utils";
-import position from "core/components/position";
-import formProps from "./props";
-
-// 表单初始化队列
-const formInitQueue = {
-  promise: Promise.resolve(),
-  isProcessing: false, // 添加标记表示队列是否正在处理
-  add(callback) {
-    this.isProcessing = true;
-    const currentPromise = this.promise.then(async () => {
-      try {
-        await callback();
-      } catch (error) {
-        console.error("Form init error:", error);
-      } finally {
-        // 检查是否还有待处理的 promise
-        if (this.promise === currentPromise) {
-          this.isProcessing = false;
-        }
-      }
-    });
-    this.promise = currentPromise;
-    return currentPromise;
-  },
-};
-export default create({
-  name: "form",
-  components: {
-    grid,
-    cell,
-    group,
-    formItem,
-    formAction,
-    position,
-    draftDrawer,
-  },
-  props: {
-    value: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    scope: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    loading: {
-      type: Boolean,
-    },
-  },
-  provide() {
-    return {
-      formCtx: this,
-      controlCtx: this,
-    };
-  },
-  mixins: [init("formOptions"), event, contextMenu],
-  data() {
-    return {
-      key: 1,
-      loadingStatus: false,
-      formBind: {},
-      isInitializing: false, // 添加初始化状态标记
-    };
-  },
-  created() {
-    this.initFormValue();
-  },
-  mounted() {
-    this.extendMethod(this.$refs.formRef);
-  },
-  computed: {
-    formOptions() {
-      return this.resultOptions;
-    },
-    isGroup() {
-      return this.formOptions.group || this.formOptions.group === "";
-    },
-    isDetail() {
-      return this.formOptions.detail || this.formOptions.detail === "";
-    },
-    isBorder() {
-      return this.formOptions.border || this.formOptions.border === "";
-    },
-    isDisabled() {
-      return this.isDetail || this.loadingStatus || this.formOptions.disabled;
-    },
-    isLoading() {
-      if (this.isDetail) return this.loadingStatus;
-      return false;
-    },
-    columns() {
-      return this.groupBy(filterColumns(this.resultColumns, this.formScope));
-    },
-    trueRenderColumns() {
-      let columns = [];
-      this.columns.forEach((item) => {
-        if (item.children) {
-          columns.push(...item.children);
-        } else {
-          columns.push(item);
-        }
-      });
-      return columns;
-    },
-    columnsMap() {
-      const map = {};
-      this.trueRenderColumns.forEach((i) => {
-        map[i.prop] = i;
-      });
-      return map;
-    },
-    formScope() {
-      const baseScope = {
-        row: this.value,
-        form: this.$refs.formRef,
-      };
-
-      if (!this.scope) return baseScope;
-
-      return {
-        ...this.scope,
-        ...baseScope,
-      };
-    },
-    slots() {
-      return this.formOptions.slots || this.$scopedSlots;
-    },
-    layoutCell() {
-      if (this.formOptions.layout === "grid") {
-        return "cell";
-      }
-      if (this.formOptions.layout === "el-row") {
-        return "el-col";
-      }
-    },
-    firstRowLastCellIndex() {
-      if (this.isGroup) {
-        const map = this.columns.reduce((acc, cur, index) => {
-          acc[index] = this.getFirstRowLastCellIndex(cur.children, cur.columns);
-          return acc;
-        }, {});
-        return map || {};
-      }
-      return this.getFirstRowLastCellIndex(
-        this.columns,
-        this.formOptions.columns
-      );
-    },
-    formProps() {
-      const obj = {};
-      Object.keys(this.formOptions).forEach((key) => {
-        obj[toCamelCase(key)] = this.formOptions[key];
-      });
-      const props = pick(obj, formProps);
-      return props;
-    },
-  },
-  watch: {
-    value() {
-      // value重新赋值时需要再初始化
-      if (!this.isInitializing && !formInitQueue.isProcessing) {
-        this.initFormValue();
-      }
-    },
-    loading: {
-      handler(val) {
-        val !== undefined && (this.loadingStatus = val);
-      },
-      immediate: true,
-    },
-    loadingStatus(val) {
-      this.$emit("update:loading", val);
-    },
-  },
-  methods: {
-    initColumn(item, index) {
-      if (item.detail) {
-        item.detail = this.extendsOption(
-          item,
-          item.detail,
-          omit(item, ["detail"])
-        );
-      }
-    },
-    extendsOption(item, current, extendsObj) {
-      if (current === false) return;
-      // current 可能为 undefined || true 转换为 {}
-      current = isPlainObject(current) ? current : {};
-      current = mergeTemp("render", current.presetType, current);
-      extendsObj = cloneDeep(extendsObj);
-      if (current.hidden !== true) {
-        return merge(
-          {
-            label: item.label,
-            prop: item.prop,
-            ...extendsObj,
-          },
-          current
-        );
-      }
-    },
-    //初始化表单
-    async initFormValue() {
-      if (this.isInitializing) return;
-
-      // 将初始化操作添加到队列
-      await formInitQueue.add(async () => {
-        this.isInitializing = true;
-
-        try {
-          // 确保获取最新的 value
-          await this.$nextTick();
-          let form = { ...this.value };
-
-          this.trueRenderColumns.forEach((col) => {
-            if (form[col.prop] === undefined) {
-              if (col.initValue) {
-                form[col.prop] = col.initValue;
-              } else {
-                form[col.prop] = "";
-              }
-            }
-          });
-
-          this.setControl();
-
-          // 发出更新事件
-          this.$emit("input", form);
-
-          // 等待更新完成
-          await this.$nextTick();
-          this.clearValidate();
-        } finally {
-          this.isInitializing = false;
-        }
-      });
-    },
-    setControl() {
-      this.trueRenderColumns.forEach((column) => {
-        let prop = column.prop;
-        let bind = column.deepProp;
-        if (!this.formBind[prop]) {
-          let bindList = [];
-          if (bind) {
-            // 实际与表单绑定的值还是浅层的值，通过watch，浅层的值改变会修改深层，深层改变也会修改浅层
-            let formProp = this.$watch("value." + prop, (n, o) => {
-              if (n != o) set(this.value, bind, n);
-            });
-            let formDeep = this.$watch("value." + bind, (n, o) => {
-              if (n != o) this.$set(this.value, prop, n);
-            });
-            bindList.push(formProp);
-            bindList.push(formDeep);
-            this.$set(this.value, prop, get(this.value, bind));
-          }
-          this.formBind[prop] = bindList;
-        }
-      });
-    },
-    groupBy(column) {
-      let group = this.formOptions.group;
-
-      if (group && Array.isArray(group)) {
-        return group.map((item) => {
-          return {
-            label: item.label,
-            children: item.children.map((i) => {
-              return column.find((c) => c.prop === i);
-            }),
-          };
-        });
-      }
-      return column;
-    },
-    validate(callBack) {
-      return new Promise((resolve, reject) => {
-        this.$refs.formRef.validate((valid, obj) => {
-          if (!valid) {
-            reject(obj);
-            callBack && callBack(false);
-            if (this.formOptions.scrollError) {
-              const key = Object.keys(obj)[0];
-              const itemRef =
-                this.$refs[key] && this.$refs[key][0].$refs.formItem;
-              if (Object.keys(obj).length && itemRef) {
-                itemRef.$el.scrollIntoView({
-                  behavior: "smooth",
-                  block: "center",
-                });
-              }
-            }
-          } else {
-            callBack && callBack(true);
-            resolve();
-          }
-        });
-      });
-    },
-    async submit() {
-      await this.validate();
-      this.loadingStatus = true;
-      this.runBefore(
-        "submit",
-        () => {
-          this.loadingStatus = false;
-        },
-        this.value
-      );
-    },
-    resetField(prop) {
-      // 通知子组件执行重置
-      this.$emit("handleChild", "resetField", prop);
-    },
-    reset() {
-      this.$refs.formRef && this.$refs.formRef.resetFields();
-      this.$emit("reset");
-    },
-    clearValidate(prop) {
-      this.$refs.formRef && this.$refs.formRef.clearValidate(prop);
-    },
-    validateField(prop) {
-      this.$refs.formRef && this.$refs.formRef.validateField(prop);
-    },
-    refreshForm() {
-      const tempValue = cloneDeep(this.value);
-      this.$emit("input", {});
-      this.key = Math.random();
-      setTimeout(() => {
-        this.$emit("input", tempValue);
-      }, 100);
-    },
-    getFirstRowLastCellIndex(columns = [], columnsNumber = 1) {
-      let widthSize = 0;
-      const lastIndex = columns.findIndex((item, idx) => {
-        widthSize += item.widthSize || 1;
-        return widthSize === columnsNumber;
-      });
-      return lastIndex === -1 ? columns.length - 1 : lastIndex;
-    },
-  },
-});
-</script>

package/packages/form/props.js

@@ -1,15 +0,0 @@
-export default [
-  "model",
-  "rules",
-  "labelPosition",
-  "labelWidth",
-  "labelSuffix",
-  "inline",
-  "inlineMessage",
-  "statusIcon",
-  "showMessage",
-  "size",
-  "disabled",
-  "validateOnRuleChange",
-  "hideRequiredAsterisk",
-];

package/packages/grid/cell.vue

@@ -1,65 +0,0 @@
-<template>
-  <div :class="b()" :style="mergeStyle">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import create from "core/create";
-export default create({
-  inheritAttrs: false,
-  name: "cell",
-  props: {
-    widthSize: {
-      type: [Number, String],
-      default: 1,
-    },
-    heightSize: {
-      type: [Number, String],
-      default: 1,
-    },
-    area: {},
-    center: {},
-    left: {},
-    top: {},
-    center: {},
-    cellStyle: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  computed: {
-    mergeStyle() {
-      return {
-        height: "100%",
-        minWidth: 0,
-        gridArea: this.area || "auto",
-        gridColumnEnd: `span ${this.widthSize}`, // 使用 grid-column-end 属性设置网格元素跨越多少列，或者在哪一列结束。
-        gridRowEnd: `span ${this.heightSize}`, // grid-row-start 属性指定哪一行开始显示网格元素
-        gridColumnStart: this.left, // grid-column-start 属性定义了网格元素从哪一列开始
-        gridRowStart: this.top, // grid-row-end 属性指定哪一行停止显示网格元素，或设置跨越多少行
-        textAlign:
-          this.center !== undefined && this.center !== null && "center",
-        ...this.middleStyle(this.center),
-        boxSizing: "border-box",
-        ...this.$attrs,
-        ...this.cellStyle,
-      };
-    },
-  },
-  methods: {
-    middleStyle(center) {
-      if (center !== undefined && center !== null) {
-        return {
-          display: "inline-flex",
-          flexFlow: "column wrap",
-          justifyContent: "center",
-          justifySelf: "stretch",
-        };
-      }
-    },
-  },
-});
-</script>
-
-<style></style>

package/packages/grid/index.vue

@@ -1,130 +0,0 @@
-<template>
-  <div :class="b()" :style="mergeStyle">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import create from "core/create";
-import { setPx, setPxSaveSource } from "utils";
-export default create({
-  inheritAttrs: false,
-  name: "grid",
-  props: {
-    columns: {
-      type: Number,
-      default: 1,
-    },
-    autoFill: [Boolean, String],
-    fillCell: Boolean,
-    minColumns: Number,
-    maxColumns: Number,
-    columnWidth: [String, Number],
-    minColumnWidth: [String, Number],
-    maxColumnWidth: [String, Number],
-    gap: {}, // 防止覆盖column-gap
-    columnGap: {},
-    rowGap: {},
-    areas: {},
-    minRowHeight: [String, Number],
-    maxRowHeight: [String, Number],
-    alignContent: {},
-    rows: {},
-    justifyContent: {},
-    flow: {},
-    height: { default: "auto" },
-    gridStyle: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  computed: {
-    mergeStyle() {
-      return {
-        display: "grid", // 布局是grid布局
-        height: this.height, // 设置容器高度
-        gridAutoFlow: this.fillCell ? "row dense" : this.flow, // 设置容器内元素是从左往右（默认），还是从右往左
-        gridAutoRows: this.autoRows(), // grid-auto-rows设置默认单元格高度
-        gridTemplateRows: this.frGetter(this.rows), // 当传递一个数字时，它是指定行数的简写，平分高度，自适应。如果是例如100px，就是以这个数值为宽度
-        gridTemplateColumns: this.gridTemplateColumns,
-        areas: this.formatAreas(this.areas), // 传递一个字符串数组，例如 [“a a”，“b c”]。 默认不提供。
-        justifyContent: this.justifyContent, // 决定整个内容区域在容器里面的水平位置(左中右)
-        columnGap: this.columnGap,
-        rowGap: this.rowGap,
-        alignContent: this.alignContent, // 决定整个内容区域的垂直位置(上中下)
-        ...this.$attrs,
-        ...this.gridStyle,
-      };
-    },
-    gridTemplateColumns() {
-      // 处理自动填充模式
-      if (this.autoFill) {
-        const columnWidth = this.getAutoFillColumnWidth();
-        const autoFill = this.autoFill === "autoFit" ? "auto-fit" : "auto-fill";
-        return this.getAutoFillTemplate(autoFill, columnWidth);
-      }
-
-      // 处理固定列数模式
-      return this.getFixedColumnsTemplate();
-    },
-  },
-  methods: {
-    getAutoFillColumnWidth() {
-      if (this.autoFill === "fixedWidth") {
-        return setPx(this.columnWidth || "300px");
-      }
-      return `minmax(${setPx(this.columnWidth || "300px")}, 1fr)`;
-    },
-    getAutoFillTemplate(autoFill, columnWidth) {
-      if (this.minColumns && this.maxColumns) {
-        return `repeat(max(${this.minColumns}, min(${this.maxColumns}, ${autoFill})), ${columnWidth})`;
-      }
-      if (this.minColumns) {
-        return `repeat(max(${this.minColumns}, ${autoFill}), ${columnWidth})`;
-      }
-      if (this.maxColumns) {
-        return `repeat(min(${this.maxColumns}, ${autoFill}), ${columnWidth})`;
-      }
-      return `repeat(${autoFill}, ${columnWidth})`;
-    },
-
-    getFixedColumnsTemplate() {
-      if (this.columnWidth) {
-        return `repeat(${this.columns}, ${setPx(this.columnWidth)})`;
-      }
-      if (this.minColumnWidth && this.maxColumnWidth) {
-        return `repeat(${this.columns}, minmax(${setPx(
-          this.minColumnWidth
-        )}, ${setPx(this.maxColumnWidth)}))`;
-      }
-      if (this.minColumnWidth) {
-        return `repeat(${this.columns}, minmax(${setPx(
-          this.minColumnWidth
-        )}, 1fr))`;
-      }
-      if (this.maxColumnWidth) {
-        return `repeat(${this.columns}, minmax(200px, ${setPx(
-          this.maxColumnWidth
-        )}))`;
-      }
-      return `repeat(${this.columns}, 1fr)`;
-    },
-    autoRows() {
-      return `minmax(${setPx(this.minRowHeight)}, ${setPxSaveSource(
-        this.maxRowHeight || "auto"
-      )})`;
-    },
-    frGetter(value) {
-      if (!value) return;
-      return typeof value === "number" ? `repeat(${value}, 1fr)` : value;
-    },
-    formatAreas(areas) {
-      if (!areas) return;
-      if (typeof areas === "string") return areas;
-      return areas.map((area) => `"${area}"`).join(" ");
-    },
-  },
-});
-</script>
-
-<style></style>