@zhijiancloud/bpm 0.0.4 → 0.0.6

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 20231220
+
+- [add] 新增 支持组件库按需引用
+
 ## 202311 首次支持表单字段组件
 
 表单字段：

package/components/css/bpmMulFile.less

@@ -52,3 +52,7 @@ img{
     height: 100%;
     width: auto;
 }
+
+.viewer-container{
+    z-index: 10000!important;
+}

package/components/lib/bpmAudit/index.js

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

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

@@ -0,0 +1,86 @@
+<template>
+    <component
+    class="bpm-audit"
+    v-model="curVal"
+    :is="curComponent"
+    :fieldConf="fieldConf"
+    :row="row"
+    :mode="mode"
+    :uiType="uiType"
+    v-bind="$attrs"
+    v-on="$listeners"
+    @change="onChange"
+  >
+  </component>
+  
+</template>
+<script>
+import editorComponent from "./part/editor.vue";
+import readerComponent from "./part/reader.vue";
+
+export default {
+  name: "BpmAudit",
+  components: {
+    editorComponent,
+    readerComponent
+  },
+  props: {
+    value: {
+      type: [Object]
+    },
+    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: {
+    value() {
+      this.curVal = this.value;
+    },
+  },
+  mounted() {
+    this.curVal = this.value;
+  },
+  methods: {
+    onChange(val){
+      console.log("onChange", _.cloneDeep(val))
+      this.$emit("input", val);
+      this.$emit("change", val);
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,316 @@
+<template>
+  <div class="audit">
+    <div class="row no-wrap relative-position q-chips-input">
+      <div class="col row items-center q-input-chips" @click="opened = true">
+        <span
+          class="aduit-result"
+          :style="{
+            background: resultColor,
+            color: resultColor ? '#fff' : '#333',
+          }"
+          >{{ getViewFont }}</span
+        >
+      </div>
+    </div>
+
+    <el-dialog
+      :visible.sync="opened"
+      class="audit-modal"
+      @close="onHide"
+      :modal="false"
+      :title="fieldConf.name"
+      @open="onOpen"
+    >
+      <div>
+        <el-form
+          ref="form"
+          class="audit-modal-content"
+          :model="curVal"
+          label-width="120px"
+        >
+          <el-form-item label="审批结果：">
+            <span
+              class="aduit-result"
+              :style="{
+                background: resultColor,
+                color: resultColor ? '#fff' : '#333',
+              }"
+              >{{ getViewFont }}</span
+            >
+          </el-form-item>
+          <el-form-item
+            label="回退节点："
+            v-if="curVal && curVal.reject_target"
+          >
+            {{ curVal.reject_target.name || "上一个节点" }}
+          </el-form-item>
+          <el-form-item label="签名：" :required="isSignatureMust" v-if="showSignature">
+            <bpm-mul-image
+              v-model="curVal.signature"
+              :fieldConf="{
+                'type': 'Signature',
+              }"
+              mode="edit"
+            ></bpm-mul-image>
+          </el-form-item>
+          <el-form-item label="评审意见：" :required="isJudgmentMust" v-if="showJudgment">
+            <el-input
+              v-model="curVal.judgment"
+              type="textarea"
+              placeholder="请输入评审意见"
+            />
+          </el-form-item>
+          <el-form-item label="拍照：" :required="isPhotoMust" v-if="showPhoto">
+            <bpm-mul-image
+              v-model="curVal.photos"
+              :fieldConf="{
+                'type': 'MulImage',
+              }"
+              mode="edit"
+            ></bpm-mul-image>
+          </el-form-item>
+          <el-form-item label="审批日期：">
+            <el-date-picker
+              ref="dateSelect"
+              v-model="curVal.audit_at"
+              type="datetime"
+              :format="auditFormat"
+            />
+          </el-form-item>
+          <el-form-item label="审批人：">
+            {{curVal.auditor_name}}
+            <!-- <el-select v-model="curVal.auditor" placeholder="请选择">
+              <el-option
+                v-for="item in userList"
+                :key="item.user_id"
+                :label="`${item.label}(${item.user_id})`"
+                :value="item.user_id"
+              >
+              </el-option>
+            </el-select> -->
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="opened = false">取 消</el-button>
+        <el-button type="primary" @click="onSubmit">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+
+<script>
+import _ from "lodash";
+import Vue from "vue";
+import { Dialog, DatePicker } from "element-ui";
+Vue.use(Dialog);
+Vue.use(DatePicker);
+import MulImage from "../../../bpmMulImage/index";
+Vue.use(MulImage);
+
+export default {
+  data() {
+    return {
+      curVal: {
+        result: 1,
+        judgment: "",
+        photos: [],
+        reject_target: "",
+        signature: "",
+        auditor_name: "",
+        audit_at: "",
+        auditor: "",
+      },
+      opened: false,
+      dispMode: "nolink",
+      auditFormat: "yyyy-MM-dd HH:mm:ss",
+      userList: []
+    };
+  },
+  props: ["value", "fieldConf", "row"],
+  computed: {
+    useDetail() {
+      return (
+        !!_.get(this.fieldConf, "detail_allow", null) &&
+        !!_.get(this.fieldConf, "detail_deny", null)
+      );
+    },
+    resultColor() {
+      let result = _.get(this.curVal, "result", -1);
+      let color =
+        result == 1 ? this.allowColor : result == -1 ? null : this.denyColor;
+      return this.useDetail ? color : null;
+    },
+    allowColor() {
+      let color = _.get(this.fieldConf, "detail_allow.color", "#fff");
+      return color == "#fff" || color == "#ffffff" ? null : color;
+    },
+    getViewFont() {
+      let result = this.curVal.result;
+      let font = result == 1 ? "通过" : result == -1 ? "" : "不通过";
+      if (this.useDetail) {
+        font =
+          result == 1
+            ? _.get(this.fieldConf, "detail_allow.text", "通过")
+            : result == -1
+            ? ""
+            : _.get(this.fieldConf, "detail_deny.text", "不通过");
+      }
+      return font;
+    },
+    jucdgment() {
+      let result = this.curVal.result;
+      let jucdgment = _.get(this.fieldConf, "judgment");
+      if (this.useDetail) {
+        jucdgment =
+          result == 1
+            ? _.get(this.fieldConf, "detail_allow.judgment")
+            : _.get(this.fieldConf, "detail_deny.judgment");
+      }
+      return jucdgment;
+    },
+    showJudgment() {
+      return this.jucdgment == "yes" || this.jucdgment == "must";
+    },
+    denyColor() {
+      let color = _.get(this.fieldConf, "detail_deny.color", "#fff");
+      return color == "#fff" || color == "#ffffff" ? null : color;
+    },
+    signature() {
+      let result = this.curVal.result;
+      let signature = _.get(this.fieldConf, "signature");
+      if (this.useDetail) {
+        signature =
+          result == 1
+            ? _.get(this.fieldConf, "detail_allow.signature")
+            : _.get(this.fieldConf, "detail_deny.signature");
+      }
+      return signature;
+    },
+    showSignature() {
+      return this.signature == "yes" || this.signature == "must";
+    },
+    photo() {
+      let result = this.curVal.result;
+      let photo = _.get(this.fieldConf, "photo");
+      if (this.useDetail) {
+        photo =
+          result == 1
+            ? _.get(this.fieldConf, "detail_allow.photo")
+            : _.get(this.fieldConf, "detail_deny.photo");
+      }
+      return photo;
+    },
+    showPhoto() {
+      return this.photo == "yes" || this.photo == "must";
+    },
+    isJudgmentMust() {
+      return this.judgment == "must";
+    },
+    isSignatureMust() {
+      return this.signature == "must";
+    },
+    isPhotoMust() {
+      return this.photo == "must";
+    },
+    isRequired() {
+      return _.get(this.fieldConf, "check.required");
+    },
+    getCanvasBoxStyle() {
+      return {
+        height: "150px",
+        width: "100%",
+      };
+    },
+  },
+  created() {
+  },
+  mounted() {
+    if(this.value){
+      let value = _.cloneDeep(this.value);
+      value.audit_at = value.audit_at * 1000
+      this.curVal = _.merge(this.curVal, value)
+    }
+    
+    if (this.useDetail) {
+      this.selectOptions = [
+        {
+          label: _.get(this.fieldConf, "detail_allow.text", "通过"),
+          value: 1,
+        },
+        {
+          label: _.get(this.fieldConf, "detail_deny.text", "不通过"),
+          value: 2,
+        },
+      ];
+    }
+  },
+  methods: {
+    onHide() {
+      this.opened = false;
+      this.showForm = false
+    },
+    onOpen() {
+      if (this.value) {
+        let value = _.cloneDeep(this.value);
+        value.audit_at = value.audit_at * 1000
+        this.curVal = _.merge(this.curVal, value)
+        
+      }
+    },
+    async onSubmit() {
+      let curVal = this.curVal;
+      if (this.isRequired && !curVal.result) {
+        this.$q.notify({
+          message: "请选择审批结果",
+          position: "top",
+          type: "warning",
+        });
+        return;
+      }
+      if (this.isSignatureMust && !curVal.signature) {
+        this.$q.notify({
+          message: "请完成签名",
+          position: "top",
+          type: "warning",
+        });
+        return;
+      }
+      if (this.isJudgmentMust && !curVal.judgment) {
+        this.$q.notify({
+          message: "请填写意见",
+          position: "top",
+          type: "warning",
+        });
+        return;
+      }
+      if (this.isPhotoMust && _.isEmpty(curVal.photos)) {
+        this.$q.notify({
+          message: "请至少上传一张图片",
+          position: "top",
+          type: "warning",
+        });
+        return;
+      }
+      let value = {
+        result: curVal.result,
+        signature: curVal.signature,
+        judgment: curVal.judgment,
+        photos: curVal.photos,
+        audit_at: curVal.audit_at / 1000,
+        auditor: curVal.auditor,
+        auditor_name: curVal.auditor_name,
+      };
+      this.$emit("change", value);
+      this.$emit("input", value);
+      this.opened = false;
+    },
+    getRejectTarget(id) {
+      // let rejectTargetMap = this.rejectTargetMap;
+      return id == "last_id" ? { type: "RejectToLastUserNode" } : id;
+    },
+  },
+};
+</script>
+

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

@@ -0,0 +1,217 @@
+<template>
+  <div class="el-form-item-no-input audit">
+    <div class="row no-wrap relative-position q-chips-input">
+      <div class="col row no-wrap relative-position">
+        <div
+          class="col row items-center q-input-chips text-primary"
+          v-if="modalShow"
+          @click="opened = true"
+        >
+          <span
+            class="aduit-result"
+            :style="{
+              background: resultColor,
+              color: resultColor ? '#fff' : '#333',
+            }"
+            >{{ getViewFont }}</span
+          >
+        </div>
+        <div
+          class="col row items-center text-primary"
+          v-else
+          @click="opened = true"
+        >
+          <span
+            class="aduit-result"
+            :style="{
+              background: resultColor,
+              color: resultColor ? '#fff' : '#333',
+            }"
+            >{{ getViewFont }}</span
+          >
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="value && value.reject_target"
+      label="回退节点："
+      class="el-form-item-required"
+    >
+      {{ value.reject_target.name || "上一个节点" }}
+    </div>
+    <el-dialog
+      class="audit-modal read-audit"
+      :visible.sync="opened"
+      @close="onHide"
+      :modal="false"
+      :ok="false"
+      v-if="showSignature || showJudgment || showPhoto"
+      :title="fieldConf.name"
+    >
+      <div>
+        <el-form
+          v-if="value"
+          ref="form"
+          class="audit-modal-content"
+          :model="curVal"
+          label-width="120px"
+        >
+          <el-form-item label="审批结果：" class="el-form-item-required">
+            <span
+              class="aduit-result"
+              :style="{
+                background: resultColor,
+                color: resultColor ? '#fff' : '#333',
+              }"
+              >{{ getViewFont }}</span
+            >
+          </el-form-item>
+
+          <el-form-item
+            v-if="value && value.reject_target"
+            label="回退节点："
+            class="el-form-item-required"
+          >
+            {{ value.reject_target.name || "上一个节点" }}
+          </el-form-item>
+
+          <el-form-item
+            label="签名："
+            :required="isSignatureMust"
+            v-if="showSignature"
+          >
+            <bpm-mul-image
+              :value="value.signature"
+              :fieldConf="{type: 'Signature'}"
+            ></bpm-mul-image>
+          </el-form-item>
+          <el-form-item
+            label="填写意见："
+            :required="isJudgmentMust"
+            v-if="showJudgment"
+            ><span :title="value && value.judgment">{{
+              value && value.judgment ? value.judgment : "--"
+            }}</span></el-form-item
+          >
+          <el-form-item
+            label="拍照："
+            v-if="showPhoto"
+            :class="isPhotoMust ? 'el-form-item-required' : ''"
+          >
+            <bpm-mul-image
+            :value="value.photos"
+              :fieldConf="{type: 'MulImage'}"
+            ></bpm-mul-image>
+          </el-form-item>
+          <el-form-item label="审批人">{{ auditorName }}</el-form-item>
+          <el-form-item label="审批时间">{{ auditAt }}</el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+import Vue from "vue";
+import fecha from "fecha"
+import { Dialog } from "element-ui";
+Vue.use(Dialog);
+import MulImage from "../../../bpmMulImage/index";
+Vue.use(MulImage);
+export default {
+  props: ["value", "fieldConf", "row"],
+  data() {
+    return {
+      opened: false,
+      auditFormat: "YYYY-MM-DD HH:mm:ss",
+    };
+  },
+  computed: {
+    useDetail() {
+      return (
+        !!_.get(this.fieldConf, "detail_allow", null) &&
+        !!_.get(this.fieldConf, "detail_deny", null)
+      );
+    },
+    resultColor() {
+      let result = _.get(this.value, "result", -1);
+      let color =
+        result == 1 ? this.allowColor : result == -1 ? null : this.denyColor;
+      return this.useDetail ? color : null;
+    },
+    allowColor() {
+      let color = _.get(this.fieldConf, "detail_allow.color", "#fff");
+      return color == "#fff" || color == "#ffffff" ? null : color;
+    },
+    denyColor() {
+      let color = _.get(this.fieldConf, "detail_deny.color", "#fff");
+      return color == "#fff" || color == "#ffffff" ? null : color;
+    },
+    getViewFont() {
+      let result = _.get(this.value, "result", -1);
+      let font = result == 1 ? "通过" : result == -1 ? "未审批" : "不通过";
+      if (this.useDetail) {
+        font =
+          result == 1
+            ? _.get(this.fieldConf, "detail_allow.text", "通过")
+            : result == -1
+            ? "未审批"
+            : _.get(this.fieldConf, "detail_deny.text", "不通过");
+      }
+      return font;
+    },
+    hasAudited() {
+      let result = _.get(this.value, "result", -1);
+      return result != -1;
+    },
+    showJudgment() {
+      let judgment = _.get(this.fieldConf, "judgment");
+      return judgment == "yes" || judgment == "must";
+    },
+    showSignature() {
+      let signature = _.get(this.fieldConf, "signature");
+      return signature == "yes" || signature == "must";
+    },
+    showPhoto() {
+      let photo = _.get(this.fieldConf, "photo");
+      return photo == "yes" || photo == "must";
+    },
+    isJudgmentMust() {
+      return _.get(this.fieldConf, "judgment") == "must";
+    },
+    isSignatureMust() {
+      return _.get(this.fieldConf, "signature") == "must";
+    },
+    isPhotoMust() {
+      return _.get(this.fieldConf, "photo") == "must";
+    },
+    isRequired() {
+      return _.get(this.fieldConf, "check.required");
+    },
+    modalShow() {
+      return (
+        (this.showSignature || this.showJudgment || this.showPhoto) &&
+        this.hasAudited
+      );
+    },
+    auditAt() {
+      let time = _.get(this.value, "audit_at");
+      if(!time) return
+      time = time * 1000
+      // let timeStamp = new Date(time).getTime();
+      return fecha.format(time, this.auditFormat);
+    },
+    auditorName() {
+      return _.get(this.value, "auditor_name");
+    },
+  },
+  mounted() {
+  },
+  methods: {
+    onHide() {
+      this.opened = false;
+    }
+  },
+};
+</script>

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

@@ -33,6 +33,7 @@ import BpmMulImage from "../../bpmMulImage";
 import BpmSelectFromForm from "../../bpmSelectFromForm";
 import BpmSelectFromId from "../../bpmSelectFromId";
 import BpmSubForm from '../../bpmSubForm';
+import BpmAudit from '../../bpmAudit';
 
 const bpmComponents = {
   BpmText,
@@ -72,7 +73,8 @@ const bpmComponents = {
   'BpmMulSelectSort': BpmSelectCheckItem,
   'BpmSelectSort': BpmSelectCheckItem,
   'BpmXSubForm': BpmSubForm,
-  'BpmOrderSubform': BpmSubForm
+  'BpmOrderSubform': BpmSubForm,
+  BpmAudit
 };
 
 export default {
@@ -166,6 +168,7 @@ export default {
     },
   },
   mounted () {
+    this.$bpm.env.form_name = this.formDefId
     this.curVal = this.value
     this.$bpm.orgInfo = this.orgInfo
   }

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

@@ -128,10 +128,6 @@ export default {
     };
   },
   watch: {
-    curVal(val) {
-      let result = this.isSign ? _.get(val, "0.md5", "") : val;
-      this.$emit("input", result);
-    },
     value() {
       this.curVal =
         this.isSign && _.isString(this.value) && this.value
@@ -427,11 +423,15 @@ export default {
         md5: _.get(response, "data.file_md5"),
       });
       this.curVal = _.cloneDeep(items);
-      console.log("this.curVal", this.curVal);
+      let result = this.isSign ? _.get( this.curVal, "0.md5", "") :  this.curVal;
+      this.$emit("input", result);
+      
     },
     remove(md5) {
       this.curVal = _.filter(this.curVal, (item) => item.md5 != md5);
       this.$refs.uploader.queue = [];
+      let result = this.isSign ? _.get( this.curVal, "0.md5", "") :  this.curVal;
+      this.$emit("input", result);
     },
     onHide() {
       this.opened = false;