@zhijiancloud/bpm 0.0.6 → 0.0.7

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

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

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

@@ -0,0 +1,101 @@
+<template>
+  <div class="house-owner">
+    <el-autocomplete
+      class="bpm-autocomplete"
+      v-model="curVal.name"
+      :fetch-suggestions="querySearch"
+      :placeholder="placeholder"
+      @select="handleSelect"
+    >
+      <template slot-scope="{ item }">
+        <div class="name">{{ item.value }}</div>
+        <span class="addr">{{ item.phone }}</span>
+      </template>
+    </el-autocomplete>
+    <el-input
+      style="margin-top: 10px; user-select: text"
+      class="bpm-default-input owner-phone"
+      v-model="curVal.phone"
+      :placeholder="$z('请输入业主电话', 'b2.common.select_owner_number')"
+    >
+    </el-input>
+  </div>
+</template>
+<script>
+import Vue from "vue";
+import _ from "lodash";
+import { Autocomplete } from "element-ui";
+Vue.use(Autocomplete);
+export default {
+  props: ["value", "fieldConf", "row", "formName", "orgInfo", "isMultiple", "selectList"],
+  data() {
+    return {
+      placeholder: zj.z("请选择或输入业主名称", "b2.common.select_owner"),
+      curValue: {
+        id: "",
+        name: "",
+        phone: "",
+      },
+      restaurants: [],
+      firstListVal: ""
+    };
+  },
+  watch: {
+    ["value"]: {
+      handler(val) {
+        this.curValue = val ? val : {
+          id: null,
+          name: "",
+          phone: ""
+        };
+      },
+      deep: true,
+    },
+    curValue(val){
+      this.$emit("input", val)
+    },
+    ["selectList"](val) {
+      let isEVCFirstElem =
+        _.get(this.fieldConf, "default.value.type") == "EVCFirstElem";
+      if (
+        isEVCFirstElem &&
+        (!this.curValue || (this.curValue && !this.curValue.name))
+      )
+      this.curValue = _.get(val, "0", null);
+      this.firstListVal = _.get(val, "0", null);
+    },
+  },
+
+  methods: {
+    querySearch(queryString, cb) {
+      var restaurants = [];
+      _.each(this.selectList, (item) => {
+        restaurants.push({
+          value: item.name,
+          phone: item.phone,
+          id: item.id,
+        });
+      });
+      var results = queryString
+        ? restaurants.filter(this.createFilter(queryString))
+        : restaurants;
+      // 调用 callback 返回建议列表的数据
+      cb(results);
+    },
+    createFilter(queryString) {
+      return (restaurant) => {
+        return (
+          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
+          0
+        );
+      };
+    },
+    handleSelect(item) {
+      let select = _.cloneDeep(item);
+      select.name = select.value;
+      delete select.value;
+      this.curValue = select;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <span v-if="!value" :title="value" class="qs-content">{{
+      "--"
+    }}</span>
+    <div v-else class="qs-content">
+      <div>{{ value.name }}</div>
+      <div style="margin-top: 15px">{{ value.phone }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["type", "value", "fieldConf", "row"],
+};
+</script>

package/components/lib/bpmSelectIssue/index.js

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

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

@@ -0,0 +1,180 @@
+<template>
+  <div class="bpm-select-issue q-field-no-input">
+    <div
+      @click="toOpen()"
+      style="display: flex; max-width: 360px; cursor: pointer;"
+    >
+      <div class="select-user-label" style="flex: 1;">
+        {{ (value.length || mode === 'view') ? 
+          $z("已选问题", "b2.common.selected_question") + ' ' + value.length :
+          $z("选择问题", "b2.common.choice_question") }}
+      </div>
+      <i aria-hidden="true" class="fa fa-angle-right icon-right"></i>
+    </div>
+
+    <el-dialog
+      :title="searchTitle"
+      :visible.sync="opened"
+      width="90%"
+      :fullscreen="true"
+      custom-class="bpm-select-issue"
+      @close="toClose">
+      <issue-list
+        ref="issue_list"
+        :category_cls="category_cls"
+        :mode="issueMode"
+        :selectItems="selectedVals"
+        @select="selectIssueList"
+      ></issue-list>
+
+      <div v-if="mode === 'edit'" slot="footer" class="modal-footer">
+        <el-button @click="toClose">{{ $z('取消', 'c.cancel') }}</el-button>
+        <el-button type="primary" @click="onSubmit">{{ $z('确定', 'c.confirm') }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: "BpmSelectIssue",
+  props: {
+    value: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    type: {
+      type: String,
+      default: 'MulSelectIssue'
+    },
+    fieldConf: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    mode: {
+      type: String,
+      default: 'view' // view, edit
+    },
+    uiType: {
+      type: String,
+      default: 'default' // default,table,form,search
+    },
+  },
+  data() {
+    return {
+      // 结合 houseqm3/list 和原组件，有3个值：view, add, selected
+      issueMode: 'view',
+      searchTitle: zj.z("已选问题", "b2.common.selected_question"),
+
+      module_loaded: false,
+
+      loading: false,
+      opened: false,
+      selectedVals: [],
+
+      category_cls: 0,
+    };
+  },
+  watch: {
+    value (val) {
+      this.selectedVals = _.clone(val);
+    },
+    mode (val) {
+      if (val === 'view') {
+        this.issueMode = 'view'
+        this.searchTitle = zj.z("已选问题", "b2.common.selected_question")
+      } else {
+        this.issueMode = 'add'
+        this.searchTitle = zj.z("选择问题", "b2.common.choice_question")
+      }
+    }
+  },
+  computed: {
+    maxCount() {
+      return _.hasIn(this.fieldConf, "check.max_count")
+        ? _.get(this.fieldConf, "check.max_count")
+        : 100;
+    },
+  },
+  mounted() {
+    //动态跨模块加载页面组件
+    setTimeout(async () => {
+      if (this.fieldConf.issue_src == "building_qm") {
+        await zj.ui.loadPageComponent("IssueList", "buildingqm3", "list");
+        this.category_cls = 23;
+        console.log("动态加载安全检查模块组件");
+      } else {
+        await zj.ui.loadPageComponent("IssueList", "houseqm3", "list");
+        this.category_cls = 28;
+        console.log("动态加载分户验收模块组件");
+      }
+      this.module_loaded = true;
+    }, 4);
+    // TODO title 哪里来
+    // if (this.title) this.searchTitle = this.title;
+  },
+  methods: {
+    selectIssueList(data) {
+      this.selectedVals = _.clone(data);
+    },
+
+    toClose() {
+      this.opened = false;
+      this.selectedVals = [];
+    },
+    toOpen() {
+      if (!this.module_loaded) return;
+
+      this.opened = true;
+
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.setDefaultSelected();
+        }, 4);
+      });
+    },
+
+    setDefaultSelected() {
+      this.selectedVals = this.value ? _.cloneDeep(this.value) : []
+      if (this.$refs.issue_list) {
+        this.$refs.issue_list.selectedIds = _.clone(this.selectedVals);
+        this.$refs.issue_list.loadIssueList();
+      }
+    },
+    onSubmit() {
+      this.$emit('input', this.selectedVals)
+      this.$emit('change', this.selectedVals)
+
+      this.toClose();
+    },
+  },
+}
+</script>
+
+<style lang="less">
+.bpm-select-issue {
+  .icon-right {
+    color: #c1c1c1;
+  }
+
+  .select-user-label {
+    overflow-x: auto;
+    white-space: normal;
+    // color: #a4a4a4;
+  }
+  .select-user-label::-webkit-scrollbar {
+    display: none;
+  }
+
+  &.el-dialog {
+    .el-dialog__body {
+      height: calc(100vh - 54px - 70px);
+      box-sizing: border-box;
+      overflow: auto;
+    }
+  }
+}
+</style>

package/components/lib/bpmSignature/index.js

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

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

@@ -0,0 +1,248 @@
+<template>
+<div class="bpm-signature" style="position: relative;">
+  <template v-if="mode === 'edit'">
+    <div class="canvas-box" style="position: absolute;border-color: #fff;" v-if="openLastSign && lastSign">
+      <bpm-mul-image class="signature-reader" type="Signature" :value="curSign"></bpm-mul-image>
+    </div>
+    <div class="canvas-box">
+      <canvas ref="canvasElem"></canvas>
+    </div>
+    <div class="action-wrap">
+      <el-checkbox
+        v-if="openLastSign"
+        v-model="useNextUser"
+        :label="$z('保留签名以备下次调用', 'b2.common.sign_for_next_use')"
+        style="margin-right: 10px;"></el-checkbox>
+      <el-button size="default" @click="clearSignature">{{ $z('重置签名', 'b2.common.reset_sign') }}</el-button>
+    </div>
+  </template>
+  <bpm-mul-image v-else class="signature-reader" type="Signature" :value="curSign"></bpm-mul-image>
+</div>
+</template>
+<script>
+import BpmMulImage from '../../bpmMulImage/index.js';
+import Draw from '../../../vendor/draw.js'
+
+export default {
+  name: "BpmSignature",
+  components: {
+    BpmMulImage
+  },
+  props: {
+    value: {
+      type: String,
+    },
+    type: {
+      type: String,
+      default: 'Signature'
+    },
+    fieldConf: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    mode: {
+      type: String,
+      default: 'edit' // view, edit
+    },
+    uiType: {
+      type: String,
+      default: 'default' // default,table,form,search
+    },
+    container: {
+      type: [Object,null],
+      default () {
+        return null
+      }
+    },
+  },
+  data() {
+    return {
+      curSign: '',
+      hasDraw: false,
+      openLastSign: true, // 是否开启【保留签名以备下次调用】功能
+      lastSign: "",
+      useNextUser: false, // 保留签名以备下次调用
+      canvas: null,
+      timer:null
+    }
+  },
+  watch: {
+    value (val) {
+      if (val) {
+        this.curSign = val
+      }
+    },
+    curSign (val) {
+      this.$emit('input', val)
+      this.$emit('change', val, {
+        open: this.openLastSign,
+        for_next_use: this.useNextUser,
+        signature: this.curSign
+      })
+    }
+  },
+  created() {  
+  },
+  mounted() {
+
+    if (this.mode === 'edit') {
+      this.$nextTick(()=>{
+        this.initCanvas();
+      })
+    }
+
+    // TODO 是否保存签名下次使用, 需接上 container/form 后调试
+    // 此处 topContainer 指的是 container/form
+    let topContainer = this.container
+    if (topContainer) {
+      console.log('Singnature topContainer: ', topContainer)
+      topContainer.$on("afterFormSubmit", (errors) => {
+        console.log('Singnature topContainer afterFormSubmit')
+        if (!errors && this.openLastSign && this.curSign) {
+          this.$bpm.postEleSign(this.curSign, this.useNextUser)
+        }
+      })
+      topContainer.$on("dataLoaded", (container) => {
+        console.log('Singnature topContainer dataLoaded')
+        this.onDataLoaded(container)
+        this.curSign = null
+        this.useNextUser = false
+        this.handleInit()
+        setTimeout(() => {
+          this.initCanvas();
+        }, 100)
+      })
+    }
+  },
+  methods: {
+    handleInit() {
+      let userSign = this.$bpm.userSign
+      this.openLastSign = userSign.open
+      if (userSign.for_next_use) this.lastSign = userSign.signature
+      if (this.openLastSign && this.lastSign) this.curSign = userSign.signature
+      if (userSign.for_next_use && this.openLastSign) this.useNextUser = true
+
+      console.log('userSign: ', userSign)
+    },
+    initCanvas() {
+      this.hasDraw = false;
+      if(this.canvas){
+        this.canvas.removeEventListener('touchstart', function() {})
+        this.canvas.removeEventListener('mousedown', function() {})
+        this.canvas.removeEventListener('touchend', function() {})
+        this.canvas.removeEventListener('mouseup', function() {})
+      }
+
+      console.log("初始化initCanvas")
+      
+      this.canvas = this.$refs.canvasElem
+      this.draw = new Draw(
+        this.canvas,
+        -this.degree,
+        {},
+        {
+          // width: canvasBox.width(),
+          // height: canvasBox.height()
+        }
+      );
+      this.canvas.addEventListener("touchstart", () => {
+        if(this.timer){
+          clearTimeout(this.timer)
+          this.timer = null
+        }
+        this.hasDraw = true;
+      });
+      this.canvas.addEventListener("mousedown", () => {
+         if(this.timer){
+          clearTimeout(this.timer)
+            this.timer = null
+        }
+        this.hasDraw = true;
+      });
+      this.canvas.addEventListener("touchend", () => {
+        if(this.timer){
+          return
+        }
+        this.timer = setTimeout( ()=> {this.transToImg()},1000);
+      });
+      this.canvas.addEventListener("mouseup", () => {
+        if(this.timer){
+          return
+        }
+        console.log('mouseup')
+       this.timer = setTimeout( ()=> {this.transToImg()},1000);
+      });
+    },
+    // topContainer(container/form) dataLoaded
+    onDataLoaded(container) {
+      this.hasDraw = false;
+      this.draw && this.draw.clear();
+    },
+    clearSignature() {
+      this.hasDraw = false;
+      this.draw && this.draw.clear();
+      this.curSign = null
+      this.lastSign = ""
+    },
+    transToImg() {
+      console.log('Canvas transToImg called')
+      if (this.draw) {
+        let signatureImg = this.draw.getPNGImage()
+        console.log('Signature canvas img: ', signatureImg)
+        this.uploadImage({
+          basestr: signatureImg,
+          type: "png",
+          name: "签名图片.png",
+          model: "userfile"
+        }, (md5) => {
+          this.curSign = md5
+           this.timer = null
+          console.log('Signature img md5: ', md5)
+        })
+      }
+    },
+    uploadImage({
+      basestr, type, name, model
+    }, resolve) {
+      let text = window.atob(basestr.split(",")[1]);
+      let buffer = new ArrayBuffer(text.length);
+      let ubuffer = new Uint8Array(buffer);
+
+      for (let i = 0; i < text.length; i++) {
+        ubuffer[i] = text.charCodeAt(i);
+      }
+
+      let Builder = window.WebKitBlobBuilder || window.MozBlobBuilder;
+
+      let blob;
+      if (Builder) {
+        let builder = new Builder();
+        builder.append(buffer);
+        blob = builder.getBlob(type);
+      } else {
+        blob = new window.Blob([buffer], { type: type });
+      }
+
+      let formdata = new FormData();
+      formdata.append(model, blob, name);
+      zj.net.w
+        .noapi({
+          method: "POST",
+          url: "/platform/v1/papi/app_file/upload/",
+          data: formdata,
+          processData: false,
+          contentType: false
+        })
+        .then(res => {
+          
+          if (resolve) resolve(res.file_md5)
+        });
+    }
+  }
+}
+</script>
+
+<style lang="less">
+</style>