n20-common-lib 2.5.0-beta.5 → 2.5.0-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.5.0-beta.5",
+  "version": "2.5.0-beta.7",
   "private": false,
   "main": "src/index.js",
   "scripts": {
@@ -54,6 +54,7 @@
     "lz-string": "^1.4.4",
     "normalize.css": "^8.0.1",
     "numerify": "*",
+    "ofd.js": "^1.4.1",
     "panzoom": "*",
     "qrcode": "*",
     "resize-detector": "*",
@@ -62,7 +63,6 @@
     "vuedraggable": "*"
   },
   "devDependencies": {
-    "element-ui": "^2.15.14",
     "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@babel/plugin-transform-flow-comments": "^7.14.5",
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -76,6 +76,7 @@
     "copy-webpack-plugin": "^6.4.1",
     "core-js": "^3.6.5",
     "echarts": "^5.3.3",
+    "element-ui": "^2.15.14",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "exceljs": "^4.3.0",

package/src/assets/css/_coreLib.scss

@@ -23,7 +23,7 @@
 @import './cl-empty.scss';
 @import './cl-file-upload-table.scss';
 @import './cl-footer-box.scss';
-@import './cl-filter.scss';
+@import './filter.scss';
 @import './cl-worn-pagination.scss';
 @import './cl-dialog.scss';
 @import './cl-layout.scss';
@@ -41,7 +41,7 @@
 @import './select.scss';
 @import './plain-text.scss';
 @import './cl-date-quarter.scss';
-@import './cl-advanced-filter.scss';
+
 /* 临时引入 */
 @import '../../components/ChildRange/style.scss';
 @import '../../components/PageHeader/style.scss';

package/src/assets/css/cl-form-item.scss

@@ -1,7 +1,7 @@
 $--s: 1024px;
 $--m: 1600px;
 $--l: 1920px;
-$--input-max: 224px;
+$--input-max: 300px;
 
 .el-form-item[span],
 .el-form-item[span-s],

package/src/assets/css/filter.scss

@@ -0,0 +1,121 @@
+.n20-filter {
+  max-height: 380px;
+  overflow-y: auto;
+}
+
+.n20-advanced-filter {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding: 8px;
+  &-item.n20-advanced-filter-active {
+    border-color: #b3d0ff;
+    background: #e9f2ff !important;
+  }
+  &-body {
+    .el-form-item,
+    .el-form-item--small.el-form-item {
+      margin-bottom: 10px;
+    }
+    .el-form-item__content {
+      display: inline-block;
+      vertical-align: middle;
+      width: auto;
+    }
+  }
+
+  &-item {
+    box-sizing: border-box;
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 442px !important;
+    min-width: 120px;
+    margin-right: 8px;
+    border: 1px solid $--border-color-base;
+    padding: 0 4px 0 8px;
+    border-radius: 4px;
+    white-space: nowrap;
+    cursor: pointer;
+    .el-form-item__label {
+      padding: 0;
+      display: inline-block;
+      vertical-align: middle;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-right: 4px;
+    }
+
+    .n20-date-editor.el-input--prefix {
+      max-width: 166px;
+    }
+    .el-range-editor.el-input__inner {
+      min-width: 168px;
+      max-width: 224px;
+      .el-range-input {
+        background-color: transparent;
+      }
+    }
+
+    .el-input,
+    .el-input__inner {
+      border: none;
+      width: 100%;
+      background-color: transparent;
+    }
+    .el-input__inner:active,
+    .el-input__inner:focus {
+      box-shadow: none;
+      border: none;
+      border-color: #fff;
+    }
+
+    .el-checkbox-group {
+      height: 32px;
+      line-height: 32px;
+      vertical-align: middle;
+      padding: 0 10px;
+    }
+    .el-radio-group {
+      padding: 0 10px;
+    }
+
+    .n20-num-w {
+      .el-input,
+      .el-input__inner {
+        padding-left: 0;
+      }
+    }
+    &-close {
+      display: none;
+      position: absolute;
+      top: -6px;
+      right: -10px;
+    }
+    &:hover {
+      .n20-advanced-filter-item-close {
+        display: inline-block;
+      }
+    }
+  }
+  &-content {
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  :hover {
+    border-color: $--color-primary;
+    cursor: pointer;
+  }
+  &-add {
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
+.popover-check-box {
+  max-height: 300px;
+  overflow-y: auto;
+}

package/src/components/AdvancedFilter/filterList.vue

@@ -1,11 +1,19 @@
 <template>
-  <el-form inline class="cl-advanced_filter_list">
-    <el-form-item v-for="(item, i) in dataC" :key="i" class="cl-advanced_filter_list-item" :label="item.label">
-      <slot v-if="item.slotName" :name="item.slotName"></slot>
-      <formItemInput v-else :form="form" :item="item" />
-      <i class="cl-advanced_filter-close n20-icon-yichu" @click="handleClose(item)"></i>
+  <el-form :class="prefixCls + '-body'">
+    <el-form-item
+      v-for="(item, i) in dataC"
+      :key="i"
+      :class="[prefixCls + '-item', activeClass(item)]"
+      :label="item.label"
+    >
+      <div :class="prefixCls + '-content'">
+        <slot v-if="item.slotName" :name="item.slotName"></slot>
+        <formItemInput :form="form" :item="item" @change="$emit('change')" />
+      </div>
+      <i :key="i" :class="[prefixCls + '-item-close', 'n20-icon-yichu']" @click="handleClose(item)"></i>
     </el-form-item>
-    <el-form-item>
+
+    <el-form-item :class="prefixCls + '-add'">
       <el-button v-popover:advanced_popover onlyicon plain icon="el-icon-plus" />
       <el-popover ref="advanced_popover" placement="bottom-start" trigger="click">
         <el-form>
@@ -29,6 +37,7 @@ import formItemInput from './form-item-input.vue'
 import InputSearch from '../InputSearch/index.vue'
 import filterItem from './filterItem.vue'
 import mixins from './mixins/index.js'
+
 export default {
   name: 'FilterList',
   components: {
@@ -57,6 +66,10 @@ export default {
     filterId: {
       type: String,
       default: ''
+    },
+    prefixCls: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -96,7 +109,6 @@ export default {
       })
     },
     searchFn() {
-      console.log(this.search)
       this.filterListC = this.cloneDeepFList.filter((r) => {
         return r.label.includes(this.search)
       })
@@ -115,6 +127,33 @@ export default {
         }
       })
     },
+    activeClass(item) {
+      let flag = ''
+      switch (item.type) {
+        case 'text':
+        case 'search':
+        case 'select':
+        case 'number':
+        case 'date':
+        case 'datetime':
+        case 'year':
+        case 'month':
+        case 'week':
+        case 'checkbox':
+        case 'radio':
+          flag = this.form[item.value] && this.form[item.value].length > 0 ? this.prefixCls + '-active' : ''
+          break
+        case 'numberrange':
+          flag = this.form[item.startValue] && this.form[item.endValue] ? this.prefixCls + '-active' : ''
+          break
+        case 'daterange':
+        case 'datetimerange':
+        case ' monthrange':
+          flag = this.form[item.startDate] && this.form[item.endDate] ? this.prefixCls + '-active' : ''
+          break
+      }
+      return flag
+    },
     cleared() {
       this.$emit('clear')
     }

package/src/components/AdvancedFilter/form-item-input.vue

@@ -2,16 +2,31 @@
   <el-input
     v-if="item.type === 'text' || item.type === undefined"
     v-model="form[item.value]"
-    :clearable="item | clearableF"
+    :clearable="(item.props && item.props.clearable) || false"
+    :style="{
+      width:
+        form[item.value] && form[item.value].length > 0
+          ? (context.measureText(form[item.value]).width * 1.4 < 75
+              ? 75
+              : context.measureText(form[item.value]).width * 1.4 > 396
+              ? 396
+              : context.measureText(form[item.value]).width * 1.4 + 35) + 'px'
+          : 120 - 18 - context.measureText(item.label).width * 1.4 + 'px'
+    }"
     v-bind="item.props"
-    :style="{ width: item.width || 'max-content' }"
     :placeholder="item.props && item.props.placeholder ? item.props.placeholder : $lc('请输入')"
     v-on="item.on"
   />
   <el-input
     v-else-if="item.type === 'search'"
     v-model="form[item.value]"
-    :clearable="item | clearableF"
+    :clearable="(item.props && item.props.clearable) || false"
+    :style="{
+      width:
+        form[item.value] && form[item.value].length > 0
+          ? context.measureText(form[item.value]).width * 1.4 + 40 + 'px'
+          : 120 - 18 - context.measureText(item.label).width * 1.4 + 'px'
+    }"
     readonly
     v-bind="item.props"
     v-on="item.on"
@@ -29,8 +44,20 @@
   <el-select
     v-else-if="item.type === 'select'"
     v-model="form[item.value]"
-    :clearable="item | clearableF"
+    :clearable="(item.props && item.props.clearable) || false"
     :multiple="item.multiple"
+    :style="{
+      width:
+        form[item.value] && form[item.value].length > 0
+          ? context.measureText(
+              item.options.find((r) => r.value === form[item.value] || r[item.props?.valueKey] === form[item.value])
+                .label
+            ).width *
+              1.4 +
+            48 +
+            'px'
+          : 120 - 18 - context.measureText(item.label).width * 1.4 + 'px'
+    }"
     v-bind="item.props"
     v-on="item.on"
   >
@@ -53,11 +80,29 @@
       />
     </template>
   </el-select>
-  <inputNumber v-else-if="item.type === 'number'" v-model="form[item.value]" v-bind="item.props" v-on="item.on" />
+  <inputNumber
+    v-else-if="item.type === 'number'"
+    v-model="form[item.value]"
+    :style="{
+      width:
+        form[item.value] && Math.floor(Math.log10(form[item.value])) + 1 > 0
+          ? (context.measureText(form[item.value]).width * 1.4 < 74
+              ? 74
+              : context.measureText(form[item.value]).width * 1.4 > 396
+              ? 396
+              : context.measureText(form[item.value]).width * 1.4 + 35) + 'px'
+          : 120 - 18 - context.measureText(item.label).width * 1.4 + 'px'
+    }"
+    v-bind="item.props"
+    v-on="item.on"
+  />
   <inputNumberRange
     v-else-if="item.type === 'numberrange'"
     :start-value.sync="form[item.startValue]"
     :end-value.sync="form[item.endValue]"
+    :style="{
+      width: (form[item.startValue] && Math.floor(Math.log10(form[item.startValue])) + 1 > 0 ? 202 : 166) + 'px'
+    }"
     v-bind="item.props"
     v-on="item.on"
   />
@@ -65,7 +110,8 @@
     v-else-if="['date', 'datetime', 'year', 'month', 'week'].includes(item.type)"
     v-model="form[item.value]"
     :type="item.type"
-    :clearable="item | clearableF"
+    :clearable="(item.props && item.props.clearable) || false"
+    :style="{ width: 166 + 'px' }"
     v-bind="item.props"
     v-on="item.on"
   />
@@ -74,7 +120,8 @@
     :type="item.type"
     :start-date.sync="form[item.startDate]"
     :end-date.sync="form[item.endDate]"
-    :clearable="item | clearableF"
+    :clearable="(item.props && item.props.clearable) || false"
+    style="width: 100%"
     v-bind="item.props"
     v-on="item.on"
   />
@@ -93,36 +140,40 @@ import axios from '../../utils/axios'
 import inputNumber from '../InputNumber/index.vue'
 import inputNumberRange from '../InputNumber/numberRange.vue'
 import datePickerPor from '../DatePicker/por.vue'
+
+const canvas = document.createElement('canvas')
+const context = canvas.getContext('2d')
 export default {
   components: {
     inputNumber,
     inputNumberRange,
     datePickerPor
   },
-  filters: {
-    clearableF(item) {
-      if (item.props && item.props.clearable === false) {
-        return false
-      } else {
-        return true
-      }
-    }
-  },
+
   props: {
     form: {
       type: Object,
       default: undefined
     },
+    data: {
+      type: Array,
+      default: undefined
+    },
     item: {
       type: Object,
       default: undefined
     }
   },
-  created() {
-    if (this.item.reqOptions) {
-      this.getOptions()
+  data() {
+    return {
+      context
     }
   },
+  created() {
+    // if (this.item.reqOptions) {
+    //   this.getOptions()
+    // }
+  },
   methods: {
     getOptions() {
       let reqOptions = this.item.reqOptions

package/src/components/AdvancedFilter/index.vue

@@ -4,8 +4,10 @@
       v-if="visible"
       :width="width"
       :form="model"
+      :prefix-cls="prefixCls"
       :filter-id="filterId"
       :filter-list="filterList"
+      @change="$emit('change', model)"
       @clear="$emit('clear')"
     >
       <template v-for="(item, i) in GroupData">
@@ -22,7 +24,7 @@
 import filterList from './filterList.vue'
 
 import mixins from './mixins/index.js'
-const prefixCls = 'cl-advanced_filter'
+const prefixCls = 'n20-advanced-filter'
 export default {
   name: 'AdvancedFilter',
   components: {
@@ -69,7 +71,6 @@ export default {
       showPop: false,
       showPopC: false,
       prefixCls: prefixCls,
-      // popover: undefined,
       remoteList: [],
       checkList: []
     }

package/src/components/AdvancedFilter/mixins/index.js

@@ -1,4 +1,3 @@
-import { t } from 'element-ui/lib/locale/index.js'
 import axios from '../../../utils/axios.js'
 import cloneDeep from 'lodash/cloneDeep'
 export default {
@@ -11,10 +10,17 @@ export default {
       },
       immediate: true
     },
+    filterId: {
+      handler(val) {
+        this.filterIdC = val
+      },
+      immediate: true
+    },
     model: {
       handler(val) {
         this.$emit('change', val)
-      }
+      },
+      deep: true
     }
   },
   data() {
@@ -26,14 +32,7 @@ export default {
       userNo: sessionStorage.getItem('userNo')
     }
   },
-  watch: {
-    filterId: {
-      handler(val) {
-        this.filterIdC = val
-      },
-      immediate: true
-    }
-  },
+
   methods: {
     /**
      * 保存筛选条件

package/src/components/ApprovalButtons/index.vue

@@ -127,6 +127,9 @@
     </div>
     <div v-else-if="!authList.includes('byAddTask')" class="text-c">
       <el-button v-if="authList.includes('approval')" type="primary" @click="approvalFn">{{ '批 准' | $lc }}</el-button>
+      <el-button v-if="authList.includes('approval')" type="primary" @click="approvalNext">{{
+        '批准并审批下一条' | $lc
+      }}</el-button>
       <el-button v-if="showApprovalTo" type="primary" @click="approvalToV = true">{{ '批准至' | $lc }}</el-button>
       <el-button v-if="authList.includes('rejectTo')" plain @click="rejectToB">{{ '驳回至' | $lc }}</el-button>
       <el-button v-if="authList.includes('reject')" plain @click="rejectFn">{{ '驳回至发起人' | $lc }}</el-button>
@@ -207,7 +210,7 @@ export default {
     },
     messageMax: {
       type: Number,
-      default: 50
+      default: 500
     },
     formData: {
       type: Object,
@@ -331,6 +334,7 @@ export default {
         closeTagsForBackPage(pathname)
       })
     },
+
     // 动态获取按钮
     getBtns() {
       if (!this.taskId || !this.showBtn) return false
@@ -531,6 +535,26 @@ export default {
         })
       })
     },
+    approvalNext() {
+      if (this.required && !this.messageC) {
+        return this.errMsgFn(
+          this.authList.includes('byAddTask') && this.addTaskList.length > 0 ? $lc('加签') : $lc('批准')
+        )
+      }
+      if (this.addTaskList.length > 0 && !this.addTaskType) {
+        return this.addErrFn()
+      }
+
+      this.beforeFn(this.beforeRatify, () => {
+        axios.post('/bems/activiti/admin/todo/advance', this.getParam(), { loading: false }).then(({ data }) => {
+          sessionStorage.setItem('isNext', true)
+          this.thenMsg(
+            data,
+            this.authList.includes('byAddTask') && this.addTaskList.length > 0 ? $lc('加签') : $lc('批准')
+          )
+        })
+      })
+    },
     approvalToFn(taskId) {
       this.approvalToV = false
       let param = this.getParam()

package/src/components/ApprovalRecord/approvalImgPro/index.vue

@@ -53,6 +53,12 @@
           </table>
         </div>
         <div v-if="assignee" :class="{ 'm-t-s': assigneeEnd }">{{ assignee }}</div>
+
+        <div v-if="taskCandidate" class="m-t-ss m-b-ss">
+          <div v-if="taskCandidate.cltNames.length">待审批单位：{{ taskCandidate.cltNames.join('、') }}</div>
+          <div v-if="taskCandidate.roleNames.length">待审批角色：{{ taskCandidate.roleNames.join('、') }}</div>
+          <div v-if="taskCandidate.unames.length">待审批人：{{ taskCandidate.unames.join('、') }}</div>
+        </div>
       </div>
     </el-popover>
     <el-popover ref="addTask-pop" v-model="addTaskV" trigger="manual" placement="bottom">
@@ -145,6 +151,7 @@ export default {
     return {
       assignee: undefined,
       assigneeEnd: undefined,
+      taskCandidate: undefined,
       min: 0.4,
       max: 2,
       step: 0.1,
@@ -162,7 +169,6 @@ export default {
   },
   async mounted() {
     this.svgW = this.$refs['activiti-svg-wrap']
-
     let {
       flowString,
       seqRecords,
@@ -170,7 +176,8 @@ export default {
       currAssMap = {},
       currentActivityIdList = [],
       addTask = {},
-      addTaskPre = {}
+      addTaskPre = {},
+      unApplayUserTaskCandidate = {}
     } = this.dataPro
     let flowSvg = flowString
     if (flowString.includes('bpmn2:definitions')) {
@@ -180,6 +187,7 @@ export default {
       flowSvg = await bpmn2svg(flowString)
     }
     this.setSvgAttrs(flowSvg)
+    this.setPendingUserInfo(unApplayUserTaskCandidate)
     try {
       for (let k in addTask) {
         let line = this.svgW.querySelector(`[data-element-id="${k}"] path`)
@@ -242,6 +250,7 @@ export default {
 
     document.body.addEventListener('click', this.addTaskFn)
   },
+
   deactivated() {
     this.msgV = false
     this.addTaskV = false
@@ -249,13 +258,21 @@ export default {
   beforeDestroy() {
     this.msgV = false
     this.svgPanzoom && this.svgPanzoom.dispose()
-
     document.body.removeEventListener('click', this.addTaskFn)
   },
   methods: {
     addTaskFn() {
       this.addTaskV = false
     },
+    setPendingUserInfo(data) {
+      Object.keys(data).forEach((id) => {
+        let task = this.svgW.querySelector(`[data-element-id="${id}"]`)
+        if (task) {
+          console.log('setPendingUserInfo:', data[id])
+          this.addEvent(task, { taskCandidate: data[id] }, 'unApply')
+        }
+      })
+    },
     setSvgAttrs(str) {
       this.svgW.innerHTML = str
       this.svgC = this.svgW.querySelector('svg')
@@ -520,6 +537,11 @@ export default {
         if (type === 'pending') {
           this.assignee = list.assignee
           this.assigneeEnd = list.assigneeEnd
+          this.taskCandidate = undefined
+        } else if (type === 'unApply') {
+          this.assignee = undefined
+          this.assigneeEnd = undefined
+          this.taskCandidate = list.taskCandidate
         } else {
           this.assignee = undefined
           this.assigneeEnd = list

package/src/components/DatePicker/por.vue

@@ -119,10 +119,7 @@ export default {
   props: {
     type: {
       type: String,
-      default: 'daterange',
-      validator: (value) => {
-        return ['daterange', 'datetimerange', 'monthrange'].includes(value)
-      }
+      default: 'daterange'
     },
     value: {
       type: [String, Number, Date],
@@ -204,15 +201,21 @@ export default {
               if (this.valueFormat === 'yyyy-MM-dd HH:mm:ss') str = str + ' 23:59:59'
               this.$emit('update:start-date', val[0])
               this.$emit('update:end-date', str)
+              this.$emit('start', val[0])
+              this.$emit('end', str)
               this.$emit('change', [val[0], str])
             } else {
               this.$emit('update:start-date', val[0])
               this.$emit('update:end-date', val[1])
+              this.$emit('start', val[0])
+              this.$emit('end', val[1])
               this.$emit('change', val)
             }
           } else {
             this.$emit('update:start-date', null)
             this.$emit('update:end-date', null)
+            this.$emit('start', null)
+            this.$emit('end', null)
             this.$emit('change', val)
           }
         } else {

package/src/components/FileUploadTable/index.vue

@@ -554,7 +554,7 @@ export default {
     MultipleSUccessFn(response, file, fileList, row) {
       if (fileList.length > 1) {
         let deepRow = cloneDeep(row)
-        if (!this.tableData[0].beid) {
+        if (!this.tableData[0][this.keys.url]) {
           this.tableData.shift()
         }
         setTimeout(() => {