vue-super-crud 1.7.1

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

@@ -0,0 +1,24 @@
+<template>
+  <sc-position>
+    <template #left>
+      <el-button type="primary">左侧</el-button>
+    </template>
+    <template #right>
+      <el-button type="primary">右侧</el-button>
+    </template>
+    <template #top>
+      <el-button style="width: 100%;" type="primary">顶部</el-button>
+    </template>
+    <template #bottom>
+      <el-button style="width: 100%;" type="primary">底部</el-button>
+    </template>
+    <el-input v-model="value" placeholder="请输入内容" />
+  </sc-position>
+</template>
+<script>
+export default {
+  data() {
+    return { value: "" };
+  },
+};
+</script>

package/docs/.vuepress/components/positionSlot/form.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <h3>表单</h3>
+    <sc-form v-model="form" :options="options">
+      <template #test-left>
+        <el-button>渲染单元格左侧</el-button>
+      </template>
+      <template #test-right>
+        <el-button>渲染单元格右侧</el-button>
+      </template>
+      <template #test-top="scope">
+        <el-button style="width: 100%;">{{
+          scope.row.test || "渲染单元格顶部"
+        }}</el-button>
+      </template>
+      <template #test-bottom>
+        <el-button style="width: 100%;">渲染单元格底部</el-button>
+      </template>
+    </sc-form>
+    <h3>表格</h3>
+    <sc-crud :options="options" :data="data"
+      ><template #test-left>
+        <el-button>渲染单元格左侧 </el-button>
+      </template>
+      <template #test-right>
+        <el-button>渲染单元格右侧</el-button>
+      </template>
+      <template #test-top="scope">
+        <el-button style="width: 100%;">{{
+          scope.row.test || "渲染单元格顶部"
+        }}</el-button>
+      </template>
+      <template #test-bottom>
+        <el-button style="width: 100%;">渲染单元格底部</el-button>
+      </template>
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {},
+      data: [
+        {
+          test: "",
+          test2: "11111",
+        },
+      ],
+      options: {
+        labelWidth: "160px",
+        renderColumns: [
+          {
+            label: "渲染单元格",
+            prop: "test",
+            position: true,
+            comp: {
+              name: "el-input",
+            },
+          },
+          {
+            label: "普通单元格",
+            prop: "test2",
+          },
+        ],
+      },
+    };
+  },
+};
+</script>

package/docs/.vuepress/components/positionSlot/table.vue

@@ -0,0 +1,85 @@
+<template>
+  <sc-crud
+    :loading.sync="loading"
+    :search.sync="search"
+    :options="options"
+    :data="data"
+    :total="total"
+    @getList="getList"
+  >
+    <template #handleRow>
+      <el-button>操作栏</el-button>
+    </template>
+    <template #handleRow-left>
+      <el-button type="primary">操作栏左侧</el-button>
+    </template>
+    <template #handleRow-right>
+      <el-button type="primary">操作栏右侧</el-button>
+    </template>
+    <template #handleRow-top>
+      <el-button type="primary" style="width: 100%;">操作栏顶部</el-button>
+    </template>
+    <template #handleRow-bottom>
+      <el-button type="primary" style="width: 100%;">操作栏底部</el-button>
+    </template>
+    <template #name-header-left>
+      <el-button type="primary">左侧</el-button>
+    </template>
+    <template #name-header-right>
+      <el-button type="primary">右侧</el-button>
+    </template>
+    <template #name-header-top>
+      <el-button type="primary" style="width: 100%;">顶部</el-button>
+    </template>
+    <template #name-header-bottom>
+      <el-button type="primary" style="width: 100%;">底部</el-button>
+    </template>
+    <template #pagination-left>
+      <el-button type="primary">左侧</el-button>
+    </template>
+    <template #pagination-right>
+      <el-button type="primary">右侧</el-button>
+    </template>
+    <template #pagination-top>
+      <el-button type="primary" style="width: 100%;">顶部</el-button>
+    </template>
+    <template #pagination-bottom>
+      <el-button type="primary" style="width: 100%;">底部</el-button>
+    </template>
+  </sc-crud>
+</template>
+
+<script>
+import { mockApi } from "../mock";
+export default {
+  data() {
+    return {
+      loading: false,
+      search: {
+        pageNum: 1,
+        pageSize: 2,
+      },
+      options: {
+        init: true,
+        renderColumns: [
+          { prop: "name", label: "姓名" },
+          { prop: "gender", label: "性别" },
+          { prop: "age", label: "年龄" },
+          { prop: "city", label: "城市" },
+        ],
+      },
+      data: [],
+      total: 0,
+    };
+  },
+  methods: {
+    async getList() {
+      this.loading = true;
+      const { data, total } = await mockApi.getList(this.search);
+      this.data = data;
+      this.total = total;
+      this.loading = false;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,57 @@
+<template>
+  <sc-tabs
+    v-model="activeTab"
+    :tab-list="tabList"
+    all
+    refresh
+    type="card"
+    @tab-click="handleTabClick"
+  >
+    <template #tab1>
+      <div>标签1的内容</div>
+    </template>
+
+    <template #tab2-label="scope">
+      <i class="el-icon-date"></i>
+      {{ scope.label }}
+    </template>
+
+    <template #tab2>
+      <div>标签2的内容</div>
+    </template>
+  </sc-tabs>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeTab: "tab1",
+      tabList: [
+        {
+          label: "标签1",
+          name: "tab1",
+          icon: "el-icon-date",
+          cache: true,
+        },
+        {
+          label: "标签2",
+          name: "tab2",
+        },
+        {
+          label: "标签3",
+          name: "tab3",
+          render: () => {
+            return <div>标签3的内容</div>;
+          },
+        },
+      ],
+    };
+  },
+  methods: {
+    handleTabClick(tab, item) {
+      console.log("点击的标签：", tab, item);
+    },
+  },
+};
+</script>

package/docs/.vuepress/components/temp.js

@@ -0,0 +1,195 @@
+const renderColumns = [
+  // 输入框类型
+  {
+    label: "用户名",
+    prop: "username",
+  },
+  {
+    label: "描述",
+    prop: "description",
+    comp: {
+      type: "textarea",
+      rows: 3,
+    },
+  },
+
+  // 数字输入框
+  {
+    label: "年龄",
+    prop: "age",
+    comp: {
+      name: "el-input-number",
+      min: 0,
+      max: 100,
+    },
+  },
+
+  // 选择器
+  {
+    label: "状态",
+    prop: "status1111",
+    comp: {
+      name: "el-select",
+      options: [
+        { label: "启用", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+    },
+  },
+
+  // 日期选择器
+  {
+    label: "出生日期",
+    prop: "birthday",
+    comp: {
+      name: "el-date-picker",
+      type: "date",
+      valueFormat: "yyyy-MM-dd",
+    },
+  },
+  {
+    label: "时间范围",
+    prop: "timeRange",
+    comp: {
+      name: "el-date-picker",
+      type: "datetimerange",
+      valueFormat: "yyyy-MM-dd HH:mm:ss",
+    },
+  },
+
+  // 时间选择器
+  {
+    label: "上班时间",
+    prop: "workTime",
+    comp: {
+      name: "el-time-picker",
+      isRange: false,
+      valueFormat: "HH:mm:ss",
+    },
+  },
+
+  // 单选框
+  {
+    label: "性别",
+    prop: "gender",
+    comp: {
+      name: "el-radio-group",
+      options: [
+        { label: "男", value: 1 },
+        { label: "女", value: 2 },
+      ],
+    },
+  },
+
+  // 多选框
+  {
+    label: "爱好",
+    prop: "hobbies",
+    comp: {
+      name: "el-checkbox-group",
+      options: [
+        { label: "阅读", value: "reading" },
+        { label: "运动", value: "sports" },
+        { label: "音乐", value: "music" },
+      ],
+    },
+  },
+
+  // 开关
+  {
+    label: "是否启用",
+    prop: "enabled111",
+    comp: {
+      name: "el-switch",
+      activeValue: true,
+      inactiveValue: false,
+    },
+  },
+
+  // 滑块
+  {
+    label: "进度",
+    prop: "progress",
+    comp: {
+      name: "el-slider",
+      min: 0,
+      max: 100,
+      step: 10,
+    },
+  },
+
+  // 评分
+  {
+    label: "评分",
+    prop: "rate",
+    comp: {
+      name: "el-rate",
+      max: 5,
+      allowHalf: true,
+    },
+  },
+
+  // 级联选择器
+  {
+    label: "地区",
+    prop: "area",
+    comp: {
+      name: "el-cascader",
+      props: { checkStrictly: true, multiple: true },
+      options: [
+        {
+          value: "zhejiang",
+          label: "浙江",
+          children: [
+            {
+              value: "hangzhou",
+              label: "杭州",
+            },
+            {
+              value: "ningbo",
+              label: "宁波",
+            },
+          ],
+        },
+        {
+          value: "jiangsu",
+          label: "江苏",
+          children: [
+            {
+              value: "nanjing",
+              label: "南京",
+              children: [
+                {
+                  value: "nanjing",
+                  label: "南京",
+                },
+                {
+                  value: "suzhou",
+                  label: "苏州",
+                },
+              ],
+            },
+            {
+              value: "suzhou",
+              label: "苏州",
+            },
+          ],
+        },
+      ],
+    },
+  },
+
+  // 穿梭框
+  {
+    label: "权限",
+    prop: "permissions",
+    comp: {
+      name: "el-transfer",
+      data: [
+        { key: 1, label: "查看" },
+        { key: 2, label: "编辑" },
+        { key: 3, label: "删除" },
+      ],
+    },
+  },
+];

package/docs/.vuepress/config.js

@@ -0,0 +1,146 @@
+const alias = require("../../build/alias");
+
+module.exports = {
+  title: "VueSuperCrud",
+  description: "基于element-ui二次封装，快速开发CRUD业务组件库",
+  theme: "reco",
+  base: "/vue-super-crud/",
+  port: 1235,
+  head: [
+    [
+      "link",
+      { rel: "shortcut icon", type: "image/x-icon", href: `/favicon.ico` },
+    ],
+  ],
+  markdown: {
+    // lineNumbers: true // 代码块显示行号
+  },
+  themeConfig: {
+    repo: "https://github.com/Blade-H1kar1/vue-super-crud.git",
+    // 自定义仓库链接文字。
+    repoLabel: "GitHub",
+    sidebarDepth: 3,
+    subSidebar: "auto",
+    searchMaxSuggestions: 10,
+    nav: [
+      { text: "首页", link: "/" },
+      { text: "指南", link: "/guide/start/base" },
+    ],
+    sidebar: {
+      "/guide/": [
+        {
+          title: "指南",
+          collapsable: true,
+          children: [{ title: "快速使用", path: "start/base" }],
+        },
+        {
+          title: "渲染配置",
+          collapsable: true,
+          children: [
+            "commonConfig/renderType",
+            "commonConfig/jsx",
+            "commonConfig/presetCodeTemplate",
+          ],
+        },
+        {
+          title: "字典管理",
+          collapsable: true,
+          children: ["dict/config", "dict/component", "dict/baseUse"],
+        },
+        {
+          title: "方位插槽",
+          collapsable: true,
+          children: ["positionSlot/base"],
+        },
+        {
+          title: "响应式数据格式化",
+          collapsable: true,
+          children: ["formatData/config", "formatData/baseUse"],
+        },
+        {
+          title: "数据模拟",
+          collapsable: true,
+          children: ["mockData/base"],
+        },
+        {
+          title: "crud组件",
+          collapsable: true,
+          children: [
+            "crud/config",
+            "crud/baseUse",
+            "crud/search",
+            "crud/tableEdit",
+            "crud/validate",
+            "crud/contextMenu",
+            "crud/buttons",
+            "crud/selection",
+            "crud/genDynamicColumns",
+            "crud/span",
+            "crud/dataSort",
+            "crud/summary",
+          ],
+        },
+        {
+          title: "form组件",
+          collapsable: true,
+          children: ["form/baseUse", "form/detail"],
+        },
+        {
+          title: "dialog组件",
+          collapsable: true,
+          children: ["dialog/baseUse"],
+        },
+        {
+          title: "button组件",
+          collapsable: true,
+          children: ["button/base"],
+        },
+        {
+          title: "tabs组件",
+          collapsable: true,
+          children: ["tabs/base"],
+        },
+        {
+          title: "问题合集",
+          collapsable: true,
+          children: ["question/base"],
+        },
+      ],
+    },
+  },
+  configureWebpack: {
+    output: {
+      publicPath: "/vue-super-crud/", // 修改为根路径
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: {
+            loader: "babel-loader",
+            options: {
+              presets: [
+                "@vue/cli-plugin-babel/preset",
+                [
+                  "@vue/babel-preset-jsx",
+                  {
+                    injectH: false,
+                  },
+                ],
+              ],
+              plugins: ["./vue-jsx-sync"],
+            },
+          },
+        },
+      ],
+    },
+    resolve: {
+      alias: {
+        "core-js/library/fn": "core-js/features",
+        ...alias,
+      },
+    },
+  },
+  plugins: ["code-copy", "fulltext-search"],
+};