@zhijiancloud/bpm 0.0.6 → 0.0.7

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

@@ -6,8 +6,12 @@
     type="text">查看子表单</el-button>
   <el-table
     v-else
+    v-bind="$attrs"
+    v-on="$listeners"
     :data="subformData"
     :max-height="maxHeight"
+    :show-header="showHeader"
+    :resizable="resizable"
     border stripe
     style="width: 100%;">
     <el-table-column v-for="col in columns"
@@ -22,7 +26,7 @@
           v-model="scope.row[col.id]"
           :type="col.data.type"
           :fieldConf="col.data"
-          :mode="mode"
+          :mode="col.fieldMode"
           uiType="table"
           :formDefId="formDefId"
           :orgInfo="orgInfo"
@@ -38,6 +42,8 @@
     @close="showSubForm = false">
     <div style="max-height: 70vh; overflow: auto;">
       <el-table
+        v-bind="$attrs"
+        v-on="$listeners" 
         :data="subformData"
         :max-height="dialogTableMaxHeight"
         border stripe
@@ -54,7 +60,7 @@
               v-model="scope.row[col.id]"
               :type="col.data.type"
               :fieldConf="col.data"
-              :mode="mode"
+              :mode="col.fieldMode"
               uiType="table"
               :formDefId="formDefId"
               :orgInfo="orgInfo"
@@ -98,6 +104,14 @@ export default {
       type: [Number, String],
       default: 500
     },
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    resizable: {
+      type: Boolean,
+      default: true
+    },
     formDefId: {
       type: String,
       default: ''
@@ -126,7 +140,14 @@ export default {
       const arr = []
       elements.forEach(item => {
         const fieldMap = FORM_FIELDS_MAP[item.type] || {}
-        if (fieldMap.hasBpmField) {
+        const fieldPermission = item.perm || {}
+        if (fieldMap.hasBpmField && fieldPermission.visible) {
+          let mode = this.mode
+          if (mode === 'edit' && fieldPermission.editable && fieldPermission.writable) {
+            mode = 'edit'
+          } else {
+            mode = 'view'
+          }
           arr.push({
             key: item.id,
             id: item.id,
@@ -134,6 +155,7 @@ export default {
             minWidth: fieldMap.tableColWidth || 100,
             sortable: true,
             sortBy: item.id,
+            fieldMode: mode,
             data: item
           })
         }

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

@@ -6,7 +6,8 @@
     format-model="number"
     :format="format"
     :value-format="checkFormat"
-    :clearable="true"
+    :clearable="clearable"
+    :disabled="disabled"
     />
   </div>
 </template>
@@ -27,7 +28,7 @@ export default {
       curVal: ""
     };
   },
-  props: ["value", "fieldConf", "row"],
+  props: ["value", "fieldConf", "row", "clearable", "disabled"],
   watch: {
     curVal(val) {
       this.$emit("input", val);

package/components/lib/field-const.js

@@ -416,6 +416,7 @@ export const FORM_FIELDS_MAP = {
   },
   'MulSelectEntranceForm': {
     name: '远程多项选择(从入口)',
+    hasBpmField: true
   },
   'SelectHouseOwner': {
     name: '业主选择'
@@ -425,11 +426,13 @@ export const FORM_FIELDS_MAP = {
   },
   'MulFile': {
     name: '附件',
-    hasBpmField: true
+    hasBpmField: true,
+    tableColWidth: 150
   },
   'MulImage': {
     name: '图片',
-    hasBpmField: true
+    hasBpmField: true,
+    tableColWidth: 150
   },
   'Signature': {
     name: '签名',

package/components/lib/index.ts

@@ -5,6 +5,7 @@ import BpmNumber from './bpmNumber'
 import BpmDateTime from './bpmDateTime'
 import BpmMulFile from './bpmMulFile'
 import BpmField from './bpmField'
+import BpmFormField from './bpmFormField'
 import BpmSelectCheckItem from './bpmSelectCheckItem'
 import BpmSelectFromField from "./bpmSelectFromField";
 import BpmSelectFromForm from "./bpmSelectFromForm";
@@ -12,6 +13,13 @@ import BpmSelectFromId from "./bpmSelectFromId";
 import BpmMulImage from "./bpmMulImage";
 import BpmSubForm from './bpmSubForm'
 import BpmAudit from './bpmAudit'
+import BpmSelectEntranceForm from './bpmSelectEntranceForm'
+import BpmSelectHouseOwner from './bpmSelectHouseOwner'
+import BpmSignature from './bpmSignature'
+import BpmSelectIssue from './bpmSelectIssue'
+
+import BpmFieldsFilter from './bpmFieldsFilter'
+
 import { FORM_FIELDS_MAP } from './field-const.js'
 
 const bpmComponents = {
@@ -22,6 +30,7 @@ const bpmComponents = {
     BpmDateTime,
     BpmMulFile,
     BpmField,
+    BpmFormField,
     BpmSelectCheckItem,
     BpmSelectFromField,
     'BpmSelectUser': BpmSelectFromField,
@@ -33,7 +42,13 @@ const bpmComponents = {
     BpmSelectFromId,
     BpmMulImage,
     BpmSubForm,
-    BpmAudit
+    BpmAudit,
+    BpmSelectEntranceForm,
+    BpmSelectHouseOwner,
+    BpmSignature,
+    BpmSelectIssue,
+
+    BpmFieldsFilter
 }
 
 const install: any = function (Vue: any) {
@@ -51,19 +66,34 @@ const bpmConsts = {
 // 供局部引入
 export {
     BpmField,
+    BpmFormField,
     BpmText,
     BpmNumber,
     BpmTime,
     BpmDateTime,
+    BpmSelect,
+    BpmMulImage,
+    BpmMulFile,
     BpmSubForm,
     BpmAudit,
+    BpmSignature,
+
+    BpmSelectEntranceForm,
+    BpmSelectFromForm,
+    BpmSelectFromId,
+    BpmSelectFromField,
+    BpmSelectCheckItem,
+    BpmSelectHouseOwner,
+    BpmSelectIssue,
+
+    BpmFieldsFilter,
 
     bpmConsts
 }
 
 // 供全局引入
 export default {
-    version: '0.0.6',
+    version: '0.0.7',
     install,
     
     bpmConsts: { // 兼容，后续bpm_data改为局部使用后弃用

package/components/mixins/field_base_mixin.vue

@@ -0,0 +1,188 @@
+<script>
+import _ from "lodash";
+
+// 获取BPM组件文件引用上下文
+const BpmComponentRequire = require.context(
+    "../lib",
+    true,
+    /index.(js|ts)$/
+)
+
+const bpmComponents = {};
+
+//动态引用
+BpmComponentRequire.keys().forEach(filePath => {
+            let _tmp = filePath.split("/");
+
+          if(!(filePath.includes('bpmField') || filePath.includes('bpmFormField'))){
+            bpmComponents[_tmp[1]] = BpmComponentRequire(filePath).default
+            console.log("bpmComponents",bpmComponents)
+          }
+})
+
+const COMPONTENTMAP = {
+    // 'Signature': 'MulImage',
+    'SerialNumber': 'Text',
+    'Date': 'DateTime',
+    'TextArea': 'Text',
+    'MulSelect': 'Select',
+    'Status': 'Select',
+    'MulImg': 'MulFile',
+    'MulSelectCheckItem': 'SelectCheckItem',
+    'MulSelectFromField': 'SelectFromField',
+    'SelectUser': 'SelectFromField',
+    'MulSelectUser': 'SelectFromField',
+    'SelectPartner': 'SelectFromField',
+    'MulSelectPartner': 'SelectFromField',
+    'SelectProject': 'SelectFromField',
+    'MulSelectProject': 'SelectFromField',
+    'SelectOrg': 'SelectFromField',
+    'MulSelectOrg': 'SelectFromField',
+    'MulSelectFromForm': 'SelectFromForm',
+    'MulSelectFromId': 'SelectFromId',
+    'MulSelectURUser': 'SelectFromField',
+    'SelectURUser': 'SelectFromField',
+    'SelectRootCategory': 'SelectFromField',
+    'MulSelectSort': 'SelectCheckItem',
+    'SelectSort': 'SelectCheckItem',
+    'MulSelectEntranceForm': 'SelectEntranceForm',
+    'MulSelectIssue': 'SelectIssue',
+    'XSubForm': 'SubForm',
+    'OrderSubform': 'SubForm'
+}
+
+export default {
+  components: bpmComponents,
+  props: {
+    value: {
+      type: [String, Array, Number, Object],
+      
+    },
+    type: {
+      type: String,
+      default: ''
+    },
+    fieldConf: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    row: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    mode: {
+      type: String,
+      default: 'view' // view, edit
+    },
+    uiType: {
+      type: String,
+      default: 'default' // default,table,form,search
+    },
+    formDefId: {
+      type: String,
+      default: ''
+    },
+    orgInfo: {
+      type: Object,
+      default () {
+        return {
+          level: 'group', // group,team,project
+          level_id: 0,
+          group_id: 0
+        }
+      }
+    },
+    clearable: { // 仅对mode=edit有效
+      type: Boolean,
+      default: false
+    },
+    disabled: { // 仅对mode=edit有效
+      type: Boolean,
+      default: false
+    },
+    isMultiple: {
+      type: Boolean,
+      default() {
+        return false;
+      },
+    },
+    dm: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+  },
+  data () {
+    return {
+      curVal: ""
+    }
+  },
+  watch: {
+    curVal(val){
+      this.$emit("input", val)
+      this.$emit("change", val)
+    },
+    value: {
+      handler () {
+        this.curVal = this.value
+      },
+      immediate: true
+    },
+    dm(val){
+      this.$bpm.isDm = val
+    }
+  },
+  computed: {
+    curComponent() {
+      let componentType = this.type || _.get(this.fieldConf, "type");
+      const map = COMPONTENTMAP
+      componentType = map[componentType] || componentType
+
+      if (this.dm && componentType === 'Signature') {
+        componentType = 'MulImage'
+      }
+
+      if (!bpmComponents[`bpm${componentType}`]) return
+   
+      return `Bpm${componentType}`;
+    },
+    componentType(){
+      return this.type || _.get(this.fieldConf, "type")
+    },
+    isMul() {
+      let type = this.componentType
+      let isContainMul = type && type.indexOf("Mul") > -1;
+      return this.isMultiple || isContainMul
+    },
+    // 同一个form中，不同字段的mode可能不同，需结合其 fieldConf.perm 决定
+    fieldMode () {
+      let mode = this.mode
+      const fieldPermission = this.fieldConf.perm || {}
+      if (!fieldPermission.editable || !fieldPermission.writable) {
+        mode = 'view'
+      }
+      return mode
+    },
+    fieldDisabled () {
+      let disabled = this.disabled
+      const fieldPermission = this.fieldConf.perm
+      if (this.fieldMode === 'edit' && fieldPermission && !fieldPermission.writable) {
+        disabled = true
+      }
+
+      return disabled
+    }
+  },
+  mounted () {
+    this.$bpm.env.form_name = this.formDefId
+    this.curVal = this.value
+    this.$bpm.orgInfo = this.orgInfo
+    this.$bpm.isDm = this.dm
+  }
+};
+</script>

package/components/vendor/draw.js

@@ -0,0 +1,240 @@
+/**
+ * Created by louizhai on 17/6/30.
+ * description: Use canvas to draw.
+ */
+function Draw(canvas, degree, config = {}, boxStyle = {}) {
+  if (!(this instanceof Draw)) {
+    return new Draw(canvas, config);
+  }
+  if (!canvas) {
+    return;
+  }
+  let { width, height } = window.getComputedStyle(canvas, null);
+  width = width.replace('px', '');
+  height = height.replace('px', '');
+
+  this.canvas = canvas;
+  this.context = canvas.getContext('2d');
+  this.width = width;
+  this.height = height;
+  const context = this.context;
+
+  // 根据设备像素比优化canvas绘图
+  const devicePixelRatio = window.devicePixelRatio;
+  if (devicePixelRatio) {
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    canvas.height = height * devicePixelRatio;
+    canvas.width = width * devicePixelRatio;
+    context.scale(devicePixelRatio, devicePixelRatio);
+  } else {
+    canvas.width = width;
+    canvas.height = height;
+  }
+
+
+  context.lineWidth = 2;
+  context.strokeStyle = 'black';
+  context.lineCap = 'round';
+  context.lineJoin = 'round';
+  Object.assign(context, config);
+
+ 
+  const point = {};
+  const isMobile = /phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone/i.test(navigator.userAgent);
+  // 移动端性能太弱, 去掉模糊以提高手写渲染速度
+  if (!isMobile) {
+    context.shadowBlur = 1;
+    context.shadowColor = 'black';
+  }
+  let pressed = false;
+
+  const paint = (signal) => {
+    switch (signal) {
+      case 1:
+        context.beginPath();
+        context.moveTo(point.x, point.y);
+        break
+      case 2:
+        context.lineTo(point.x, point.y);
+        context.stroke();
+        break;
+      default: break
+    }
+  };
+  const create = signal => (e) => {
+    e.preventDefault();
+    if (signal === 1) {
+      pressed = true;
+    }
+    if (signal === 1 || pressed) {
+      const { left, top } = canvas.getBoundingClientRect();
+      e = isMobile ? e.touches[0] : e;
+      point.x = e.clientX - left + 0.5;
+      point.y = e.clientY - top + 0.5;
+      paint(signal);
+    }
+  };
+  const start = create(1);
+  const move = create(2);
+  const requestAnimationFrame = window.requestAnimationFrame;
+  const optimizedMove = requestAnimationFrame ? (e) => {
+    requestAnimationFrame(() => {
+      move(e);
+    });
+  } : move;
+
+  if (isMobile) {
+    canvas.addEventListener('touchstart', start);
+    canvas.addEventListener('touchmove', optimizedMove);
+  } else {
+    canvas.addEventListener('mousedown', start);
+    canvas.addEventListener('mousemove', optimizedMove);
+    ['mouseup', 'mouseleave'].forEach((event) => {
+      canvas.addEventListener(event, () => {
+        pressed = false;
+      });
+    });
+  }
+
+  // 重置画布坐标系
+  if (typeof degree === 'number') {
+    this.degree = degree;
+    context.rotate((degree * Math.PI) / 180);
+    switch (degree) {
+      case -90:
+        context.translate(-height, 0);
+        break;
+      case 90:
+        context.translate(0, -width);
+        break;
+      case -180:
+      case 180:
+        context.translate(-width, -height);
+        break;
+      default:
+    }
+  }
+}
+Draw.prototype = {
+  scale(width, height, canvas = this.canvas) {
+    const w = canvas.width;
+    const h = canvas.height;
+    width = width || w;
+    height = height || h;
+    if (width !== w || height !== h) {
+      const tmpCanvas = document.createElement('canvas');
+      const tmpContext = tmpCanvas.getContext('2d');
+      tmpCanvas.width = width;
+      tmpCanvas.height = height;
+      tmpContext.drawImage(canvas, 0, 0, w, h, 0, 0, width, height);
+      canvas = tmpCanvas;
+    }
+    return canvas;
+  },
+  rotate(degree, image = this.canvas) {
+    degree = ~~degree;
+    if (degree !== 0) {
+      const maxDegree = 180;
+      const minDegree = -90;
+      if (degree > maxDegree) {
+        degree = maxDegree;
+      } else if (degree < minDegree) {
+        degree = minDegree;
+      }
+
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      const height = image.height;
+      const width = image.width;
+      const degreePI = (degree * Math.PI) / 180;
+
+      switch (degree) {
+        // 逆时针旋转90°
+        case -90:
+          canvas.width = height;
+          canvas.height = width;
+          context.rotate(degreePI);
+          context.drawImage(image, -width, 0);
+          break;
+        // 顺时针旋转90°
+        case 90:
+          canvas.width = height;
+          canvas.height = width;
+          context.rotate(degreePI);
+          context.drawImage(image, 0, -height);
+          break;
+        // 顺时针旋转180°
+        case 180:
+          canvas.width = width;
+          canvas.height = height;
+          context.rotate(degreePI);
+          context.drawImage(image, -width, -height);
+          break;
+        default:
+      }
+      image = canvas;
+    }
+    return image;
+  },
+  getPNGImage(canvas = this.canvas) {
+    return canvas.toDataURL('image/png');
+  },
+  getJPGImage(canvas = this.canvas) {
+    return canvas.toDataURL('image/jpeg', 0.5);
+  },
+  downloadPNGImage(image) {
+    const url = image.replace('image/png', 'image/octet-stream;Content-Disposition:attachment;filename=test.png');
+    window.location.href = url;
+  },
+  dataURLtoBlob(dataURL) {
+    const arr = dataURL.split(',');
+    const mime = arr[0].match(/:(.*?);/)[1];
+    const bStr = atob(arr[1]);
+    let n = bStr.length;
+    const u8arr = new Uint8Array(n);
+    while (n--) {
+      u8arr[n] = bStr.charCodeAt(n);
+    }
+    return new Blob([u8arr], { type: mime });
+  },
+  clear() {
+    let width;
+    let height;
+    switch (this.degree) {
+      case -90:
+      case 90:
+        width = this.height;
+        height = this.width;
+        break;
+      default:
+        width = this.width;
+        height = this.height;
+    }
+    this.context.clearRect(0, 0, width, height);
+  },
+  upload(blob, url, success, failure) {
+    const formData = new FormData();
+    const xhr = new XMLHttpRequest();
+    xhr.withCredentials = true;
+    formData.append('image', blob, 'sign');
+
+    xhr.open('POST', url, true);
+    xhr.onload = () => {
+      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
+        success(xhr.responseText);
+      } else {
+        failure();
+      }
+    };
+    xhr.onerror = (e) => {
+      if (typeof failure === 'function') {
+        failure(e);
+      } else {
+        console.log(`upload img error: ${e}`);
+      }
+    };
+    xhr.send(formData);
+  },
+};
+export default Draw;