ol-base-components 2.6.0 → 2.7.0

package/src/bin/initTemplate.js

@@ -5,12 +5,9 @@ function generateKeyName(url, method) {
 
   // 处理 {xxx} 转换为 ByXxx
   const processedArr = arr.map(
-    (item) =>
+    item =>
       item
-        .replace(
-          /{(.*?)}/,
-          (_, param) => `By${param.charAt(0).toUpperCase() + param.slice(1)}`
-        ) // 处理 {xxx}
+        .replace(/{(.*?)}/, (_, param) => `By${param.charAt(0).toUpperCase() + param.slice(1)}`) // 处理 {xxx}
         .replace(/[-_]/g, "") // 去除 - 和 _
   );
 
@@ -24,25 +21,132 @@ function generateKeyName(url, method) {
   for (let i = 0; i < processedArr.length; i++) {
     if (i === 0 || processedArr[i] !== processedArr[i - 1]) {
       // 将每项首字母大写
-      const capitalizedItem =
-        processedArr[i].charAt(0).toUpperCase() + processedArr[i].slice(1);
+      const capitalizedItem = processedArr[i].charAt(0).toUpperCase() + processedArr[i].slice(1);
       resultArr.push(capitalizedItem);
     }
   }
   const key = resultArr.join("");
   return `${method.toLowerCase()}${key}`;
 }
+const vue2Template = (moduleName, config = {}) => {
+  console.log(888, config);
 
-const vue2Template = (moduleName, options = {}) => {
-  // 只有当提供了 URL 时才调用 generateKeyName
-  let pageUrl = "";
-  let exportUrl = "";
-  if (options.url) {
-    pageUrl = generateKeyName(options.url, "get");
-  }
-  if (options.export) {
-    exportUrl = generateKeyName(options.export, "post");
-  }
+  // 生成各种接口的key名称
+  let pageUrlKey = "";
+  let exportUrlKey = "";
+  let addUrlKey = "";
+  let editUrlKey = "";
+  let deleteUrlKey = "";
+  let detailUrlKey = "";
+
+  if (config.pageUrl) pageUrlKey = generateKeyName(config.pageUrl, "get");
+  if (config.exportUrl) exportUrlKey = generateKeyName(config.exportUrl, "post");
+  if (config.addUrl) addUrlKey = generateKeyName(config.addUrl, "post");
+  if (config.editUrl) editUrlKey = generateKeyName(config.editUrl, "put");
+  if (config.deleteUrl) deleteUrlKey = generateKeyName(config.deleteUrl, "delete");
+  if (config.detailUrl) detailUrlKey = generateKeyName(config.detailUrl, "get");
+
+  // 生成导入语句
+  const generateImports = () => {
+    const imports = [];
+    if (config.pageUrl) imports.push(`${pageUrlKey}`);
+    if (config.addUrl) imports.push(`${addUrlKey}`);
+    if (config.editUrl) imports.push(`${editUrlKey}`);
+    if (config.deleteUrl) imports.push(`${deleteUrlKey}`);
+    if (config.detailUrl) imports.push(`${detailUrlKey}`);
+    return imports.join(", ");
+  };
+
+  // 生成方法
+  const generateMethods = () => {
+    const methods = [];
+    if (config.hasAdd) {
+      methods.push(`
+    addBtnHandler() {
+      this.form.type = 1;
+      this.dialogVisible = true;
+    }`);
+    }
+
+    // if (config.hasEdit) {
+    //   methods.push(`
+    // editBtnHandler() {
+    //   this.form.type = 2;
+    //   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.idField});
+      this.form.value = result || {};`
+          : `this.form.value = { ...row };`
+      }
+      this.dialogVisible = true;
+    }`);
+    }
+
+    // onCancel
+    if (config.hasAdd || config.hasEdit || config.hasDetail) {
+      methods.push(`
+    onCancel() {
+      this.dialogVisible = false;
+    }`);
+    }
+
+    // onSubmit
+    if (config.hasAdd || config.hasEdit) {
+      // editUrlKey
+      // addUrlKey
+      methods.push(`
+    async onSubmit({ form, data }) {
+      if(form.type === 1){
+        //新建
+        const res = await ${addUrlKey}(data);
+        if(res.code !== 200) return;
+        this.$message("新建成功");
+      }else if(form.type === 2){
+        //编辑
+        const res = await ${editUrlKey}(data['${config.idField}'], data);
+        if(res.code !== 200) return;
+        this.$message("编辑成功");
+        this.init();
+      };
+      this.init();
+      this.onCancel()
+    }`);
+    }
+
+    if (config.hasDelete) {
+      methods.push(`
+    deleteBtnHandler() {
+      const data = this.multipleSelection;
+      if(data.length !== 1) return this.$message.info("请选择一条数据");
+      const row = data[0];
+      this.$confirm('确认删除当前数据吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        ${deleteUrlKey}(row.${config.idField}).then(() => {
+          this.$message.success('删除成功');
+          this.init();
+        }).catch(() => {
+          this.$message.error('删除失败');
+        });
+      }).catch(() => {});
+    }`);
+    }
+
+    return methods.join(",");
+  };
 
   return `<!--
   Filename: ${moduleName}.vue
@@ -53,13 +157,13 @@ const vue2Template = (moduleName, options = {}) => {
 <template>
   <div>
     <ol-search
-      :url="swaggerUrl.${pageUrl}"
+      :url="swaggerUrl.${pageUrlKey}"
       :form-search-data="formSearchData"
       @handleSearch="handleSearch"
       @handleReset="handleReset"
     />
     <ol-table
-      :url="swaggerUrl.${pageUrl}"
+      :url="swaggerUrl.${pageUrlKey}"
       :paginations="paginations"
       :btnlist="this.hasBtn(this)"
       :empty-img="tableData.emptyImg"
@@ -69,51 +173,76 @@ const vue2Template = (moduleName, options = {}) => {
       @handleSizeChange="handleSizeChange"
       @handleindexChange="handleindexChange"
     />
+    ${
+      config.hasAdd || config.hasEdit || config.hasDetail
+        ? `<el-dialog :title="this.form.title" :visible.sync="dialogVisible" width="80%">
+      <ol-form
+        v-if="dialogVisible"
+        :url="swaggerUrl.${pageUrlKey}"
+        :form="form"
+        @onCancel="onCancel"
+        @onSubmit="onSubmit"
+      />
+    </el-dialog>`
+        : ""
+    }
   </div>
 </template>
 <script>
-import { ${pageUrl} } from "@/api/modules";
-import { ${options.swaggerModule} } from '@/api/swagger'
+import { ${generateImports()} } from "@/api/modules";
+import { ${config.swaggerModule} } from '@/api/swagger';
 export default {
   name: "${moduleName}",
   data() {
-    return {
-      swaggerUrl: ${options.swaggerModule},
-      multipleSelection: [],
-      // 查询表单
-      formSearchData: {
-        reset: true, // 重置
-        expendShow: true, // 展开
-        value: {},
-        tableSearch: []
-      },
-      // 表格数据
-      tableData: {
-        loading: false,
-        emptyImg: true,
-        options: {
-          selection: true, // 多选框
-          index: null, // 序号
-          headTool: true, // 开启头部工具栏
-          refreshBtn: true, // 开启表格头部刷新按钮
-          downloadBtn: true // 开启表格头部下载按钮
-        }, // 序号和复选框
-        rows: [], // 表数据
-        columns: [],
-        operatesAttrs: {},
-        operates: [], // 表格里面的操作按钮
-        tableHeightDiff: 330
-      },
-      paginations: {
-        page: 1, // 当前位于那页面
-        total: 10, // 总数
-        limit: 30, // 一页显示多少条
-        pagetionShow: true
-      },
-    }
-  },
-  created() {
-    this.init();
+   return {
+     swaggerUrl: ${config.swaggerModule},
+     multipleSelection: [],
+     // 查询表单
+     formSearchData: {
+       reset: true, // 重置
+       expendShow: true, // 展开
+       value: {},
+       tableSearch: []
+     },
+     // 表格数据
+     tableData: {
+       loading: false,
+       emptyImg: true,
+       options: {
+         selection: true, // 多选框
+         index: null, // 序号
+         headTool: true, // 开启头部工具栏
+         refreshBtn: true, // 开启表格头部刷新按钮
+         downloadBtn: true // 开启表格头部下载按钮
+       }, // 序号和复选框
+       rows: [], // 表数据
+       columns: [],
+       operatesAttrs: {},
+       operates: [], // 表格里面的操作按钮
+       tableHeightDiff: 330
+     },
+     paginations: {
+       page: 1, // 当前位于那页面
+       total: 10, // 总数
+       limit: 30, // 一页显示多少条
+       pagetionShow: true
+     },
+     ${
+       config.hasAdd || config.hasEdit || config.hasDetail
+         ? `form: {
+       type: 0, // 0详情，1新增, 2编辑
+       title: "",
+       // 默认值
+       defaultValue: {},
+       value: {},
+       model: [],
+       rules: {},
+       attrs: {},
+     },
+     dialogVisible: false`
+         : ""
+     }
+   }
   },
   methods: {
     async init() {
@@ -122,7 +251,7 @@ export default {
         Page: this.paginations.page,
         MaxResultCount: this.paginations.limit
       };
-      const { result: { items = [], totalCount = 0 } = {} } = await ${pageUrl}(params, {
+      const { result: { items = [], totalCount = 0 } = {} } = await ${pageUrlKey}(params, {
         isLoading: true
       });
       this.tableData.rows = items;
@@ -152,13 +281,15 @@ export default {
       this.paginations.page = val;
       this.init();
     },
-    export() {
-      let timer = this.formSearchData.value.createdTime
+    ${
+      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: ${options.swaggerModule}.${exportUrl},
+        url: ${config.swaggerModule}.${exportUrlKey},
         isLoading: true,
         responseType: "blob",
         data: Object.assign(this.formSearchData.value, {
@@ -168,12 +299,11 @@ export default {
       }).then(res => {
         this.fnexsl(res);
       });
-    },
+    },`
+        : ""
+    }${generateMethods()}
   }
 }
-</script>
-<style lang="scss" scoped>
-</style>
 `;
 };
 

package/src/package/form/index.js

@@ -1,7 +1,7 @@
-import Form from "./src/index.vue";
+import OlForm from "./src/index.vue";
 
-Form.install = function (Vue) {
-  Vue.component("ol-form ", Form);
+OlForm.install = function (Vue) {
+  Vue.component("ol-form ", OlForm);
 };
 
-export default Form;
+export default OlForm;

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

@@ -153,6 +153,8 @@
           <template v-else-if="item.type == 'slot'">
             <slot :name="item.name" :item="item" />
           </template>
+          <!-- 兜底 -->
+          <div v-else style="color: red">"{{ item.type }}"类型暂不支持，请手动添加</div>
         </el-form-item>
       </template>
     </el-form>
@@ -209,6 +211,9 @@
   | selectChange| 选择器值变化事件 | {obj: 当前项配置, val: 变化后的值} |
   -->
   <script>
+import { getData } from "../../index.js";
+import { initForm } from "../../../utils/initData.js";
+
 // interface FormItem {
 //   type: Number;
 //   title?: String;
@@ -219,6 +224,11 @@
 export default {
   name: "form",
   props: {
+    url: {
+      type: String,
+      // default: "/api/app/warehouse/warehouse",
+      default: "",
+    },
     form: Object,
     // 默认值
     defaultValue: {
@@ -302,11 +312,13 @@ export default {
         form.value[key] = this.defaultValue[key];
       });
     }
-    this.init();
+    initForm({
+      url: this.url,
+      form: this.form,
+    });
   },
   // beforeDestroy() {},
   methods: {
-    init() {},
     // 保留之前的change调用方式，并添扩展新的
     selectChangeHandle(val, item) {
       (item &&

package/src/package/index.js

@@ -1,7 +1,7 @@
 import OlTable from "./table";
 import OlSearch from "./formSearch";
 import Dialog from "./dialog";
-import Form from "./form";
+import OlForm from "./form";
 import SwaggerClient from "swagger-client";
 
 const consoleTooltip = () => {
@@ -144,7 +144,6 @@ const swaggerUnload = async function () {
   await clearData(); // 清空 IndexedDB 中的缓存数据
 };
 
-const components = [OlTable, OlSearch, Dialog];
 
 // 自定义加载指示器
 function showLoading() {
@@ -204,6 +203,8 @@ function hideLoading() {
   }
 }
 
+
+const components = [OlTable, OlSearch, Dialog, OlForm];
 const install = async function (Vue) {
   // 设置全局数据
   components.map((item) => {
@@ -213,5 +214,5 @@ const install = async function (Vue) {
 };
 
 export default install;
-export { OlTable, OlSearch, Dialog, Form };
+export { OlTable, OlSearch, Dialog, OlForm };
 export { swaggerInstall, swaggerUnload };

package/src/utils/initData.js

@@ -0,0 +1,84 @@
+import { getData } from "../package/index.js";
+// java数据类型转成js数据类型
+const javaTypeToJsType = javaType => {
+  switch (javaType) {
+    case "integer":
+      return "number";
+    case "array":
+      return "Array";
+    case "object":
+      return "Object";
+    default:
+      return javaType;
+  }
+};
+
+const javaTypeToformType = javaType => {
+  switch (javaType) {
+    case "integer":
+      return "number";
+    case "boolean":
+      return "switch";
+    case "string":
+      return "input";
+    default:
+      return javaType;
+  }
+};
+
+export const initForm = options => {
+  const { url, form } = options;
+  getData().then(swaggerData => {
+    const entity = swaggerData.paths[url].post;
+    // 添加title
+    // if (!form.title) form.title = entity.summary;
+    const schema = entity.requestBody.content["application/json"].schema;
+    const properties = schema.properties;
+    // 生成model
+    // 1.循环model，将properties中prop相同的匹配，属性合并，model权限大，properties权限小，且保持响应式
+    form.model.forEach(item => {
+      const property = properties[item.prop];
+      if (property) {
+        Object.assign(item, {
+          prop: item.prop,
+          label: property.description,
+          type: javaTypeToformType(property.type),
+          hidden: false,
+          listeners: () => {},
+          props: {},
+          ...item,
+        });
+      }
+    });
+    //  2.将properties都push到model中（只提取swagger中有的type和description）
+    Object.keys(properties).forEach(key => {
+      const property = properties[key];
+      if (!form.model.find(item => item.prop == key) && property.description) {
+        // 删除对象的某些属性
+        const temp = {
+          prop: key,
+          label: property.description,
+          type: javaTypeToformType(property.type),
+          hidden: false,
+          listeners: () => {},
+          props: {},
+        };
+        form.model.push(temp);
+      }
+    });
+
+    // 校验规则
+    if (schema.required && Array.isArray(schema.required)) {
+      schema.required.forEach(item => {
+        if (!Object.keys(form.rules).includes(item)) {
+          form.rules[item] = [
+            {
+              required: true,
+              message: `${properties[item].description}不能为空`,
+            },
+          ];
+        }
+      });
+    }
+  });
+};