@dypnb/dev-tools 1.0.4 → 1.0.6

package/src/gen-page/template.js

@@ -0,0 +1,568 @@
+import { strCase }  from "../utils/index.js";
+
+// template.js
+export default {
+  tablePageTemplate: (config = {}) => {
+    const { name } = config;
+    const titlCease = strCase(name);
+    return `<template>
+  <div class="app-container">
+    <CoustomTable
+      :queryFormJson="queryFormJson"
+      :pageButtonsJson="pageButtonsJson"
+      :tableJson="tableJson"
+      :tableData="tableData"
+      @onPageButton="handlerPageButton"
+      @onButton="handlerButton"
+      @onSearch="handlerSearch"
+      @onTableRowClick="handlerTableRowClick"
+    >
+    </CoustomTable>
+
+    <CoustomFormDialog
+      ref="formDialog"
+      :visible.sync="dialogVisible"
+      :dialogJson="dialogJson"
+      :initData="initFormData"
+      @onSubmit="handlerSubmit"
+    ></CoustomFormDialog>
+  </div>
+</template>
+<script>
+import CoustomTable from "@/components/CoustomTable";
+import CoustomFormDialog from "@/components/CoustomFormDialog";
+import { TableJson, QueryFormJson, PageButtonsJson, DialogJson } from "./constants";
+import { 
+  getDevApiIotClassesList, 
+  postDevApiIotClasses, 
+  getDevApiIotClassesClassId, 
+  deleteDevApiIotClassesClassId,
+  putDevApiIotClasses
+ } from "@/api/iot/classes-controller.js";
+ import {
+  getDevApiIotPackagesList,
+} from "@/api/iot/packages-controller.js";
+export default {
+  name: '${titlCease}',
+  components: {
+    CoustomTable,
+    CoustomFormDialog
+  },
+  data() {
+    return {
+      queryFormJson: QueryFormJson,
+      pageButtonsJson: PageButtonsJson,
+      tableJson: TableJson,
+      dialogJson: DialogJson,
+      tableData: [],
+      // 总条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      dialogVisible: false,
+      initFormData: {},
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.getList();
+  },
+  computed: {
+    packageName() {
+      const { query } = this.$route;
+      return query.packageName
+    }
+  },
+  methods: {
+    async getPackageData() {
+      try {
+        const { rows = [] } = await getDevApiIotPackagesList();
+        return rows.map(item => {
+          return {
+            value: item.packageCode,
+            label: item.packageDispname,
+          }
+        })
+      } catch (error) {
+        return []
+      }
+    },
+
+    async handlerSubmit(formData) {
+      let params = {
+        ...formData,
+        packageName: this.packageName
+      };
+      let msgText = '新增';
+      let func = postDevApiIotClasses;
+      if (this.dialogJson.type === 'Edit') {
+        params.classId = this.initFormData.classId;
+        msgText = '编辑';
+        func = putDevApiIotClasses;
+      }
+      try {
+        const { code } = await func(params);
+        if (code === 200) {
+          this.dialogVisible = false;
+          this.getList();
+          this.$modal.msgSuccess(msgText + "成功");
+        }
+        this.$refs.formDialog.resetLoading();
+      } catch (error) {
+        // 接口调用失败重置 loading
+        this.$refs.formDialog.resetLoading();
+      }
+    },
+
+    /** 查询表集合 */
+    getList(queryParams = {}) {
+      this.loading = true;
+      let queryData = {
+        ...queryParams,
+        ...this.queryParams,
+        packageName: this.packageName
+      }
+      getDevApiIotClassesList(queryData).then(response => {
+        this.tableData = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+
+    handlerTableRowClick(item) {
+      console.log('object :>>item ', item);
+      this.$router.push({
+        path: '/iot/packages/classes/detail',
+        query: {
+          classId: item.classId
+        }
+      })
+    },
+
+    // 搜索事件
+    handlerSearch(searchParams) {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+      },
+        this.getList(searchParams);
+    },
+
+    //新增按钮事件
+    async handlerPageButton(item) {
+      const { type } = item;
+      if (type === 'Add') {
+        this.initFormData = {};
+        this.dialogJson.type = 'Add';
+        const packageData = await this.getPackageData()
+        this.$set(this.dialogJson.formJson.formItemJson[0], 'option',packageData )
+          console.log('object :>> ', this.dialogJson);
+        this.dialogVisible = true;
+      }
+
+      if (type === 'Delete') {
+        const tableIds = row.tableId || this.ids;
+        this.$modal.confirm('是否确认删除表编号为"' + tableIds + '"的数据项？').then(function () {
+          return delTable(tableIds);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => { });
+      }
+    },
+
+    async getInfo(id) {
+      const { code, data } = await getDevApiIotClassesClassId(id);
+      if (code === 200) {
+
+        this.initFormData = data;
+        this.dialogJson.type = 'Edit';
+        this.dialogVisible = true;
+      }
+    },
+
+    deleteItem(id) {
+      this.$modal.confirm('是否确认删除该数据项？').then(function () {
+        return deleteDevApiIotClassesClassId(id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => { });
+    },
+
+    handlerButton(btnItem) {
+      const { row, item } = btnItem;
+      const { type } = item;
+      if (type === 'Edit') {
+        this.getInfo(row.classId);
+      }
+
+      if (type === 'Delete') {
+        this.deleteItem(row.classId);
+      }
+    },
+  },
+}
+</script>
+<style scoped lang='scss'></style>`
+  },
+
+  constantsTemplate: () => {
+    return `export const QueryFormJson = {
+  formOption: {
+    inline: true,
+    labelWidth: "100px",
+    size: 'small',
+  },
+  formItemJson: [
+    {
+      label: "类中文名称",
+      prop: "classDispname",
+      type: "Input",
+      isEnter: true,
+      options: {
+        clearable: true,
+        placeholder: '请输入类名称',
+      }
+    }
+  ],
+  buttonJson: {
+    type: 'Search',
+    list: [
+      {
+        label: "搜索",
+        type: 'Query',
+        options: {
+          icon: "el-icon-search",
+          size: "mini",
+          type: "primary"
+        }
+      },
+      {
+        label: "重置",
+        type: 'Reset',
+        options: {
+          icon: "el-icon-refresh",
+          size: "mini",
+        }
+      },
+    ]
+
+  }
+}
+
+export const PageButtonsJson = {
+  rowJson: {
+    gutter: 10,
+  },
+  buttonList: [
+    {
+      span: 1.5,
+      label: '新增',
+      permi: '',
+      type: 'Add',
+      options: [
+        {
+          icon: "el-icon-plus",
+          plain: true,
+          size: "mini",
+          type: "primary",
+        },
+        
+      ]
+    }
+  ]
+}
+
+export const TableJson = {
+  columnJson: {
+    showSelect: false,
+    showIndex: true,
+    data: [
+      {
+        type: "index",
+        width: "55",
+        align: "left",
+        headerAlign: "left",
+        label: "序号" 
+      },
+      {
+        align: "left",
+        headerAlign: "left",
+        label: "类中文名称",
+        prop: "classDispname",
+        showOverflowTooltip: true,
+        isLink: true,
+      },
+      {
+        align: "left",
+        headerAlign: "left",
+        label: "类英文名称",
+        prop: "classCode",
+        showOverflowTooltip: true,
+      },
+      {
+        align: "left",
+        headerAlign: "left",
+        label: "类类型",
+        prop: "classesType",
+        showOverflowTooltip: true,
+      },
+      {
+        align: "left",
+        headerAlign: "left",
+        label: "访问类型",
+        prop: "accessType",
+        showOverflowTooltip: true,
+      },
+      {
+        align: "left",
+        headerAlign: "left",
+        label: "实例存储表名称",
+        prop: "delFlag",
+        showOverflowTooltip: true,
+      },
+      {
+        align: "left",
+        headerAlign: "left",
+        label: "备注",
+        prop: "remark",
+        showOverflowTooltip: true,
+      },
+      {
+        align: "left",
+        headerAlign: "left",
+        label: "创建时间",
+        prop: "createTime",
+        showOverflowTooltip: true,
+      },
+      {
+        align: "center",
+        headerAlign: "center",
+        label: "操作",
+        type: "func",
+        buttonList: [
+          {
+            label: "编辑",
+            type: 'Edit',
+            permi: '',
+            options: {
+              icon: "el-icon-edit",
+              size: "mini",
+              type: "text",
+            }
+          },
+          {
+            label: "删除",
+            type: 'Delete',
+            permi: '',
+            options: {
+              icon: "el-icon-delete",
+              size: "mini",
+              type: "text",
+            }
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export const DialogJson = {
+  type: 'Add',
+  title: "类",
+  options: {
+    width: "600px",
+    appendToBody: true,
+    destroyOnClose: true,
+    closeOnClickModal: false,
+  },
+  buttonList: [
+    {
+      label: "确定",
+      type: 'Ok',
+      permi: '',
+      options: {
+        type: "primary",
+      }
+    },
+    {
+      label: "取消",
+      type: 'Cancel',
+      permi: '',
+      options: {
+        type: "",
+      }
+    },
+  ],
+  formJson: {
+    // 表单设置
+    formOption: {
+      inline: false,
+      labelWidth: "120px",
+      size: 'small',
+    },
+    // 表单项
+    formItemJson: [
+      // {
+      //   label: "包编码",
+      //   prop: "packageCode",
+      //   type: "Select",
+      //   rules: [{ required: true, message: "请选择包编码", trigger: "change" }],
+      //   options: {
+      //     clearable: true,
+      //     placeholder: "请选择包编码",
+      //   },
+      //   option: [],
+      // },
+      {
+        label: "类中文名称",
+        prop: "classDispname",
+        type: "Input",
+        rules: [
+          { required: true, message: '请输入类中文名称', trigger: 'blur' },
+        ],
+        options: {
+          clearable: true,
+          placeholder: '请输入类中文名称',
+        }
+      },
+      {
+        label: "类英文名称",
+        prop: "className",
+        type: "Input",
+        rules: [
+          { required: true, message: '请输入类英文名称', trigger: 'blur' },
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              const reg = /^[a-zA-Z]{1}\w*$/;
+              if (!reg.test(value)) {
+                callback(
+                  new Error(
+                    "请输入以字母(不区分大小写)、数字、下划线(_)随意组合的字符串"
+                  )
+                );
+              }
+              callback();
+            },
+            trigger: ["blur"],
+          },
+        ],
+        options: {
+          clearable: true,
+          placeholder: '请输入类英文名称',
+        }
+      },
+      {
+        label: "类类型",
+        prop: "classesType",
+        type: "Select",
+        rules: [{ required: true, message: "请选择类类型", trigger: "change" }],
+        options: {
+          clearable: true,
+          placeholder: "请选择类型",
+        },
+        option: [
+          {
+            value: '继承',
+            label: '继承',
+          },
+          {
+            value: '虚类',
+            label: '虚类',
+          },
+          {
+            value: '实体类',
+            label: '实体类',
+          },
+        ],
+      },
+      {
+        label: "继承父类code",
+        prop: "classesExtends",
+        type: "Input",
+        rules: [
+          { required: true, message: '请输入继承父类code', trigger: 'blur' },
+        ],
+        options: {
+          clearable: true,
+          placeholder: '请输入继承父类code',
+        }
+      },
+      {
+        label: "访问类型",
+        prop: "accessType",
+        type: "Select",
+        rules: [{ required: true, message: "请选择访问类型", trigger: "change" }],
+        options: {
+          clearable: true,
+          placeholder: "请选择访问类型",
+        },
+        option: [
+          {
+            value: 'default',
+            label: 'default',
+          },
+          {
+            value: 'public',
+            label: 'public',
+          },
+          {
+            value: 'protected',
+            label: 'protected',
+          },
+          {
+            value: 'private',
+            label: 'private',
+          },
+        ],
+      },
+      {
+        label: "实例存储表名称",
+        prop: "objTableName",
+        type: "Input",
+        rules: [
+          { required: true, message: '请输入实例存储表名称', trigger: 'blur' },
+        ],
+        options: {
+          clearable: true,
+          placeholder: '请输入实例存储表名称',
+        }
+      },
+      {
+        label: "视图样式",
+        prop: "viewStyle",
+        type: "Input",
+        rules: [
+          { required: false, message: '请输入视图样式', trigger: 'blur' },
+        ],
+        options: {
+          clearable: true,
+          placeholder: '请输入视图样式',
+        }
+      },
+      {
+        label: "备注",
+        prop: "remark",
+        type: "Input",
+        rules: [],
+        options: {
+          clearable: true,
+          placeholder: '请输入备注',
+          type: 'textarea',
+          row: 4
+        }
+      },
+    ],
+  }
+
+}`
+  }
+}
+
+