@zhijiancloud/bpm 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# CHANGELOG
+
+## 202311 首次支持表单字段组件
+
+表单字段：
+
+- bpmField: 表单字段组件，组件内自行判别对应实现
+- bpmText: Text, TextArea, SerialNumber
+- BpmNumber: Number
+- bpmDateTime: Date, DateTime
+- bpmTime: Time
+- bpmSelect: Select, MulSelect, Status
+- bpmSelectCheckItem: SelectCheckItem, MulSelectCheckItem, SelectSort, MulSelectSort
+- bpmSelectFromField: SelectFromField, MulSelectFromField, SelectUser, MulSelectUser, SelectUrUser, MulSelectUrUser, SelectPartner, MulSelectPartner, SelectProject, MulSelectProject, SelectOrg, MulSelectOrg
+- bpmSelectFromForm: SelectFromForm, MulSelectFromForm
+- bpmSelectFromId: SelectFromId, MulSelectFromId
+- bpmMulImage: MulImage, Signature
+- bpmMulFile: MulFile
+- bpmSubForm: SubForm, XSubForm, OrderSubForm
+
+consts字段常量，前端使用：
+
+- bpmConsts.FORM_FIELDS_MAP

package/README.md

@@ -1,24 +1,68 @@
-# bpm2
+# zhijiancloud-ui-bpm
 
 ## Project setup
-```
+
+```bash
 yarn install
 ```
 
 ### Compiles and hot-reloads for development
-```
+
+```bash
 yarn serve
 ```
 
+开发模式默认入口为examples/main.ts, 开发模式走的vue-cli,见package.json
+
 ### Compiles and minifies for production
-```
+
+```bash
 yarn build
 ```
 
+build是build组件库，编译走的是webpack和gulp, 见package.json
+
 ### Lints and fixes files
-```
+
+```bash
 yarn lint
 ```
 
+### 文档vuepress
+
+```bash
+yarn docs:dev
+yarn docs:build
+```
+
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+## eslint
+
+项目已加入了eslint代码检查，具体规则配置在 package.json - eslintConfig, 具体规则要修改，见eslint文档
+
+主动执行eslint代码检查：`yarn lint`
+
+### 开发时代码检查
+
+默认代码保存时不检查，如需要开启，可在vue.config.js修改：
+
+```bash
+# vue.config.js
+# https://cli.vuejs.org/zh/config/#lintonsave
+# 当前为false
+lintOnSave: true
+```
+
+### 提交代码前检查代码
+
+由于并不会每次记得主动运行代码检查，项目中添加了commit代码时自动检查有更改的文件。
+借助vue-cli内置的yorkie, 以及lint-staged实现，具体可见：[git hooks](https://cli.vuejs.org/zh/guide/cli-service.html#git-hook), 相关内容可自行搜索git hooks, husky, yorkie, eslint, lint-stage等内容了解。
+
+[lint-stage](https://www.npmjs.com/package/lint-staged), 当前装的版本是13.0.0, 见其版本说明，新版本14，15对node的版本比较高要求，13.0.0则要求node版本至少为：14.13.1, or 16.0.0
+
+每次commit代码时，会对有更改的文件跑lint检查，以保证代码的规范性。
+
+如极个别特殊情况，需要跳过git hooks检查，可：`git commit -m 'xxx' --no-verify`

package/components/css/bpmMulFile.less

@@ -0,0 +1,54 @@
+.bpm-mul-file-reader, .bpm-mul-file-edit, .bpm-mul-image-reader, .bpm-mul-image-edit{
+    .file-box{
+        overflow: hidden;
+        margin-top: 10px;
+        max-width: 360px;
+        padding: 0 6px;
+        display: flex;
+        &:hover{
+            background: #EFF2F7;
+            border-radius: 4px;
+        }
+        &>*{
+            float: left;
+        }
+        .file-content{
+            height: 20px;
+            margin-top: 5px;
+            
+        }
+        .file-link{
+            margin-top: 5px;
+            margin-left: 5px;
+            max-width: 266px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+    .file-remove, .operation-box{
+        float: right;
+        font-weight: 400;
+        font-size: 12px;
+        color: #246AE3;
+        line-height: 14px;
+        margin: 10px 0 0 20px;
+        cursor: pointer;
+        
+    }
+
+}
+.bpm-mul-file-reader, .bpm-mul-image-reader{
+    .text-faded{
+        margin-top: 4px;
+    }
+    .file-icon{
+        height: 20px;
+        margin-top: 4px;
+    }
+}
+img{
+    display: block;
+    height: 100%;
+    width: auto;
+}

package/components/css/bpmSelectCheckItem.less

@@ -0,0 +1,4 @@
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover
+{
+    background: none!important;
+}

package/components/css/bpmSelectFromForm.less

@@ -0,0 +1,10 @@
+.bpm-select-from-form-box{
+    list-style: none;
+    padding: 0;
+    padding: 10px 0;
+    .form-item{
+        list-style: none;
+        margin-bottom: 10px;
+
+    }
+}

package/components/css/bpmSelectFromId.less

@@ -0,0 +1,33 @@
+
+    .select-box{
+        display: flex;
+        .select-box-left{
+            width: 200px;
+            .title{
+                margin-bottom: 10px;
+            }
+        }
+        .select-box-right{
+            flex: 1;
+            padding-left: 20px;
+            .title{
+                margin-bottom: 10px;
+            }
+        }
+    } 
+    .select-app,.select-app-item, .select-form, .select-form-item{
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        margin-bottom: 10px;
+    }  
+    .select-app, .select-form{
+        padding: 10px;
+        .select-app-item{
+            cursor: pointer;
+        }
+    }
+
+    .select-app-item.active{
+        color: #409EFF;
+    }

package/components/css/bpmText.less

@@ -0,0 +1,49 @@
+
+.bpm-text-edit{
+    .prefab-words {
+    padding-top: 10px;
+    ul,
+    li {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+  
+    ul {
+      overflow: hidden;
+      margin-top: 5px;
+    }
+  
+    li {
+      float: left;
+      min-height: 28px;
+      line-height: 28px;
+      cursor: pointer;
+      min-width: 50px;
+      font-size: 14px;
+      padding: 0 10px;
+      margin-right: 10px;
+      border: 1px solid #DCDCDC;
+      border-radius: 100px;
+      color: #666666;
+      text-align: center;
+      margin-bottom: 5px;
+    }
+  
+    li.active {
+      background: #1EAAD0;
+      border: 1px solid #1EAAD0;
+      color: #fff;
+    }
+  }
+  }
+
+
+.bpm-text-view.table-text-view {
+    word-break: break-all;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+}

package/components/css/demo2.less

@@ -0,0 +1,3 @@
+.m-demo{
+    color: red;
+}

package/components/css/index.less

@@ -0,0 +1,3 @@
+@import './demo.less';
+@import './demo2.less';
+@import './bpmText.less';

package/components/lib/bpmDateTime/index.js

@@ -0,0 +1,7 @@
+import BpmDateTime from './src/main.vue'
+
+BpmDateTime.install = function(Vue) {
+    Vue.component(BpmDateTime.name , BpmDateTime);
+}
+
+export default BpmDateTime

package/components/lib/bpmDateTime/src/main.vue

@@ -0,0 +1,82 @@
+<template>
+  <component
+    class="bpm-select"
+    v-model="curVal"
+    :is="curComponent"
+    :fieldConf="fieldConf"
+    :row="row"
+    :mode="mode"
+    :uiType="uiType"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+  </component>
+</template>
+<script>
+import editorComponent from "./part/editor.vue";
+import readerComponent from "./part/reader.vue";
+
+export default {
+  name: "BpmDateTime",
+  components: {
+    editorComponent,
+    readerComponent
+  },
+  props: {
+    value: {
+      type: [String, Number],
+      
+    },
+    fieldConf: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    row: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    mode: {
+      type: String,
+      default() {
+        return "view";
+      },
+    },
+    uiType: {
+      type: String,
+      default() {
+        return "default";
+      },
+    },
+  },
+  computed: {
+    curComponent() {
+      if (this.mode == "view") {
+        return readerComponent;
+      } else {
+        return editorComponent;
+      }
+    },
+  },
+  data() {
+    return {
+      curVal: "",
+    };
+  },
+  watch: {
+    curVal(val) {
+      this.$emit("input", val);
+      this.$emit("change", val);
+    },
+    value() {
+      this.curVal = this.value;
+    },
+  },
+  mounted() {
+    this.curVal = this.value;
+  },
+};
+</script>

package/components/lib/bpmDateTime/src/part/editor.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="bpm-date-time-edit">
+    <el-date-picker
+      v-model="curVal"
+      :format="format"
+      :picker-options="pickerOptions"
+      :value-format="checkFormat"
+      :type="type"
+      :default-value="defaultVal"
+    >
+    </el-date-picker>
+  </div>
+</template>
+
+
+<script>
+import _ from "lodash";
+
+import Vue from "vue";
+
+import { DatePicker } from "element-ui";
+
+Vue.use(DatePicker);
+
+export default {
+  data() {
+    let that = this;
+    return {
+      curVal: "",
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() <= that.max && date.getTime() >= that.min;
+        },
+      },
+    };
+  },
+  props: ["value", "fieldConf", "row"],
+  watch: {
+    curVal(val) {
+      console.log("val", val, this.checkFormat)
+      this.$emit("input", val);
+    },
+    value(){
+        this.curVal = this.value
+    }
+  },
+  computed: {
+    type() {
+      let type = _.toLower(_.get(this.fieldConf, "type"));
+      return this.isMonth ? "month" : type;
+    },
+    isMonth() {
+      let rangeType = _.get(this.fieldConf, "range_type");
+      return rangeType == "C1M";
+    },
+    format() {
+      let format = _.get(this.fieldConf, "view.format")
+      if(format){
+        format = format.replaceAll('Y', 'y')
+        format = format.replaceAll('D', 'd')
+      }
+      return format
+    },
+    max() {
+      let date = this.analyzeLimit("tmax");
+      return date;
+    },
+    min() {
+      let date = this.analyzeLimit("tmin");
+      return date;
+    },
+    checkFormat() {
+      let format = _.get(this.fieldConf, "check.format")
+      if(format){
+        format = format.replaceAll('Y', 'y')
+        format = format.replaceAll('D', 'd')
+      }
+      return format;
+    },
+    defaultVal() {
+      return new Date();
+    }
+  },
+  mounted() {
+    this.curVal = this.value;
+  },
+  methods: {
+    analyzeLimit(type) {
+      let data = _.get(this.fieldConf, `check.${type}`);
+      if (!data) return;
+      let result = null;
+      let now = new Date().getTime();
+      switch (data.type) {
+        case "LimitDateOffset":
+          var delta = data.offset_days;
+          result = this.deltaToDate(now, delta);
+          break;
+        case "LimitDateOffsetByField":
+          var delta_1 = data.offset_days;
+          var value = this.value;
+          if (!value) return 0;
+          result = this.deltaToDate(value, delta_1);
+          break;
+        case "LimitDateByValue":
+          var date = data.value;
+          date = new Date(date).getTime();
+          this.deltaToDate(date, 0);
+          break;
+        default:
+          break;
+      }
+      return result;
+    },
+    deltaToDate(date, delta) {
+      // 获得 和今天的偏差天数对应的 date
+      date = new Date(date)
+      let days = date.getDate() + delta
+      date.setDate(days)
+      return date
+    }
+  },
+};
+</script>
+

package/components/lib/bpmDateTime/src/part/reader.vue

@@ -0,0 +1,55 @@
+<template>
+  <span :title="dateTimeStr">{{ dateTimeStr }}</span>
+</template>
+
+<script>
+import _ from "lodash";
+import fecha from "fecha"
+import {isMobile} from "../../../utils"
+
+export default {
+  props: ["value", "fieldConf", "row"],
+  data() {
+    return {
+      dateTimeStr: "",
+    };
+  },
+  computed: {
+    format() {
+      let format = _.get(this.fieldConf, "view.format")
+      return format
+    },
+  },
+  watch: {
+    ["value"]() {
+      this.dateTimeStr = this.formatViewTime();
+    },
+  },
+  mounted() {
+    this.dateTimeStr = this.formatViewTime();
+  },
+  methods: {
+    formatViewTime() {
+      let time = this.value;
+      if (!time) return "";
+      if (_.isInteger(time)) {
+        let timeStr = _.toString(time);
+        if (timeStr.length != 13) time = time * 1000;
+      }
+      let timeStamp;
+      if (isMobile()) {
+        time = time.replace(/-/g, "/");
+        time = time.replace(/T/g, " ");
+        time = time.padEnd(10, "/01/01");
+        timeStamp = new Date(time).getTime();
+      } else {
+        timeStamp = new Date(time).getTime();
+      }
+
+      let formattedString = fecha.format(timeStamp, this.format);
+      return formattedString;
+    },
+    
+  },
+};
+</script>

package/components/lib/bpmField/index.js

@@ -0,0 +1,7 @@
+import BpmField from './src/main.vue'
+
+BpmField.install = function(Vue) {
+    Vue.component(BpmField.name , BpmField);
+}
+
+export default BpmField