ol-base-components 2.7.8 → 2.7.9

package/README.md

@@ -2,8 +2,9 @@
 
 二次封装的通用组件库，包含表格（Table）和表单（Form）等组件。
 
-- [在线演示](https://mqtt-a.vercel.app/home)
-- [在线文档](https://github.com/time202051/base-component)
+<!-- - [在线演示](https://mqtt-a.vercel.app/home) -->
+
+- [官网](https://time202051.github.io/baseCom.github.io/)
 
 ## 安装
 
@@ -162,58 +163,58 @@ npx add aaa -p src/view -u /api/app/business-report/stock-bIPaged-result -e /api
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        formSearchData: {
-          reset: true,
-          expendShow: false,
-          value: {
-            WarehouseCode: null,
-            WarehouseName: null,
-          },
-          tableSearch: [
-            {
-              label: "仓库编码",
-              value: "WarehouseCode",
-              inputType: "text",
-            },
-            {
-              label: "仓库名称",
-              value: "WarehouseName",
-              inputType: "text",
-            },
-          ],
+export default {
+  data() {
+    return {
+      formSearchData: {
+        reset: true,
+        expendShow: false,
+        value: {
+          WarehouseCode: null,
+          WarehouseName: null,
         },
-      };
-    },
-    mounted() {
-      this.getTable();
-    },
-    method: {
-      getTable() {
-        //   this.get({
-        //     url: Basic.getWarehoseList,
-        //     isLoading: true,
-        //     data: Object.assign(this.formSearchData.value, {
-        //       Page: this.paginations.page,
-        //       MaxResultCount: this.paginations.limit,
-        //     }),
-        //   }).then((res) => {
-        //     this.tableData.rows = res.result.items;
-        //     this.paginations.total = res.result.totalCount;
-        //     this.tableData.emptyImg = true;
-        //   });
-      },
-      handleSearch(from) {
-        var self = this;
-        self.formSearchData.value = { ...from };
-        self.paginations.page = 1;
-        this.getTable(); // 获取表格数据
+        tableSearch: [
+          {
+            label: "仓库编码",
+            value: "WarehouseCode",
+            inputType: "text",
+          },
+          {
+            label: "仓库名称",
+            value: "WarehouseName",
+            inputType: "text",
+          },
+        ],
       },
-      handleReset() {},
+    };
+  },
+  mounted() {
+    this.getTable();
+  },
+  method: {
+    getTable() {
+      //   this.get({
+      //     url: Basic.getWarehoseList,
+      //     isLoading: true,
+      //     data: Object.assign(this.formSearchData.value, {
+      //       Page: this.paginations.page,
+      //       MaxResultCount: this.paginations.limit,
+      //     }),
+      //   }).then((res) => {
+      //     this.tableData.rows = res.result.items;
+      //     this.paginations.total = res.result.totalCount;
+      //     this.tableData.emptyImg = true;
+      //   });
     },
-  };
+    handleSearch(from) {
+      var self = this;
+      self.formSearchData.value = { ...from };
+      self.paginations.page = 1;
+      this.getTable(); // 获取表格数据
+    },
+    handleReset() {},
+  },
+};
 </script>
 ```
 
@@ -246,102 +247,102 @@ npx add aaa -p src/view -u /api/app/business-report/stock-bIPaged-result -e /api
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        multipleSelection: [],
-        tableData: {
-          loading: false,
-          emptyImg: true,
-          options: {
-            selection: true, //多选框
-            index: null, //序号
-            headTool: true, //开启头部工具栏
-            refreshBtn: true, //开启表格头部刷新按钮
-            downloadBtn: true, //开启表格头部下载按钮
-          }, //序号和复选框
-          rows: [], //表数据
-          columns: [
-            {
-              label: "",
-              minWidth: "",
-              type: "selection",
-              show: true,
-            },
-            {
-              prop: "warehouseCode",
-              label: "仓库编码",
-              minWidth: "",
-              sortable: false,
-              show: true,
-            },
-            {
-              prop: "warehouseName",
-              label: "仓库名称",
-              minWidth: "",
-              sortable: false,
-              show: true,
-            },
-            {
-              prop: "enabledDesc",
-              label: "状态",
-              minWidth: "",
-              sortable: false,
-              show: true,
-            },
-            {
-              prop: "createdUser",
-              label: "创建人",
-              minWidth: "",
-              sortable: false,
-              show: true,
-            },
-            {
-              prop: "createTime",
-              label: "创建时间",
-              minWidth: "",
-              show: true,
-            },
-            {
-              prop: "classes",
-              label: "班次",
-              minWidth: "",
-              show: true,
-              renderSlot: true,
-            },
-            {
-              prop: "remark",
-              label: "备注",
-              minWidth: "",
-              show: true,
-            },
-          ], //表头
-          operates: [], //表格里面的操作按钮
-          tableHeightDiff: 300,
-        },
-        paginations: {
-          page: 1, //当前位于那页面
-          total: 10, //总数
-          limit: 30, //一页显示多少条
-          pagetionShow: true,
-        },
-      };
-    },
-    methods: {
-      SelectionChange(row) {
-        this.multipleSelection = row;
-      },
-      handleSizeChange(val) {
-        this.paginations.page = 1;
-        this.paginations.limit = val;
-        this.getTable();
+export default {
+  data() {
+    return {
+      multipleSelection: [],
+      tableData: {
+        loading: false,
+        emptyImg: true,
+        options: {
+          selection: true, //多选框
+          index: null, //序号
+          headTool: true, //开启头部工具栏
+          refreshBtn: true, //开启表格头部刷新按钮
+          downloadBtn: true, //开启表格头部下载按钮
+        }, //序号和复选框
+        rows: [], //表数据
+        columns: [
+          {
+            label: "",
+            minWidth: "",
+            type: "selection",
+            show: true,
+          },
+          {
+            prop: "warehouseCode",
+            label: "仓库编码",
+            minWidth: "",
+            sortable: false,
+            show: true,
+          },
+          {
+            prop: "warehouseName",
+            label: "仓库名称",
+            minWidth: "",
+            sortable: false,
+            show: true,
+          },
+          {
+            prop: "enabledDesc",
+            label: "状态",
+            minWidth: "",
+            sortable: false,
+            show: true,
+          },
+          {
+            prop: "createdUser",
+            label: "创建人",
+            minWidth: "",
+            sortable: false,
+            show: true,
+          },
+          {
+            prop: "createTime",
+            label: "创建时间",
+            minWidth: "",
+            show: true,
+          },
+          {
+            prop: "classes",
+            label: "班次",
+            minWidth: "",
+            show: true,
+            renderSlot: true,
+          },
+          {
+            prop: "remark",
+            label: "备注",
+            minWidth: "",
+            show: true,
+          },
+        ], //表头
+        operates: [], //表格里面的操作按钮
+        tableHeightDiff: 300,
       },
-      handleindexChange(val) {
-        this.paginations.page = val;
-        this.getTable();
+      paginations: {
+        page: 1, //当前位于那页面
+        total: 10, //总数
+        limit: 30, //一页显示多少条
+        pagetionShow: true,
       },
+    };
+  },
+  methods: {
+    SelectionChange(row) {
+      this.multipleSelection = row;
+    },
+    handleSizeChange(val) {
+      this.paginations.page = 1;
+      this.paginations.limit = val;
+      this.getTable();
     },
-  };
+    handleindexChange(val) {
+      this.paginations.page = val;
+      this.getTable();
+    },
+  },
+};
 </script>
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol-base-components",
-  "version": "2.7.8",
+  "version": "2.7.9",
   "private": false,
   "main": "src/package/index.js",
   "bin": {

package/src/assets/olBaseComponentsLogo.svg

@@ -0,0 +1,100 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 256 256" role="img" aria-labelledby="title desc">
+<title id="title">Base Component - 极速CRUD生成</title>
+<desc id="desc">日间/夜间径向背景；无四周渐变边环；闪电在下；CRUD图标去黑色分离层与外部阴影，保留轻微发光。</desc>
+<defs>
+	<!-- 日/夜 背景 -->
+	<radialGradient id="bgDayRadial" cx="50%" cy="42%" r="80%">
+		<stop offset="0%"  stop-color="#FFE3FF" stop-opacity="0.35"/>
+		<stop offset="50%" stop-color="#8EC5FF" stop-opacity="0.22"/>
+		<stop offset="100%" stop-color="#41D1FF" stop-opacity="0.12"/>
+	</radialGradient>
+	<radialGradient id="bgNightRadial" cx="50%" cy="42%" r="85%">
+		<stop offset="0%"  stop-color="#1e1b4b" stop-opacity="0.70"/>
+		<stop offset="55%" stop-color="#0b1020" stop-opacity="0.60"/>
+		<stop offset="100%" stop-color="#020617" stop-opacity="0.55"/>
+	</radialGradient>
+
+	<!-- 其他渐变/效果 -->
+	<linearGradient id="bolt" x1="0" y1="0" x2="1" y2="1">
+		<stop offset="0%" stop-color="#fbbf24"/><stop offset="100%" stop-color="#fb7185"/>
+	</linearGradient>
+	<linearGradient id="crud" x1="0" y1="0" x2="1" y2="1">
+		<stop offset="0%" stop-color="#22d3ee"/><stop offset="100%" stop-color="#8b5cf6"/>
+	</linearGradient>
+	<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+		<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="b"/>
+		<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
+	</filter>
+	<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+		<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#000" flood-opacity="0.35"/>
+	</filter>
+
+	<style><![CDATA[
+		/* 默认日间；加 class="theme-dark" 切夜间 */
+		.bg-night { display: none; }
+		svg.theme-dark .bg-day { display: none; }
+		svg.theme-dark .bg-night { display: inline; }
+	]]></style>
+</defs>
+
+<!-- 背景：仅径向填充（无四周渐变边环） -->
+<g class="bg-day">
+	<rect x="8" y="8" width="240" height="240" rx="28" fill="url(#bgDayRadial)"/>
+</g>
+<g class="bg-night">
+	<rect x="8" y="8" width="240" height="240" rx="28" fill="url(#bgNightRadial)"/>
+</g>
+
+<!-- 左侧列表线 -->
+<g stroke="#34d399" stroke-width="6" stroke-linecap="round" opacity="0.9">
+	<line x1="20" y1="104" x2="84" y2="104"/>
+	<line x1="20" y1="132" x2="68" y2="132"/>
+	<line x1="20" y1="160" x2="56" y2="160"/>
+</g>
+
+<!-- 闪电（置底，不遮挡图标） -->
+<path d="M168 44 L128 116 L184 116 L96 228 L128 148 L72 148 Z" fill="url(#bolt)" filter="url(#glow)"/>
+
+<!-- 文档卡片（保留卡片阴影） -->
+<g transform="translate(102,44) rotate(-8 64 84)" filter="url(#shadow)">
+	<rect x="0" y="0" width="128" height="168" rx="16" fill="rgba(229,231,235,0.08)" stroke="url(#crud)" stroke-width="5"/>
+</g>
+
+<!-- CRUD 图标（无黑色分离层，无外部阴影，保留轻微发光） -->
+<g transform="translate(102,44) rotate(-8 64 84)">
+	<g stroke="url(#crud)" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.98" filter="url(#glow)">
+		<!-- Create: 加号 -->
+		<g transform="translate(18,44)">
+			<g fill="url(#crud)" stroke="none">
+				<rect x="18" y="7" width="6" height="28" rx="3"/>
+				<rect x="7" y="18" width="28" height="6" rx="3"/>
+			</g>
+		</g>
+		<!-- Read: 眼睛（无白点，渐变瞳孔） -->
+		<g transform="translate(74,40)">
+			<path d="M6 21c8-10 32-10 40 0c-8 10-32 10-40 0z"/>
+			<circle cx="26" cy="21" r="3.6" fill="url(#crud)" stroke="none" opacity="0.95"/>
+		</g>
+		<!-- Update: 修改 -->
+		<g transform="translate(18,98)">
+			<path d="M8 36l10-3l20-20c1.5-1.5 1.5-4 0-5.5v0c-1.5-1.5-4-1.5-5.5 0l-20 20l-3 10z"/>
+			<line x1="28" y1="12" x2="34" y2="18"/>
+		</g>
+		<!-- Delete: 垃圾桶 -->
+		<g transform="translate(74,96)">
+			<rect x="12" y="14" width="24" height="4" rx="2"/>
+			<rect x="20" y="10" width="8" height="4" rx="2"/>
+			<path d="M14 20h20l-2 22h-16l-2-22z"/>
+			<line x1="20" y1="24" x2="20" y2="36"/>
+			<line x1="28" y1="24" x2="28" y2="36"/>
+		</g>
+	</g>
+</g>
+
+<!-- 星点 -->
+<g fill="#f59e0b" opacity="0.9">
+	<circle cx="92" cy="86" r="2.4"/>
+	<circle cx="98" cy="70" r="1.8"/>
+	<circle cx="78" cy="124" r="1.6"/>
+</g>
+</svg>

package/src/bin/add.js

@@ -3,7 +3,7 @@ const { Command } = require("commander");
 const fs = require("fs");
 const path = require("path");
 const inquirer = require("inquirer");
-const vue2Template = require("./initTemplate");
+const { vue2Template, vue2Form } = require("./initTemplate");
 const program = new Command();
 
 const spinnerChars = ["|", "/", "-", "\\"];
@@ -238,6 +238,10 @@ try {
           swaggerModule: moduleAnswer.swaggerModule,
           idField: idField,
           rowId,
+          hasDialog:
+            operationsAnswer.operations.includes("add") ||
+            operationsAnswer.operations.includes("edit") ||
+            operationsAnswer.operations.includes("detail"),
         };
 
         // 生成模板内容
@@ -247,6 +251,14 @@ try {
         const outputPath = path.join(dir, `index.vue`);
         fs.writeFileSync(outputPath, templateContent);
 
+        if (config.hasDialog) {
+          const srcDir = path.join(dir, "components");
+          fs.mkdirSync(srcDir, { recursive: true });
+          const formContent = vue2Form(moduleName, config);
+          const dialogPath = path.join(srcDir, `formModule.vue`);
+          fs.writeFileSync(dialogPath, formContent);
+        }
+
         // 停止加载动画
         stopSpinner();
 

package/src/bin/initTemplate.js

@@ -65,30 +65,6 @@ const vue2Template = (moduleName, config = {}) => {
   // 生成方法
   const generateMethods = () => {
     const methods = [];
-    if (config.hasAdd) {
-      methods.push(`
-    addBtnHandler() {
-      this.form.type = 1;
-      this.dialogVisible = true;
-    }`);
-    }
-
-    if (config.hasEdit) {
-      methods.push(`
-    ${config.hasDetail ? `async ` : ``}editBtnHandler() {
-      const data = this.multipleSelection;
-      if(data.length !== 1) return this.$message.info("请选择一条数据");
-      const row = data[0];
-      this.form.type = 2;
-      ${
-        config.hasDetail
-          ? `const { result = {} } = await ${detailUrlKey}(row.${config.rowId});
-      this.form.value = result || {};`
-          : `this.form.value = { ...row };`
-      }
-      this.dialogVisible = true;
-    }`);
-    }
 
     // onCancel
     if (config.hasAdd || config.hasEdit || config.hasDetail) {
@@ -107,7 +83,7 @@ const vue2Template = (moduleName, config = {}) => {
         const res = await ${addUrlKey}(data);
         if(res.code !== 200) return;
         this.$message("新建成功");
-      }else if(form.type === 2){
+      }else if (form.type === 2) {
         //编辑
         const res = await ${editUrlKey}(data['${config.rowId}'], data);
         if(res.code !== 200) return;
@@ -119,6 +95,45 @@ const vue2Template = (moduleName, config = {}) => {
     }`);
     }
 
+    if (config.hasAdd) {
+      methods.push(`
+    addBtnHandler() {
+      this.type = 1;
+      this.dialogVisible = true;
+    }`);
+    }
+
+    if (config.hasEdit) {
+      methods.push(`
+    ${config.hasDetail ? `async ` : ``}editBtnHandler() {
+      const data = this.multipleSelection;
+      if(data.length !== 1) return this.$message.info("请选择一条数据");
+      const row = data[0];
+      ${
+        config.hasDetail
+          ? `const { result = {} } = await ${detailUrlKey}(row.${config.rowId});
+      this.formData = result || {};`
+          : `this.formData = { ...row };`
+      }
+      this.type = 2;
+      this.dialogVisible = true;
+    }`);
+    }
+
+    // 有详情
+    if (config.hasDetail) {
+      methods.push(`
+    async detailBtnHandler() {
+      const data = this.multipleSelection;
+      if(data.length !== 1) return this.$message.info("请选择一条数据");
+      const row = data[0];
+      const { result = {} } = await ${detailUrlKey}(row.${config.rowId});
+      this.formData = result || {};
+      this.type = 0;
+      this.dialogVisible = true;
+    }`);
+    }
+
     if (config.hasDelete) {
       methods.push(`
     deleteBtnHandler() {
@@ -140,6 +155,25 @@ const vue2Template = (moduleName, config = {}) => {
     }`);
     }
 
+    if (config.hasExport) {
+      methods.push(`
+    export() {
+      const timer = this.formSearchData.value.createdTime;
+      this.formSearchData.value.BeginTime = timer ? timer[0] : "";
+      this.formSearchData.value.EndTime = timer ? timer[1] : "";
+      this.post({
+        url: ${config.swaggerModule}.${exportUrlKey},
+        isLoading: true,
+        responseType: "blob",
+        data: Object.assign(this.formSearchData.value, {
+          Page: this.paginations.page,
+          MaxResultCount: this.paginations.limit
+        })
+      }).then(res => {
+        this.fnexsl(res);
+      });
+    }`);
+    }
     return methods.join(",");
   };
 
@@ -169,12 +203,11 @@ const vue2Template = (moduleName, config = {}) => {
       @handleindexChange="handleindexChange"
     />
     ${
-      config.hasAdd || config.hasEdit || config.hasDetail
+      config.hasDialog
         ? `<el-dialog :title="this.form.title" :visible.sync="dialogVisible" width="80%">
-      <ol-form
+      <FormModule 
         v-if="dialogVisible"
-        :url="swaggerUrl.${baseUrlKey}"
-        :form="form"
+        :formData="formData"
         @onCancel="onCancel"
         @onSubmit="onSubmit"
       />
@@ -186,8 +219,16 @@ const vue2Template = (moduleName, config = {}) => {
 <script>
 import { ${generateImports()} } from "@/api/modules";
 import { ${config.swaggerModule} } from '@/api/swagger';
+${config.hasDialog ? `import FormModule  from "./components/formModule.vue"` : ""}
 export default {
   name: "${moduleName}",
+  ${
+    config.hasDialog
+      ? `components: {
+    FormModule
+  },`
+      : ""
+  }
   data() {
    return {
      swaggerUrl: ${config.swaggerModule},
@@ -223,17 +264,9 @@ export default {
        pagetionShow: true
      },
      ${
-       config.hasAdd || config.hasEdit || config.hasDetail
-         ? `form: {
-       type: 0, // 0详情，1新增, 2编辑
-       title: "",
-       // 默认值
-       defaultValue: {},
-       value: {},
-       model: [],
-       rules: {},
-       attrs: {},
-     },
+       config.hasDialog
+         ? `type: 1,
+     formData: {},
      dialogVisible: false`
          : ""
      }
@@ -279,31 +312,97 @@ export default {
       this.paginations.page = val;
       this.init();
     },
-    ${
-      config.hasExport
-        ? `export() {
-      const timer = this.formSearchData.value.createdTime
-        ;
-      this.formSearchData.value.BeginTime = timer ? timer[0] : "";
-      this.formSearchData.value.EndTime = timer ? timer[1] : "";
-      this.post({
-        url: ${config.swaggerModule}.${exportUrlKey},
-        isLoading: true,
-        responseType: "blob",
-        data: Object.assign(this.formSearchData.value, {
-          Page: this.paginations.page,
-          MaxResultCount: this.paginations.limit
-        })
-      }).then(res => {
-        this.fnexsl(res);
-      });
-    },`
-        : ""
-    }${generateMethods()}
+    ${generateMethods()}
+  }
+}
+</script>
+`;
+};
+
+const vue2Form = (moduleName, config = {}) => {
+  let editUrlKey = "",
+    detailUrlKey = "",
+    baseUrlKey = "";
+
+  if (config.detailUrl) {
+    detailUrlKey = generateKeyName(config.detailUrl, "get");
+    baseUrlKey = `${detailUrlKey}CompleteUrl`; //补充后缀
+  }
+
+  if (config.editUrl) {
+    editUrlKey = generateKeyName(config.editUrl, "put");
+    baseUrlKey = `${editUrlKey}CompleteUrl`; //补充后缀
+  }
+
+  if (config.addUrl) baseUrlKey = generateKeyName(config.addUrl, "post");
+
+  return `<!--
+  Filename: ${moduleName}.vue
+  name: ${moduleName}
+  Created Date: ${new Date().toLocaleString()}
+  Author: 
+-->
+<template>
+  <ol-form
+    :url="swaggerUrl.${baseUrlKey}"
+    :form="form"
+    @onCancel="onCancel"
+    @onSubmit="onSubmit"
+  />
+</template>
+<script>
+import { ${config.swaggerModule} } from '@/api/swagger';
+export default {
+  name: "${moduleName}Form",
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({})
+    },
+    type: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      swaggerUrl: ${config.swaggerModule},
+      form: {
+        type: this.type, // 0详情，1新增, 2编辑
+        title: "",
+        defaultValue: {}, // 默认值
+        value: {},
+        model: [],
+        rules: {},
+        attrs: {},
+      }
+    }
+  },
+  watch: {
+    type: {
+      handler(val){
+        this.form.type = val;
+      },
+      immediate: true
+    }
+  },
+  created(){
+      this.form.value = { ...this.formData };
+  },
+  methods: {
+    onCancel() {
+      this.$emit("onCancel");
+    },
+    onSubmit({form, data}) {
+      this.$emit("onSubmit", { form, data });
+    }
   }
 }
 </script>
 `;
 };
 
-module.exports = vue2Template;
+module.exports = {
+  vue2Template,
+  vue2Form,
+};

package/src/package/form/src/index.vue

@@ -65,7 +65,7 @@
             v-bind="item.props || {}"
           />
           <el-radio-group v-else-if="item.type == 'radio'" v-model="form.value[item.prop]">
-            <el-radio v-for="ctem in item.child" :key="ctem.key" :label="ctem.key">{{
+            <el-radio v-for="ctem in item.children" :key="ctem.key" :label="ctem.key">{{
               ctem.value
             }}</el-radio>
           </el-radio-group>
@@ -86,14 +86,14 @@
             v-else-if="item.type == 'treeSelect'"
             v-model="form.value[item.prop]"
             v-bind="item.props || {}"
-            :options="item.child"
+            :options="item.children"
             @getValue="item.change && item.change(form.value[item.prop])"
           />
           <!-- <el-select v-else-if="item.type == 'select'" v-model="form.value[item.prop]"
                   :placeholder="`请选择${item.placeholder || item.label}`"
                   :clearable="'clearable' in item ? item.clearable : true" :disabled="item.disabled || false"
                   v-bind="item.props || {}" v-on="{ ...item.listeners, change: selectChangeHandle(item) }">
-                  <el-option v-for="(jtem, jindex) in item.child" :key="jindex" :label="jtem.value"
+                  <el-option v-for="(jtem, jindex) in item.children" :key="jindex" :label="jtem.value"
                       :value="jtem.key"></el-option>
               </el-select> -->
           <!-- v-on="{ ...item.listeners, change: (event) => selectChangeHandle(event,
@@ -118,7 +118,7 @@
             "
           >
             <el-option
-              v-for="(jtem, jindex) in item.child"
+              v-for="(jtem, jindex) in item.children"
               :key="jindex"
               :label="jtem.value"
               :value="jtem.key"