n20-common-lib 1.1.98

package/src/components/NstcG6Components/NstcDialog/NstcDialog.vue

@@ -0,0 +1,185 @@
+<template>
+  <el-dialog
+      class="Nstc-dialog"
+      v-drag
+      :visible.sync="dialogVisible"
+      v-bind="$attrs"
+      :center="center"
+      :show-close="showClose"
+      :custom-class="customClass"
+      :append-to-body="toBody"
+      :close-on-click-modal="closeOnClickModal"
+      :close-on-press-escape="closeOnPressEscape"
+      :before-close="()=>{handleClose()}"
+      v-on="$listeners"
+  >
+    <template slot="title">
+      <span class="el-dialog__title">{{ title }}</span>
+      <button class="el-dialog__headerbtn" @click="handleClose">
+        <i class="el-dialog__close el-icon-close"></i>
+      </button>
+    </template>
+    <slot></slot>
+
+    <slot name="after"></slot>
+    <div
+        v-if="showFooter"
+        slot="footer"
+        class="dialog-footer"
+    >
+      <el-button
+          v-if="footerHandlers.confirm"
+          type="primary"
+          :disabled="footerHandlers.confirm.disabled || confirmDisabledFlag"
+          :class="footerHandlers.confirm.className"
+          @click="handleConfirm"
+      >
+        {{ footerHandlers.confirm.text || '确认' }}
+      </el-button>
+      <el-button
+          v-if="footerHandlers.cancel"
+          plain
+          :class="footerHandlers.cancel.className"
+          @click="handleClose"
+      >
+        {{ footerHandlers.cancel.text || '取消' }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'NstcDialog',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+
+    title: {
+      type: String,
+      default: ''
+    },
+
+    center: {
+      type: Boolean,
+      default: false
+    },
+
+    footerHandlers: {
+      type: Object,
+      default:  () => {
+        return {
+          confirm: {
+            text: '', //this.$t('common_w_0002')
+            className: '',
+            disabled: false
+          },
+          cancel: {
+            text: '', // this.t('common_w_0003')
+            className: '',
+            disabled: false
+          }
+        }
+      },
+
+    },
+    toBody: {
+      type: Boolean,
+      default: true
+    },
+    customClass: {
+      type: String,
+      default: ''
+    },
+
+    showFooter: {
+      type: Boolean,
+      default: true
+    },
+
+    showClose: {
+      type: Boolean,
+      default: false
+    },
+
+    /** 是否在点击确认按钮后关闭弹窗 */
+    closeAfterConfirm: {
+      type: Boolean,
+      default: true
+    },
+
+    /** 是否在点击确认按钮后立即关闭弹窗 */
+    immediateCloseAfterHandler: {
+      type: Boolean,
+      default: false
+    },
+
+    closeOnClickModal: {
+      type: Boolean,
+      default: false
+    },
+
+    closeOnPressEscape: {
+      type: Boolean,
+      default: false
+    },
+
+    confirmDisabledFlag: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    handleConfirm() {
+      this.handleListeners('confirm')
+    },
+
+    handleClose() {
+      this.handleListeners('cancel')
+    },
+
+    async handleListeners(type) {
+      this.loading = true
+      try {
+        const listener = this.$listeners[type]
+        const closeAfterListener = this.closeAfterConfirm || type === 'cancel'
+
+        if (this.immediateCloseAfterHandler) {
+          if (closeAfterListener) {
+            this.dialogVisible = false
+          }
+
+          listener && await listener()
+        } else {
+          listener && await listener()
+
+          if (closeAfterListener) {
+            this.dialogVisible = false
+          }
+        }
+      } catch (err) {
+        console.error(err)
+
+        err && err.type === 'VALIDATE_ERROR' && this.$message({
+          type: 'warning',
+          message: err.msg
+        })
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>

package/src/components/NstcG6Components/Progress/progress.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="nstc-approvel-examination">
+    <div slot="title">
+      <div
+          style="
+          height: 36px;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          position: absolute;
+          top: 0;
+          right: 100px;
+          z-index: 999;
+        "
+      >
+      </div>
+    </div>
+    <div>
+      <div style="margin: auto">
+        <div v-for="(item, index) in approvalTable" :key="index">
+          <div style="display: flex; align-items: center;">
+            <div style="width: 200px; color: #bec8d2">{{ item.endTime }}</div>
+            <div
+                style="
+                width: 19px;
+                height: 19px;
+                line-height: 17px;
+                background: #fff;
+                border-radius: 10px;
+                color: #ccc;
+                text-align: center;
+                border: 1px solid #ccc;
+                font-size: 8px;
+              "
+                :style="item.endTime ? 'background:#1677FF' : ''"
+            ></div>
+            <img
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAACa0lEQVQ4T5WTW0hTcRzHv7+/O25RMYUk6AIGXQyUeeqEwo7Fwh3p4oNQIvWUD0bPUURUUAlFbz2F0EvRSyuigpTtmAN3ll1Wm7pQEV+6QUlkkbLbOb/Yyphr6vo//n7f3+f/uxIWeQOhuMsU6YvM2A3AAjBggzi/V3VNFAuhYsZ+Y7jJgvWQQN3pdOKeZFslgMwRhnUSgryaW44VxhUBMfmN2JgAXfCq9b78AP1ZrJMt7tJUuXFZkD40up3NjK6p8oZCsc/nK6tYv/ULVjjqtB01n/L9/2SkG68bGeKGpspysbID4egkQ7S1uF3xpUGRiJMTtg/CVra5ubHuc764LxitLpMwmnSYa1sVZW5JUNYZCMWuA9gmZWyHPJ7an1mbHplycuLHY4J44VVdp5ftUVbQ2ztpl5yzt8DYw8x9IAgA+wkIVDrMY4qipEsCZUXByMSaTDJx2GKrhQCLCH1kSz1obmj4WtIe9YeHOxjmKbDYAvB7BlK5QIKdmDYyeEyQuNbsdt0v2qN4PF7+cSZ1myBqhcCZqfKM/3hBCb54vLxyJnmQSVwlxsv8Mv+OXw9He5ipOvkt09baunAihaUYxvjqWcw9IYi3mlp/4nfCAPxDww1k8iNpJdd4ZHlmsfvLtw8OvqlKCBonWAe86s7nOVDAiN0E8E5T6y+VApnX+EPRbgLWaU1y5x9QNATgiqbKvf8DemqM7Muwea6lSXbnQHo4dhlgGXbzqFdRvpcCC0ajFelZ3AEwoqny2RwoGAw6UlJFDxF1gFkqBQSi7FLelVLOLo9nU2LB0Wavu6pqV0mg6elX6fb2dnP+01+5XvET5hOqAQAAAABJRU5ErkJggg=="
+                style="
+                vertical-align: bottom;
+                width: 18px;
+                height: 18px;
+                margin-right: 10px;
+              "
+            />
+            <span
+                style="margin-left: 10px; max-width: 300px; color: #434f5c"
+                :title="item.more"
+            >
+              {{ item.assignee }}
+            </span>
+            <span
+                style="margin-left: 10px; color: #434f5c"
+                v-if="item.optResult"
+            >{{ item.optResult }}</span
+            >
+            <el-tooltip
+                v-if="item.suggestion && item.suggestion.length > 40"
+                effect="dark"
+                :content="item.suggestion"
+                placement="top"
+            >
+              <span
+                  style="margin-left: 10px; color: #434f5c"
+                  :class="(item.suggestion &&  item.suggestion.length  > 40 ) ? 'hidden': ''"
+                  v-if="item.suggestion"
+              >审批意见：{{ item.suggestion }}</span
+              >
+            </el-tooltip>
+
+
+          </div>
+          <div
+              v-if="approvalTable.length !== index + 1"
+              style="
+              width: 2px;
+              height: 20px;
+              background: #ccc;
+              margin: 2px 9px;
+              margin-left: 209px;
+            "
+              :style="item.endTime ? 'background:#1677FF' : ''"
+          ></div>
+        </div>
+      </div>
+    </div>
+    <el-dialog title="查看流程" :visible.sync="dialogVisible" width="1200px">
+      <div v-html="svgHtml"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import axios from '../../../utils/axios'
+export default {
+  name: "progress",
+  mounted() {
+    this.bizFlowId =
+        this.$route.query.processInstanceId || this.$route.params.processInstanceId || "0cf3ec79c7b048c9add24dd03c95332a";
+    this.intData(this.bizFlowId);
+  },
+  methods: {
+    intData(bizFlowId) {
+      axios.get(`/bems/activiti/sample/Q003`,{procInstId:bizFlowId}).then((res) => {
+        if (res) {
+          this.approvalTable = res.map((item) => {
+            item.more = item.assignee;
+            if (item.assignee && item.assignee.length > 20) {
+              item.assignee = item.assignee.substring(1, 20) + "...";
+            }
+            return item;
+          });
+        }
+      });
+      axios.get(`/bems/activiti/sample/Q004`,{procInstId:bizFlowId}).then((res) => {
+        if (res) {
+          this.svgHtml = res;
+        }
+      });
+    },
+  },
+  watch: {
+    bizFlowId() {
+      if (this.bizFlowId.length > 0) {
+        this.intData(this.bizFlowId);
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/PageLayout/page.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="flex-column">
+    <slot name="header"></slot>
+    <div class="n20-page-content flex-item">
+      <slot></slot>
+    </div>
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Page'
+}
+</script>

package/src/components/Pagination/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="n20-pagination">
+    <el-pagination
+      layout="prev,next,slot,jumper"
+      :current-page.sync="pageObj[pageKey.no]"
+      :page-size="pageObj[pageKey.size]"
+      :total="pageObj[pageKey.total]"
+      :size="size"
+      @current-change="setnoOrsize"
+    >
+      <span class="n20-pagination-total"
+        ><span class="n20-pagination-no">{{ pageObj[pageKey.no] }}</span
+        >/{{ max }}</span
+      >
+      <span class="el-pagination__sizes">
+        <el-select
+          v-model="pageObj[pageKey.size]"
+          size="mini"
+          popper-class="el-pagination__sizes-popper"
+          @change="setnoOrsize"
+        >
+          <el-option
+            v-for="item in pageSizes"
+            :key="item"
+            :value="item"
+            :label="item + '条/页'"
+          />
+          <el-option
+            :value="pageObj[pageKey.size]"
+            :label="pageObj[pageKey.size] + '条/页'"
+            style="display: none"
+          />
+        </el-select>
+      </span>
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Pagination',
+  props: {
+    size: {
+      type: String,
+      default: 'mini'
+    },
+    pageObj: {
+      type: Object,
+      default: () => ({
+        no: 1,
+        size: 20,
+        total: 0
+      })
+    },
+    pageKey: {
+      type: Object,
+      default: () => ({
+        no: 'no',
+        size: 'size',
+        total: 'total'
+      })
+    },
+    pageSizes: {
+      type: Array,
+      default: () => [20, 50, 100, 300, 500]
+    }
+  },
+  data() {
+    return {
+      noOrsize: ''
+    }
+  },
+  computed: {
+    max() {
+      let total = this.pageObj[this.pageKey.total]
+      let size = this.pageObj[this.pageKey.size]
+
+      return Math.ceil(total / size)
+    }
+  },
+  watch: {
+    noOrsize() {
+      this.$emit('change', this.pageObj)
+    }
+  },
+  methods: {
+    setnoOrsize() {
+      this.$nextTick(() => {
+        let no = this.pageObj[this.pageKey.no]
+        let size = this.pageObj[this.pageKey.size]
+        this.noOrsize = no + ',' + size
+      })
+    }
+  }
+}
+</script>

package/src/components/SecondaryTab/index.vue

@@ -0,0 +1,58 @@
+
+<template>
+  <el-tabs
+    :value="init"
+    class="n20-secondary-tab m-b"
+    :before-leave="beforeFn"
+    @tab-click="clickFn"
+  >
+    <el-tab-pane
+      v-for="item of data"
+      :key="item.name"
+      :tab-info="item"
+      :name="item.name"
+      :icon="item.icon"
+      :disabled="item.disabled"
+    >
+      <template slot="label">
+        <span v-if="item.icon" :class="item.icon"></span>
+        <sup v-if="item.badge" class="el-tabs__item-badge"></sup>
+        {{ item.name }}
+      </template>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+export default {
+  name: 'SecondaryTab',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    init: {
+      type: String,
+      default: ''
+    },
+    stop: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    clickFn(C) {
+      let item = C.$attrs['tab-info']
+      if (this.$listeners['update:init']) {
+        !item.disabled && this.$emit('update:init', item.name)
+      }
+      if (this.$listeners['click']) {
+        this.$emit('click', item)
+      }
+    },
+    beforeFn(name) {
+      return !this.stop
+    }
+  }
+}
+</script>

package/src/components/SelectLazy/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-select
+    v-select-lazy="lazyGet"
+    :value="value"
+    v-bind="attrs"
+    v-on="listeners"
+  >
+    <slot></slot>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: 'SelectLazy',
+  directives: {
+    'select-lazy': {
+      bind(el, binding) {
+        let maxMoveY = 0
+        el.querySelector('.el-select-dropdown__wrap').addEventListener(
+          'scroll',
+          function () {
+            if (this.scrollTop <= 20) {
+              maxMoveY = 0
+            }
+            if (
+              this.scrollTop > maxMoveY + 60 &&
+              this.scrollTop + this.clientHeight > this.scrollHeight - 60
+            ) {
+              maxMoveY = this.scrollTop
+              binding.value()
+            }
+          }
+        )
+      }
+    }
+  },
+  props: {
+    value: {
+      type: [String, Number, Array, Object],
+      default: undefined
+    },
+    filterMethod: {
+      type: Function,
+      default: undefined
+    }
+  },
+  data() {
+    this.attrs = Object.assign(
+      { filterable: true, clearable: true, filterMethod: this.filterMethod },
+      this.$attrs
+    )
+
+    this.listeners = Object.assign(
+      { clear: this.filterMethod },
+      this.$listeners,
+      {
+        change: this.change
+      }
+    )
+
+    return {}
+  },
+  methods: {
+    change(val) {
+      this.$emit('input', val)
+    },
+    lazyGet() {
+      this.$emit('scroll-bottom')
+    }
+  }
+}
+</script>
+
+<style>
+</style>