vue-super-crud 1.7.1

package/deploy.bat

@@ -0,0 +1,14 @@
+@echo off
+call npm run docs:build
+
+pushd docs\.vuepress\dist
+
+git init
+git add -A
+git commit -m "deploy"
+
+git push -f git@github.com:Blade-H1kar1/vue-super-crud.git master:gh-pages
+
+popd
+
+rmdir /s /q docs\.vuepress\dist

package/docs/.vuepress/components/button/base.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <!-- 基础按钮 -->
+    <sc-button @click="handleClick">基础</sc-button>
+
+    <!-- 下拉菜单按钮 -->
+    <sc-button
+      type="primary"
+      label="下拉按钮"
+      :children="[
+        {
+          label: '编辑',
+          onClick: handleClick,
+        },
+        {
+          label: '删除',
+          onClick: handleClick,
+          confirm: true,
+          type: 'danger',
+        },
+      ]"
+    />
+
+    <!-- 带输入框的提交 -->
+    <sc-button
+      type="warning"
+      label="文本提交"
+      :textSubmit="{
+        title: '驳回原因',
+        label: '驳回原因',
+        rows: 4, // 默认值
+        required: true, // 默认值
+      }"
+      @click="handleReject"
+    />
+
+    <!-- 带确认框的按钮 -->
+    <sc-button
+      type="danger"
+      label="确认操作"
+      confirm="确认操作"
+      @click="handleClick"
+    />
+
+    <!-- 使用对象配置确认框 -->
+    <sc-button
+      type="warning"
+      label="对象配置确认框"
+      :confirm="{
+        title: '对象配置确认框',
+        label: '确定要执行此操作吗？',
+        confirmButtonText: '通过',
+        cancelButtonText: '拒绝',
+        type: 'warning',
+      }"
+      @click="handleClick"
+    />
+
+    <!-- 带自定义确认框的按钮 -->
+    <sc-button
+      type="warning"
+      label="自定义确认框"
+      :customConfirm="{
+        title: '自定义确认框',
+        label: '确定要执行此操作吗？',
+        content: renderContent,
+      }"
+      @click="handleClick"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick() {
+      console.log("click");
+    },
+    handleReject(cb, reason) {
+      console.log("驳回原因:", cb, reason);
+      cb(); // 完成后调用回调
+    },
+    renderContent(h) {
+      return <div>111</div>;
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/common/code-format.vue

@@ -0,0 +1,331 @@
+<template>
+  <div
+    class="code-format"
+    :class="{ hover: hovering }"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <div class="source" :class="{ source_height: sourceHeight }">
+      <slot name="source"></slot>
+    </div>
+    <div class="meta" ref="meta">
+      <div class="description" v-if="$slots.desc">
+        <slot name="desc"></slot>
+      </div>
+      <div class="highlight">
+        <slot></slot>
+      </div>
+    </div>
+    <div
+      class="code-format-control"
+      ref="control"
+      :class="{ 'is-fixed': fixedControl }"
+      @click="isExpanded = !isExpanded"
+    >
+      <transition name="arrow-slide">
+        <i :class="[iconClass, { hovering: hovering }]"></i>
+      </transition>
+      <transition name="text-slide">
+        <span v-show="hovering">{{ controlText }}</span>
+      </transition>
+      <div class="control-button-container">
+        <el-button
+          v-show="isExpanded"
+          ref="copyButton"
+          size="small"
+          type="text"
+          class="control-button copy-button"
+          @click.stop="copyCode"
+          >复制代码</el-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CodeFormat",
+  props: {
+    sourceHeight: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      qrCodeDialog: false,
+      hovering: false,
+      isExpanded: false,
+      fixedControl: false,
+      scrollParent: null,
+      currentWidth: 0,
+    };
+  },
+  computed: {
+    lang() {
+      return this.$route.path.split("/")[1];
+    },
+    iconClass() {
+      return this.isExpanded ? "el-icon-caret-top" : "el-icon-caret-bottom";
+    },
+    controlText() {
+      return this.isExpanded ? "隐藏代码" : "显示代码";
+    },
+    codeArea() {
+      return this.$el.getElementsByClassName("meta")[0];
+    },
+  },
+  watch: {
+    isExpanded(val) {
+      this.setCodeAreaHeight();
+      if (!val) {
+        this.fixedControl = false;
+        // this.$refs.control.style.left = '0'
+        this.removeScrollHandler();
+        return;
+      }
+      setTimeout(() => {
+        this.scrollParent = window;
+        this.scrollParent &&
+          this.scrollParent.addEventListener("scroll", this.scrollHandler);
+        this.scrollHandler();
+        this.setFixedWidth();
+      }, 200);
+    },
+  },
+  mounted() {
+    const observer = new ResizeObserver(() => {
+      this.currentWidth = Math.round(this.$el.getBoundingClientRect().width);
+    });
+    observer.observe(this.$el);
+  },
+  beforeDestroy() {
+    this.removeScrollHandler();
+  },
+  methods: {
+    setFixedWidth() {
+      this.$el.querySelector(
+        ".code-format-control"
+      ).style.width = `${this.currentWidth}px`;
+    },
+    getCodeAreaHeight() {
+      if (this.$el.getElementsByClassName("description").length > 0) {
+        return (
+          this.$el.getElementsByClassName("description")[0].clientHeight +
+          this.$el.getElementsByClassName("highlight")[0].clientHeight +
+          20
+        );
+      }
+      return this.$el.getElementsByClassName("highlight")[0].clientHeight;
+    },
+    setCodeAreaHeight() {
+      this.codeArea.style.height = this.isExpanded
+        ? `${this.getCodeAreaHeight() + 1}px`
+        : "0";
+    },
+    copyCode() {
+      const pre = this.$el.querySelectorAll("pre")[0];
+      pre.setAttribute("contenteditable", "true");
+      pre.focus();
+      document.execCommand("selectAll", false, null);
+      const copied = document.execCommand("copy");
+      if (copied) {
+        pre.removeAttribute("contenteditable");
+        this.$message.success("复制成功！");
+      } else {
+        this.$message.error("复制失败！");
+      }
+    },
+    scrollHandler() {
+      const { top, bottom, left } = this.$refs.meta.getBoundingClientRect();
+      this.fixedControl =
+        bottom > document.documentElement.clientHeight &&
+        top + 44 <= document.documentElement.clientHeight;
+      // this.$refs.control.style.left = this.fixedControl ? `${left}px` : '0'
+    },
+    removeScrollHandler() {
+      this.scrollParent &&
+        this.scrollParent.removeEventListener("scroll", this.scrollHandler);
+    },
+  },
+};
+</script>
+<style lang="scss">
+.code-format {
+  border: solid 1px #ebebeb;
+  border-radius: 3px;
+  transition: 0.2s;
+  &.hover {
+    box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6),
+      0 2px 4px 0 rgba(232, 237, 250, 0.5);
+  }
+  code {
+    font-family: Menlo, Monaco, Consolas, Courier, monospace;
+  }
+  .demo-button {
+    float: right;
+  }
+  .source {
+    padding: 15px;
+  }
+  .source_height {
+    height: 600px;
+  }
+  .meta {
+    background-color: #fafafa;
+    border-top: solid 1px #eaeefb;
+    overflow: hidden;
+    height: 0;
+    transition: height 0.5s;
+  }
+  .description {
+    padding: 20px;
+    box-sizing: border-box;
+    border: solid 1px #ebebeb;
+    border-radius: 3px;
+    font-size: 14px;
+    line-height: 22px;
+    color: #666;
+    word-break: break-word;
+    margin: 10px !important;
+    background-color: #fff;
+    p {
+      margin: 0;
+      line-height: 26px;
+    }
+    code {
+      color: #5e6d82;
+      background-color: #e6effb;
+      margin: 0 4px;
+      display: inline-block;
+      padding: 1px 5px;
+      font-size: 12px;
+      border-radius: 3px;
+      height: 18px;
+      line-height: 18px;
+    }
+  }
+  .highlight {
+    pre {
+      margin: 0;
+    }
+    code.hljs {
+      margin: 0;
+      border: none;
+      max-height: none;
+      border-radius: 0;
+      &::before {
+        content: none;
+      }
+    }
+  }
+  .code-format-control {
+    z-index: 1;
+    border-top: solid 1px #eaeefb;
+    height: 44px;
+    box-sizing: border-box;
+    background-color: #fff;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    text-align: center;
+    margin-top: -1px;
+    color: #d3dce6;
+    cursor: pointer;
+    position: relative;
+    &.is-fixed {
+      position: fixed;
+      bottom: 0;
+      width: 1068px;
+      z-index: 1;
+    }
+    i {
+      font-size: 16px;
+      line-height: 44px;
+      transition: 0.3s;
+      &.hovering {
+        transform: translateX(-40px);
+      }
+    }
+    > span {
+      position: absolute;
+      transform: translateX(-30px);
+      font-size: 14px;
+      line-height: 44px;
+      transition: 0.3s;
+      display: inline-block;
+    }
+    &:hover {
+      color: #409eff;
+      background-color: #f9fafc;
+    }
+    & .text-slide-enter,
+    & .text-slide-leave-active {
+      opacity: 0;
+      transform: translateX(10px);
+    }
+    .qr_code {
+      line-height: 26px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      font-size: 14px;
+      padding-left: 15px;
+      padding-right: 25px;
+    }
+    .control-button {
+      line-height: 26px;
+      position: absolute;
+      top: 0;
+      right: 0;
+      font-size: 14px;
+      padding-left: 5px;
+      padding-right: 25px;
+    }
+  }
+  @media (max-width: 1500px) {
+    .code-format-control {
+      &.is-fixed {
+        width: 916px;
+      }
+    }
+  }
+  @media (max-width: 1300px) {
+    .code-format-control {
+      &.is-fixed {
+        width: 840px;
+      }
+    }
+  }
+  @media (max-width: 1200px) {
+    .code-format-control {
+      &.is-fixed {
+        width: 770px;
+      }
+    }
+  }
+  table {
+    margin: 0;
+    display: table;
+  }
+  th,
+  td,
+  tr {
+    border: 0;
+  }
+}
+.el-popper {
+  table {
+    margin: 0;
+    display: table;
+  }
+  th,
+  td,
+  tr {
+    border: 0;
+  }
+  tr:nth-child(2n) {
+    background: none;
+  }
+}
+</style>

package/docs/.vuepress/components/commonConfig/presetCodeTemplate/base.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <sc-crud :search.sync="searchForm" :options="options" :data="data">
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+/***
+ * date 匹配到的全局配置对象
+ * 
+ *date: {
+    comp: {
+      name: "el-date-picker",
+      type: "date",
+      valueFormat: "yyyy-MM-dd",
+    },
+  }
+ * * */
+export default {
+  data() {
+    return {
+      searchForm: {},
+      options: {
+        renderColumns: [
+          { prop: "name", label: "昵称" },
+          {
+            prop: "username",
+            label: "姓名",
+          },
+          {
+            prop: "createTime",
+            label: "模板复用示例",
+            presetType: "date", // 使用模板
+          },
+          {
+            prop: "createTime",
+            label: "不使用模板，效果与模板等价",
+            comp: {
+              name: "el-date-picker",
+              type: "date",
+              valueFormat: "yyyy-MM-dd",
+            },
+          },
+        ],
+      },
+      data: [
+        {
+          createTime: "2018-06-02",
+          createUser: 94,
+          id: 56,
+          idNumber: "8",
+          name: "识间华中张认",
+          password: "sed laboris",
+          phone: "18157668675",
+          gender: "男",
+          age: 20,
+          status: 35,
+          updateTime: "2018-09-08 16:33:19",
+          updateUser: 58,
+          username: "石洋",
+        },
+      ],
+    };
+  },
+  methods: {},
+};
+</script>

package/docs/.vuepress/components/commonConfig/presetCodeTemplate/customParams.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <sc-crud :search.sync="searchForm" :options="options" :data="data">
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+/***
+ * "testCodeTemplate" 匹配到的配置对象
+ * @param {Object} item - 当前配置对象
+ * 
+ *testCodeTemplate: (item) => ({
+    search: {
+      comp: {
+        name: item.searchCompName,
+        type: item.SearchCompType,
+      },
+    },
+    form: {
+      comp: {
+        name: item.formCompName,
+      },
+    },
+    formatter: (row) => row[item.prop] + "自定义格式化",
+  }),
+ * * */
+export default {
+  data() {
+    return {
+      searchForm: {},
+      options: {
+        rowEdit: true,
+        searchHeader: true,
+        renderColumns: [
+          {
+            prop: "name",
+            label: "昵称",
+            presetType: "testCodeTemplate",
+            searchCompName: "el-select",
+            formCompName: "el-select",
+          },
+          {
+            prop: "username",
+            label: "姓名",
+            presetType: "testCodeTemplate",
+            searchCompName: "el-input",
+            formCompName: "el-input",
+          },
+        ],
+      },
+      data: [
+        {
+          createTime: "2018-06-02 12:28:47",
+          createUser: 94,
+          id: 56,
+          idNumber: "8",
+          name: "识间华中张认",
+          password: "sed laboris",
+          phone: "18157668675",
+          gender: "男",
+          age: 20,
+          status: 35,
+          updateTime: "2018-09-08 16:33:19",
+          updateUser: 58,
+          username: "石洋",
+        },
+      ],
+    };
+  },
+  methods: {},
+};
+</script>