tianheng-ui 0.0.65 → 0.0.68

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.0.65",
+  "version": "0.0.68",
   "author": "shu lang <403732931@qq.com>",
   "license": "MIT",
   "private": false,
   "main": "./lib/tianheng-ui.js",
   "style": "lib/theme-chalk/index.css",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "build": "cross-env NODE_ENV=preview webpack --progress --hide-modules",
-    "build:npm": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --mode=development",
+    "build": "cross-env NODE_ENV=preview webpack --progress --hide-modules --mode=production",
+    "build:npm": "cross-env NODE_ENV=production webpack --progress --hide-modules --mode=production"
   },
   "dependencies": {
     "ace-builds": "^1.4.13",
@@ -53,6 +53,7 @@
     "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
     "@vue/babel-preset-jsx": "^1.4.0",
     "babel-loader": "^8.2.5",
+    "babel-plugin-component": "^1.1.1",
     "babel-plugin-import": "^1.13.5",
     "bpmn-js": "^8.8.3",
     "bpmn-js-properties-panel": "^0.37.2",

package/packages/Button/index.vue

@@ -77,4 +77,4 @@ export default {
     }
   }
 };
-</script>
+</script>

package/packages/Cell/index.vue

@@ -65,4 +65,4 @@ export default {
     }
   }
 };
-</script>
+</script>

package/packages/Col/index.js

@@ -5,4 +5,4 @@ Col.install = function(Vue) {
   Vue.component(Col.name, Col);
 };
 
-export default Col;
+export default Col;

package/packages/Col/index.vue

@@ -8,7 +8,7 @@
 export default {
   name: "ThCol",
   props: {
-    span: { type: Number, default: 24 },
+    span: { type: Number | String, default: 24 },
     offset: Number
   },
   computed: {
@@ -38,4 +38,6 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss">
+@import "../../lib/theme-chalk/styles/col.scss";
+</style>

package/packages/FormMaking/Container.vue

@@ -111,7 +111,11 @@
                 ></i>
               </div>
               <slot name="action"> </slot>
-              <el-popover placement="top" trigger="hover" style="margin:0 10px;">
+              <el-popover
+                placement="top"
+                trigger="hover"
+                style="margin:0 10px;"
+              >
                 <el-button
                   type="text"
                   size="medium"
@@ -508,6 +512,14 @@ export default {
       return list;
     }
   },
+  watch: {
+    widgetFormData: {
+      deep: true,
+      handler: function(val) {
+        // console.log(this.$refs.widgetForm);
+      }
+    }
+  },
   mounted() {},
   methods: {
     // 读取excel file
@@ -594,25 +606,36 @@ export default {
 
             const colKey =
               Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-            const col1 = colsDom[i];
-            const col2 = colsDom[i + 1];
-            if (!col1.innerText && !col2.innerText) continue;
+            const titleDom = colsDom[i];
+            const valueDom = colsDom[i + 1];
+            if (!titleDom.innerText && !valueDom.innerText) continue;
 
-            if (colsDom[i + 1]) {
-              span = ((col1.colSpan || 1) + (col2.colSpan || 1)) * colSpan;
+            if (valueDom) {
+              span =
+                ((titleDom.colSpan || 1) + (valueDom.colSpan || 1)) * colSpan;
 
               const data = this.getComponentsConfig("input");
-              data.name = col1.innerText;
-              data.options.defaultValue = col2.innerText;
+              let name = titleDom.innerText;
+              if (name.charAt(0) === "*") {
+                name = name.slice(1)
+                data.options.required = true;
+                data.rules = data.rules || []
+                data.rules.push({
+                  required: true,
+                  message: "单行文本必须填写"
+                });
+              }
+              data.name = name;
+              data.options.defaultValue = valueDom.innerText;
               data.key = colKey;
               data.model = "input_" + colKey;
               grid.columns.push({ span: span, list: [data] });
             } else {
-              span = col1.colSpan * colSpan;
+              span = titleDom.colSpan * colSpan;
 
               const data = this.getComponentsConfig("text");
-              data.name = col1.innerText;
-              data.options.defaultValue = col1.innerText;
+              data.name = titleDom.innerText;
+              data.options.defaultValue = titleDom.innerText;
               data.options.hideLabel = true;
               data.key = colKey;
               data.model = "text_" + colKey;
@@ -742,14 +765,6 @@ export default {
     handleDataChange(field, value, data) {
       // console.log(field, value, data);
     }
-  },
-  watch: {
-    widgetFormData: {
-      deep: true,
-      handler: function(val) {
-        // console.log(this.$refs.widgetForm);
-      }
-    }
   }
 };
 </script>

package/packages/FormMaking/custom/config.js

@@ -29,7 +29,8 @@ export const basicComponents = [
       onChange: "",
       onFocus: "",
       onBlur: ""
-    }
+    },
+    rules: []
   },
   {
     name: "多行文本",

package/packages/FormMaking/generate.js

@@ -0,0 +1,5 @@
+import FormGenerate from "./GenerateForm.vue";
+FormGenerate.install = function(Vue) {
+  Vue.component(FormGenerate.name, FormGenerate);
+};
+export default FormGenerate;

package/packages/FormMaking/index.js

@@ -3,17 +3,17 @@ import "./iconfont/iconfont.css";
 import "./styles/cover.scss";
 import "./styles/index.scss";
 
-import MakingForm from "./Container.vue";
-MakingForm.install = function(Vue) {
-  Vue.component(MakingForm.name, MakingForm);
+import FormMaking from "./Container.vue";
+FormMaking.install = function(Vue) {
+  Vue.component(FormMaking.name, FormMaking);
 };
 
-import GenerateForm from "./GenerateForm.vue";
-GenerateForm.install = function(Vue) {
-  Vue.component(GenerateForm.name, GenerateForm);
+import FormGenerate from "./GenerateForm.vue";
+FormGenerate.install = function(Vue) {
+  Vue.component(FormGenerate.name, FormGenerate);
 };
 
-const components = [MakingForm, GenerateForm];
+const components = [FormMaking, FormGenerate];
 const install = function(Vue) {
   components.forEach(component => {
     Vue.component(component.name, component);
@@ -24,10 +24,10 @@ if (typeof window !== "undefined" && window.Vue) {
   install(window.Vue);
 }
 
-export { install, MakingForm, GenerateForm };
+export { install, FormMaking, FormGenerate };
 
 export default {
   install,
-  MakingForm,
-  GenerateForm
+  FormMaking,
+  FormGenerate
 };

package/packages/FormMaking/making.js

@@ -0,0 +1,9 @@
+import "normalize.css/normalize.css";
+import "./iconfont/iconfont.css";
+import "./styles/cover.scss";
+import "./styles/index.scss";
+import FormMaking from "./Container.vue";
+FormMaking.install = function(Vue) {
+  Vue.component(FormMaking.name, FormMaking);
+};
+export default FormMaking;

package/packages/Grid/index.js

@@ -0,0 +1,8 @@
+import Grid from "./index.vue";
+
+/* istanbul ignore next */
+Grid.install = function(Vue) {
+  Vue.component(Grid.name, Grid);
+};
+
+export default Grid;

package/packages/Grid/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="th-grid">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ThGrid",
+  props: {
+    column: Number | String
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {}
+};
+</script>

package/packages/GridItem/index.js

@@ -0,0 +1,8 @@
+import GridItem from "./index.vue";
+
+/* istanbul ignore next */
+GridItem.install = function(Vue) {
+  Vue.component(GridItem.name, Grid);
+};
+
+export default GridItem;

package/packages/GridItem/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="th-grid-item" :style="selfStyle">
+    <slot v-if="$slots.default"></slot>
+    <div v-else class="th-grid-item-content">
+      <i v-if="isIcon" :class="['th-icon',icon]"></i>
+      <img v-else class="th-grid-item-img" src="" alt="" />
+      <p class="th-grid-item-title">{{ title }}</p>
+      <p class="th-grid-item-label">{{ label }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ThGridItem",
+  props: {
+    title: String,
+    label: String,
+    icon: String
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    isIcon() {
+      if (this.icon && this.icon.substring(0, 4) === "http") return false;
+      else return true;
+    },
+    selfStyle() {
+      let parent = this.$parent;
+      while (parent && parent.$options.name !== "ThGrid") {
+        parent = parent.$parent;
+      }
+
+      let column = 0;
+      if (parent) column = parent.column;
+
+      const style = {};
+      if (column) {
+        style.flex = 'none'
+        style.flexBasis = `${100 / column}%`;
+      }
+      return style;
+    }
+  },
+  mounted() {},
+  methods: {}
+};
+</script>

package/packages/Row/index.vue

@@ -31,5 +31,3 @@ export default {
   }
 };
 </script>
-
-<style></style>

package/packages/Table/index.vue

@@ -216,7 +216,7 @@ export default {
     handleSizeChange(val) {
       this.pageInfo.pageSize = val;
       this.$emit(
-        "page-number-change",
+        "pagination-change",
         this.pageInfo.currentPage,
         this.pageInfo.pageSize
       );
@@ -225,7 +225,7 @@ export default {
     handleCurrentChange(val) {
       this.pageInfo.currentPage = val;
       this.$emit(
-        "page-number-change",
+        "pagination-change",
         this.pageInfo.currentPage,
         this.pageInfo.pageSize
       );
@@ -235,7 +235,7 @@ export default {
       if (this.pageInfo.currentPage === 1) return;
       this.pageInfo.currentPage -= 1;
       this.$emit(
-        "page-number-change",
+        "pagination-change",
         this.pageInfo.currentPage,
         this.pageInfo.pageSize
       );
@@ -245,7 +245,7 @@ export default {
       if (this.pageInfo.currentPage === this.pageInfo.pageCount) return;
       this.pageInfo.currentPage += 1;
       this.$emit(
-        "page-number-change",
+        "pagination-change",
         this.pageInfo.currentPage,
         this.pageInfo.pageSize
       );

package/packages/VueEditor/index.js

@@ -0,0 +1,8 @@
+import VueEditor from "./index.vue";
+
+/* istanbul ignore next */
+VueEditor.install = function(Vue) {
+  Vue.component(VueEditor.name, VueEditor);
+};
+
+export default VueEditor;

package/packages/VueEditor/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <vue-editor v-model="data" :disabled="disabled"> </vue-editor>
+</template>
+
+<script>
+import { VueEditor } from "vue2-editor";
+export default {
+  name: "ThVueEditor",
+  components: { VueEditor },
+  model: {
+    prop: "value",
+    event: "uploadValue"
+  },
+  props: {
+    value: String,
+    disabled: String
+  },
+  data() {
+    return {
+      data: this.value
+    };
+  },
+  watch: {
+    data(val) {
+      this.$emit("uploadValue", val);
+    }
+  }
+};
+</script>
+
+<style></style>

package/packages/Workflow/index.js

@@ -3,24 +3,32 @@ import "bpmn-js/dist/assets/diagram-js.css";
 import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
 import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
 
-import MyProcessDesigner from "./designer";
-import MyProcessPalette from "./palette";
-import MyProcessPenal from "./penal";
+// import MyProcessDesigner from "./designer";
+// import MyProcessPalette from "./palette";
+// import MyProcessPenal from "./penal";
 
-const components = [MyProcessDesigner, MyProcessPenal, MyProcessPalette];
+// const components = [MyProcessDesigner, MyProcessPenal, MyProcessPalette];
 
-const install = function(Vue) {
-  components.forEach(component => {
-    Vue.component(component.name, component);
-  });
-};
+// const install = function(Vue) {
+//   components.forEach(component => {
+//     Vue.component(component.name, component);
+//   });
+// };
+
+// if (typeof window !== "undefined" && window.Vue) {
+//   install(window.Vue);
+// }
 
-if (typeof window !== "undefined" && window.Vue) {
-  install(window.Vue);
-}
+// export default {
+//   version: "0.0.1",
+//   install,
+//   ...components
+// };
 
-export default {
-  version: "0.0.1",
-  install,
-  ...components
+import Workflow from "./index.vue";
+
+Workflow.install = function(Vue) {
+  Vue.component(Workflow.name, Workflow);
 };
+
+export default Workflow;

package/packages/Workflow/index.vue

@@ -21,7 +21,7 @@
         }
       "
     />
-    <my-properties-panel
+    <my-process-panel
       :key="`penal-${reloadIndex}`"
       :bpmn-modeler="modeler"
       :prefix="controlForm.prefix"
@@ -167,9 +167,13 @@ import minimapModule from "diagram-js-minimap";
 // clickoutside
 import clickoutside from "element-ui/lib/utils/clickoutside";
 
+import MyProcessDesigner from "./designer/ProcessDesigner.vue";
+import MyProcessPalette from "./palette/ProcessPalette.vue";
+import MyProcessPanel from "./penal/PropertiesPanel.vue";
+
 export default {
   name: "th-workflow",
-  components: {},
+  components: { MyProcessDesigner, MyProcessPalette, MyProcessPanel },
   directives: {
     clickoutside: clickoutside
   },

package/packages/Workflow/penal/PropertiesPanel.vue

@@ -113,7 +113,6 @@ import Log from "../Log";
  * @Date 2021年3月31日18:57:51
  */
 export default {
-  name: "MyPropertiesPanel",
   components: {
     // UserTaskListeners,
     // ElementForm,
@@ -124,28 +123,27 @@ export default {
     // ElementMultiInstance,
     ElementTask,
     // ElementOtherConfig,
-    ElementBaseInfo,
+    ElementBaseInfo
   },
-  componentName: "MyPropertiesPanel",
   props: {
     bpmnModeler: Object,
     prefix: {
       type: String,
-      default: "camunda",
+      default: "camunda"
     },
     width: {
       type: Number,
-      default: 400,
+      default: 400
     },
     idEditDisabled: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
   provide() {
     return {
       prefix: this.prefix,
-      width: this.width,
+      width: this.width
     };
   },
   data() {
@@ -155,15 +153,15 @@ export default {
       elementType: "",
       elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
       conditionFormVisible: false, // 流转条件设置
-      formVisible: false, // 表单配置
+      formVisible: false // 表单配置
     };
   },
   watch: {
     elementId: {
       handler() {
         this.activeTab = "base";
-      },
-    },
+      }
+    }
   },
   created() {
     this.initModels();
@@ -186,14 +184,14 @@ export default {
         elementFactory: this.bpmnModeler.get("elementFactory"),
         elementRegistry: this.bpmnModeler.get("elementRegistry"),
         replace: this.bpmnModeler.get("replace"),
-        selection: this.bpmnModeler.get("selection"),
+        selection: this.bpmnModeler.get("selection")
       };
       this.getActiveElement();
     },
     getActiveElement() {
       // 初始第一个选中元素 bpmn:Process
       this.initFormOnChanged(null);
-      this.bpmnModeler.on("import.done", (e) => {
+      this.bpmnModeler.on("import.done", e => {
         this.initFormOnChanged(null);
       });
       // 监听选择事件，修改当前激活的元素以及表单
@@ -213,10 +211,10 @@ export default {
       if (!activatedElement) {
         activatedElement =
           window.bpmnInstances.elementRegistry.find(
-            (el) => el.type === "bpmn:Process"
+            el => el.type === "bpmn:Process"
           ) ??
           window.bpmnInstances.elementRegistry.find(
-            (el) => el.type === "bpmn:Collaboration"
+            el => el.type === "bpmn:Collaboration"
           );
       }
       if (!activatedElement) return;
@@ -241,7 +239,7 @@ export default {
     },
     beforeDestroy() {
       window.bpmnInstances = null;
-    },
-  },
+    }
+  }
 };
 </script>

package/packages/index.js

@@ -29,15 +29,19 @@ import TableTools from "./Table/tools.js";
 import Empty from "./Empty/index.js";
 import Dialog from "./Dialog/index.js";
 import Card from "./Card/index.js";
+import Grid from "./Grid/index.js";
+import GridItem from "./GridItem/index.js";
 import CodeEditor from "./CodeEditor/index.js";
+import VueEditor from "./VueEditor/index.js";
 import Button from "./Button/index.js";
 import Image from "./Image/index.js";
 import ImagePreview from "./ImagePreview/index.js";
 import Row from "./Row/index.js";
 import Col from "./Col/index.js";
 import Upload from "./Upload/index.js";
-import { MakingForm, GenerateForm } from "./FormMaking/index.js";
-// import Workflow from "../packages/Workflow/index.js";
+import FormMaking from "./FormMaking/making.js";
+import FormGenerate from "./FormMaking/generate.js";
+import Workflow from "../packages/Workflow/index.js";
 
 const components = [
   Cell,
@@ -49,16 +53,19 @@ const components = [
   Empty,
   Dialog,
   Card,
+  Grid,
+  GridItem,
   CodeEditor,
+  VueEditor,
   Button,
   Image,
   ImagePreview,
   Row,
   Col,
   Upload,
-  MakingForm,
-  GenerateForm
-  // Workflow
+  FormMaking,
+  FormGenerate,
+  Workflow
 ];
 
 const install = function(Vue, opts = {}) {
@@ -79,10 +86,33 @@ if (typeof window !== "undefined" && window.Vue) {
 const version = require("../package.json").version;
 export default {
   version: version,
-  install
+  install,
+  Cell,
+  Icons,
+  Table,
+  TableAction,
+  TableSearch,
+  TableTools,
+  Empty,
+  Dialog,
+  Card,
+  Grid,
+  GridItem,
+  CodeEditor,
+  VueEditor,
+  Button,
+  Image,
+  ImagePreview,
+  Row,
+  Col,
+  Upload,
+  FormMaking,
+  FormGenerate,
+  Workflow
 };
 
 export {
+  install,
   Cell,
   Icons,
   Table,
@@ -92,13 +122,17 @@ export {
   Empty,
   Dialog,
   Card,
+  Grid,
+  GridItem,
   CodeEditor,
+  VueEditor,
   Button,
   Image,
   ImagePreview,
   Row,
   Col,
   Upload,
-  MakingForm,
-  GenerateForm
+  FormMaking,
+  FormGenerate,
+  Workflow
 };