vue-super-crud 1.7.1

package/packages/crud/defaultColumn.vue

@@ -0,0 +1,130 @@
+<script>
+import { isFunction } from "lodash-es";
+export default {
+  inject: ["ctx"],
+  props: {
+    col: Object,
+  },
+  watch: {
+    col() {
+      this.bindColumnConfig();
+    },
+  },
+  created() {
+    const span = this.col.spanProp || this.col.sameRowSpan;
+    span && this.ctx.sameRowSpans.push(span);
+  },
+  computed: {
+    crudOptions() {
+      return this.ctx.crudOptions;
+    },
+    defaultFixed() {
+      return this.fixed;
+    },
+    showColumn() {
+      if (this.ctx.setOptions.hidden.includes(this.col.prop)) return false;
+      return true;
+    },
+    fixed() {
+      if (this.col.fixed) return this.col.fixed;
+      const fixed = this.ctx.setOptions.fixed[this.col.prop];
+      if (fixed) return fixed;
+    },
+  },
+  methods: {
+    bindColumnConfig() {
+      const columnConfig = this.$refs.column?.columnConfig;
+      if (columnConfig) {
+        columnConfig.col = { ...this.col };
+        columnConfig.options = { ...this.ctx.crudOptions };
+      }
+    },
+  },
+  render(h) {
+    if (!this.showColumn) return null;
+
+    const defaultColumn = (slots, type) => (
+      <el-table-column
+        ref="column"
+        key={this.col.type}
+        prop={this.col.type}
+        type={type}
+        fixed={this.defaultFixed}
+        props={this.col}
+        on={{
+          "hook:mounted": this.bindColumnConfig,
+        }}
+        scopedSlots={slots}
+      />
+    );
+    if (this.ctx.showSingleSelection) {
+      return defaultColumn({
+        default: (scope) => {
+          let selectable = false;
+          if (isFunction(this.ctx.singleSelection.selectable)) {
+            selectable = !this.ctx.singleSelection.selectable(
+              scope.row,
+              scope.$index
+            );
+          }
+          return (
+            <el-radio
+              v-model={this.ctx.singleSelect}
+              label={scope.row[this.ctx.operateKey]}
+              disabled={selectable}
+              onChange={() => {
+                this.ctx.$emit("update:selected", scope.row);
+              }}
+            >
+              {"  "}
+            </el-radio>
+          );
+        },
+      });
+    }
+    const span = this.col.spanProp || this.col.sameRowSpan;
+    if (this.col.type === "index" && (isFunction(this.col.index) || span)) {
+      return defaultColumn(
+        {
+          default: (scope) => {
+            if (span) {
+              const sameRowMap = this.ctx.sameRowMap[span] || {};
+
+              const rowValue = scope.row[span] || "";
+
+              const map = sameRowMap?.[rowValue]?.find(
+                (g) =>
+                  scope.$index >= g.firstIndex &&
+                  scope.$index < g.firstIndex + g.span
+              );
+              const spanIndex = map?.spanIndex || scope.$index;
+              if (this.col.render) {
+                return this.col.render(spanIndex + 1);
+              }
+              return spanIndex + 1;
+            }
+            return this.col.index(scope.$index, scope);
+          },
+        },
+        this.col.type
+      );
+    }
+    return defaultColumn(
+      {
+        default:
+          this.col.render || this.ctx.$scopedSlots[this.col.type]
+            ? (scope) => {
+                if (this.col.render) {
+                  return this.col.render(scope);
+                }
+                if (this.ctx.$scopedSlots[this.col.type]) {
+                  return this.ctx.$scopedSlots[this.col.type](scope);
+                }
+              }
+            : null,
+      },
+      this.col.type
+    );
+  },
+};
+</script>

package/packages/crud/drawerColumn.vue

@@ -0,0 +1,225 @@
+<script>
+import create from "core/create";
+import draggable from "vuedraggable";
+import cache from "utils/cache.js";
+export default create({
+  name: "crud-drawer",
+  components: { draggable },
+  inject: ["ctx"],
+  data() {
+    return {
+      active: false,
+      title: "",
+      currentValue: [],
+    };
+  },
+  computed: {
+    action() {
+      if (this.ctx.crudOptions.action || this.ctx.rowEdit) {
+        return [
+          {
+            prop: "action",
+            label: "操作",
+          },
+        ];
+      }
+      return [];
+    },
+    defaultColumns() {
+      return this.ctx.defaultColumns || [];
+    },
+    columns() {
+      const columns = [...this.defaultColumns, ...this.listColumns];
+      if (this.action.length) columns.push(...this.action);
+      return columns;
+    },
+    listColumns() {
+      return this.ctx.columns.filter((item) => !item.hiddenList) || [];
+    },
+    fixed() {
+      return this.ctx.setOptions.fixed;
+    },
+    hidden: {
+      get() {
+        return this.ctx.setOptions.hidden;
+      },
+      set(val) {
+        this.ctx.setOptions.hidden = val;
+      },
+    },
+    show: {
+      get() {
+        return this.columns
+          .filter((i) => !this.hidden.includes(i.prop))
+          .map((i) => i.prop);
+      },
+      set(val) {
+        this.hidden = this.columns
+          .filter((i) => !val.includes(i.prop))
+          .map((i) => i.prop);
+      },
+    },
+    isIndeterminate() {
+      return this.hidden.length > 0 && this.hidden.length < this.columns.length;
+    },
+    checkAll: {
+      get() {
+        return this.show.length === this.columns.length;
+      },
+      set(val) {
+        this.hidden = val ? [] : this.columns.map((i) => i.prop);
+      },
+    },
+  },
+  methods: {
+    flatColumn(columns) {
+      const flattenColumns = [];
+      columns.forEach((col) => {
+        flattenColumns.push(col);
+        if (col.children) {
+          const children = this.flatColumn(col.children);
+          flattenColumns.push(...children);
+        }
+      });
+      return flattenColumns;
+    },
+    showDrawer() {
+      this.active = true;
+    },
+    reset() {
+      this.ctx.resetLocalCache();
+    },
+    changeFixed(property, type) {
+      this.$set(this.ctx.setOptions.fixed, property, type);
+      this.ctx.saveLocalCache();
+    },
+    handleCheckedChange(value) {
+      this.ctx.saveLocalCache();
+    },
+    saveTableOptions() {
+      if (!this.$route) return;
+      let cacheData = cache.local.getJSON("tableOptions");
+      cacheData[this.$route.path] = this.ctx.setOptions;
+      cache.local.setJSON("tableOptions", cacheData);
+    },
+    onEnd({ newIndex, oldIndex }) {
+      const sort = this.ctx.setOptions.sort;
+      const endProp = this.listColumns[newIndex].prop;
+      const prop = this.listColumns[oldIndex].prop;
+      let startIndex, endIndex, adjustment;
+      if (oldIndex < newIndex) {
+        startIndex = oldIndex + 1;
+        endIndex = newIndex + 1;
+        adjustment = -1;
+      } else if (oldIndex > newIndex) {
+        startIndex = newIndex;
+        endIndex = oldIndex;
+        adjustment = 1;
+      } else {
+        return;
+      }
+      const clipColumns = this.listColumns.slice(startIndex, endIndex);
+      clipColumns.forEach((item) => {
+        if (item.prop !== prop) {
+          this.$set(sort, item.prop, item.order + adjustment);
+        }
+      });
+      this.$set(sort, prop, newIndex);
+      this.ctx.saveLocalCache();
+    },
+    renderColumnItems(columns, isDraggable = false) {
+      return columns.map((i, index) => (
+        <div class="col-item" key={index}>
+          <el-checkbox class="col-item--left" label={i.prop} title={i.label}>
+            {i.label}
+          </el-checkbox>
+          <div class="col-item--right">
+            {this.renderFixedButtons(i.prop)}
+            {isDraggable && !i.type ? (
+              <div class={["el-icon-sort", "sort-drag", "mover"]}></div>
+            ) : (
+              <div style="width: 22px; background: #fff;"></div>
+            )}
+          </div>
+        </div>
+      ));
+    },
+    renderFixedButtons(prop) {
+      return (
+        <el-button-group>
+          {["left", false, "right"].map((direction) => (
+            <el-button
+              class="fixed-btn"
+              icon={direction ? `el-icon-arrow-${direction}` : "el-icon-close"}
+              type={
+                direction
+                  ? this.fixed[prop] === direction
+                    ? "primary"
+                    : "default"
+                  : !this.fixed[prop]
+                  ? "primary"
+                  : "default"
+              }
+              onClick={() => this.changeFixed(prop, direction)}
+            />
+          ))}
+        </el-button-group>
+      );
+    },
+  },
+  render(h) {
+    return (
+      <el-drawer
+        class={this.b()}
+        title="列设置"
+        visible_sync={this.active}
+        size="300px"
+        appendToBody
+      >
+        <div class="wrapper">
+          <el-card shadow="never">
+            <div class="header">
+              <el-checkbox
+                indeterminate={this.isIndeterminate}
+                vModel={this.checkAll}
+                onChange={this.handleCheckedChange}
+              >
+                {this.show.length} / {this.columns.length}
+              </el-checkbox>
+              <span class="title">固定 / 排序</span>
+            </div>
+            <el-checkbox-group
+              class="col-list"
+              vModel={this.show}
+              onChange={this.handleCheckedChange}
+            >
+              {this.renderColumnItems(this.defaultColumns)}
+              <draggable
+                ghostClass="ghost"
+                handle=".sort-drag"
+                filter=".unMover"
+                animation={150}
+                vModel={this.currentValue}
+                onEnd={this.onEnd}
+              >
+                {this.renderColumnItems(this.listColumns, true)}
+              </draggable>
+              {this.renderColumnItems(this.action)}
+            </el-checkbox-group>
+          </el-card>
+          <el-button
+            class="reset-btn"
+            size="default"
+            icon="el-icon-refresh"
+            onClick={this.reset}
+          >
+            重置
+          </el-button>
+        </div>
+      </el-drawer>
+    );
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>

package/packages/crud/form.vue

@@ -0,0 +1,69 @@
+<template>
+  <scForm
+    ref="crudForm"
+    v-model="ctx.form"
+    :options="options"
+    :scope="scope"
+    :loading.sync="loading"
+  ></scForm>
+</template>
+
+<script>
+import create from "core/create";
+import scForm from "../form/index.vue";
+import { isFunction, merge } from "lodash-es";
+import defaultRender from "core/defaultRender";
+import { filterColumns } from "utils";
+export default create({
+  props: {
+    ctx: {
+      type: Object,
+      default: () => {},
+    },
+    mode: String,
+    scope: {
+      type: Object,
+      default: () => {},
+    },
+    loading: Boolean,
+  },
+  components: { scForm },
+  computed: {
+    formOptions() {
+      const opt = merge(
+        {},
+        this.ctx.crudOptions.formOptions,
+        this.ctx.crudOptions[this.mode + "Form"]
+      );
+      return {
+        ...opt,
+        renderColumns: filterColumns(this.ctx.getRenderColumns(this.mode)),
+      };
+    },
+    options() {
+      return {
+        detail: this.mode === "view" ? true : false,
+        labelPosition: "left",
+        columns: 2,
+        columnGap: "10px",
+        slots: this.ctx.extendsScopedSlots,
+        mode: this.mode,
+        defaultRender: (h, scope) => {
+          if (isFunction(this.formOptions.defaultRender)) {
+            return this.formOptions.defaultRender(h, scope);
+          }
+          if (scope.mode === "view" && this.formOptions.viewType === "table") {
+            return defaultRender.formatter(h, scope);
+          }
+          return defaultRender.input(h, scope);
+        },
+        ...this.formOptions,
+      };
+    },
+  },
+  mounted() {
+    this.ctx.$refs.crudForm = this.$refs.crudForm;
+  },
+  methods: {},
+});
+</script>