n20-common-lib 2.22.40 → 2.22.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.22.40",
+  "version": "2.22.42",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/css/approve-card.scss

@@ -18,7 +18,90 @@
     cursor: default;
   }
   .result-left-name {
+    flex: 0 0 20%;
     width: 20%;
+    min-width: 80px;
+  }
+
+  .approval-info-grid {
+    --approval-info-job-column: minmax(0, 0.9fr);
+    --approval-info-app-column: minmax(0, 0.8fr);
+    --approval-info-cost-column: minmax(170px, max-content);
+    --approval-info-detail-column: minmax(70px, max-content);
+
+    display: grid;
+    grid-template-columns:
+      minmax(0, 1.1fr)
+      minmax(0, 1.1fr)
+      var(--approval-info-job-column)
+      minmax(0, 1.4fr)
+      minmax(0, 0.8fr)
+      var(--approval-info-app-column)
+      var(--approval-info-cost-column)
+      var(--approval-info-detail-column);
+    align-items: center;
+    column-gap: 0;
+    width: 80%;
+    min-width: 0;
+  }
+
+  .approval-info-grid > * {
+    box-sizing: border-box;
+    min-width: 0;
+    padding-right: 20px;
+  }
+
+  .approval-info-grid--no-job {
+    --approval-info-job-column: 0;
+  }
+
+  .approval-info-grid--no-app {
+    --approval-info-app-column: 0;
+  }
+
+  .approval-info-grid--no-cost {
+    --approval-info-cost-column: 0;
+  }
+
+  .approval-info-grid--no-detail {
+    --approval-info-detail-column: 0;
+  }
+
+  .approval-info-member {
+    grid-column: 1;
+  }
+
+  .approval-info-dept {
+    grid-column: 2;
+  }
+
+  .approval-info-job {
+    grid-column: 3;
+  }
+
+  .approval-info-role {
+    grid-column: 4;
+  }
+
+  .approval-info-assignee {
+    grid-column: 5;
+  }
+
+  .approval-info-app {
+    grid-column: 6;
+  }
+
+  .approval-info-cost {
+    grid-column: 7;
+    justify-self: start;
+    white-space: nowrap;
+  }
+
+  .approval-info-detail {
+    grid-column: 8;
+    justify-self: start;
+    padding-right: 0;
+    white-space: nowrap;
   }
 
   .n20-time {
@@ -40,6 +123,10 @@
     color: $--color-text-primary;
   }
 
+  .appOrPc-item {
+    margin-right: 0;
+  }
+
   .worker-icon {
     margin-right: 4px;
     color: $--color-text-placeholder;

package/src/components/ApprovalCard/index.vue

@@ -24,22 +24,26 @@
             </div>
             <div
               v-title="item.assignee"
-              class="flex-box flex-item n20-worker m-r-s text-ellipsis"
+              class="flex-item n20-worker m-r-s approval-info-grid"
+              :class="{
+                'approval-info-grid--no-job': !item.job,
+                'approval-info-grid--no-app':
+                  item.result === 0 || item.appOrPc === null || item.appOrPc === '' || item.appOrPc === undefined,
+                'approval-info-grid--no-detail': item.showConnect !== '1'
+              }"
               :show-overflow-tooltip="true"
             >
               <div
                 v-title="item.memberName"
                 :show-overflow-tooltip="true"
-                class="flex-item n20-worker m-r-s text-ellipsis"
-                style="width: 250px"
+                class="n20-worker text-ellipsis approval-info-member"
               >
                 {{ item.memberName }}
               </div>
               <div
                 v-title="item.deptName"
                 :show-overflow-tooltip="true"
-                class="flex-item n20-worker m-r-s text-ellipsis"
-                style="width: 250px"
+                class="n20-worker text-ellipsis approval-info-dept"
               >
                 {{ item.deptName }}
               </div>
@@ -47,37 +51,39 @@
                 v-if="item.job"
                 v-title="item.job"
                 :show-overflow-tooltip="true"
-                class="flex-item n20-worker m-r-s text-ellipsis"
-                style="width: 250px"
+                class="n20-worker text-ellipsis approval-info-job"
               >
                 {{ item.job }}
               </div>
               <div
                 v-title="item.roleName"
-                class="flex-item n20-worker text-ellipsis"
+                class="n20-worker text-ellipsis approval-info-role"
                 :show-overflow-tooltip="true"
-                style="width: 250px"
               >
                 {{ item.roleName }}
               </div>
               <div
                 v-if="item.result !== 0"
                 v-title="item.assignee"
-                class="n20-worker text-ellipsis"
-                style="width: 180px"
+                class="n20-worker text-ellipsis approval-info-assignee"
                 :show-overflow-tooltip="true"
               >
                 <span class="worker-icon n20-icon-user"></span>{{ item.assignee }}
               </div>
               <div
                 v-if="item.result !== 0 && item.appOrPc !== null && item.appOrPc !== '' && item.appOrPc !== undefined"
+                class="n20-worker text-ellipsis appOrPc-item approval-info-app"
               >
                 <span v-if="item.outTitle">{{ item.outTitle }}</span>
                 <span v-else>
                   {{ item.appOrPc === '1' ? 'PC端审批' : item.appOrPc === '2' ? '外部系统审批' : 'App端审批' | $lc }}
                 </span>
               </div>
-              <div v-if="item.showConnect === '1'" class="m-l-s">
+              <div class="approval-info-cost">
+                <span>审批时长：</span>
+                <span>{{ item.approvalCost }}</span>
+              </div>
+              <div v-if="item.showConnect === '1'" class="approval-info-detail">
                 <span class="pointer color-ccc f-s-s" @click="seeDetail(item)"
                   >{{ '查看详情' | $lc }} <i class="el-icon-arrow-right"></i
                 ></span>
@@ -132,38 +138,48 @@
                         </div>
                         <div
                           v-title="row.assignee"
-                          class="flex-box flex-item n20-worker m-r-s text-ellipsis"
+                          class="flex-item n20-worker m-r-s approval-info-grid"
+                          :class="{
+                            'approval-info-grid--no-job': !row.job,
+                            'approval-info-grid--no-app': true,
+                            'approval-info-grid--no-cost': true,
+                            'approval-info-grid--no-detail': true
+                          }"
                           :show-overflow-tooltip="true"
                         >
                           <div
                             v-title="row.memberName"
                             :show-overflow-tooltip="true"
-                            class="flex-item n20-worker m-r-s text-ellipsis"
-                            style="width: 250px"
+                            class="n20-worker text-ellipsis approval-info-member"
                           >
                             {{ row.memberName }}
                           </div>
                           <div
                             v-title="row.deptName"
                             :show-overflow-tooltip="true"
-                            class="flex-item n20-worker m-r-s text-ellipsis"
-                            style="width: 250px"
+                            class="n20-worker text-ellipsis approval-info-dept"
                           >
                             {{ row.deptName }}
                           </div>
+                          <div
+                            v-if="row.job"
+                            v-title="row.job"
+                            :show-overflow-tooltip="true"
+                            class="n20-worker text-ellipsis approval-info-job"
+                          >
+                            {{ row.job }}
+                          </div>
                           <div
                             v-title="row.roleName"
-                            class="flex-item n20-worker text-ellipsis"
+                            class="n20-worker text-ellipsis approval-info-role"
                             :show-overflow-tooltip="true"
-                            style="width: 250px"
                           >
                             {{ row.roleName }}
                           </div>
                           <div
                             v-if="row.result !== 0"
                             v-title="row.assignee"
-                            class="n20-worker text-ellipsis"
-                            style="width: 180px"
+                            class="n20-worker text-ellipsis approval-info-assignee"
                             :show-overflow-tooltip="true"
                           >
                             <span class="worker-icon n20-icon-user"></span>{{ row.assignee }}
@@ -428,6 +444,10 @@ export default {
     align: {
       type: String,
       default: 'left-right'
+    },
+    seeTypes: {
+      type: RegExp,
+      default: /\.(jpg|png|gif|svg|pdf|swf|xlsx|xls|docx|doc|txt)$/i
     }
   },
   data() {
@@ -464,7 +484,7 @@ export default {
       imgType: /\.(jpg|png1|gif|svg)$/i,
       previewName: '',
       previewSameOrg: false,
-      seeTypes: /\.(jpg|png|gif|svg|pdf|swf|xlsx|xls|docx|doc)$/i,
+
       seeRow: {},
       showFlowHistory: true,
       showFlowHistoryChild: true
@@ -513,6 +533,7 @@ export default {
       let approvalData = []
       data?.forEach((item) => {
         let _item = {
+          approvalCost: item.approvalCost || '--',
           job: item.job || '',
           isShow: item.isShow, //是否显示
           endTime: item.endTime || '',

package/src/components/FileUploadTable/index.vue

@@ -25,6 +25,7 @@
       </div>
     </div>
     <el-table
+      ref="elTable"
       :key="tableKey"
       :data="tableData"
       :row-key="keys.rowKey"
@@ -35,6 +36,11 @@
       <slot name="selection-column">
         <el-table-column type="selection" width="50" align="center" />
       </slot>
+      <el-table-column :label="'排序' | $lc" width="50" align="center">
+        <template slot-scope="{ row }">
+          <i class="n20-icon-tuodong file-upload-table__drag-handle" :data-row-key="row[keys.rowKey]"></i>
+        </template>
+      </el-table-column>
       <template v-if="dataPorp.slotHeader">
         <el-table-column
           v-for="item in dataPorp.slotHeader"
@@ -316,6 +322,7 @@ import aiCheckDialog from './aiCheckDialog.vue'
 import getJsonc from '../../assets/getJsonc.js'
 import _axios from 'axios'
 import dayjs from 'dayjs'
+import Sortable from 'sortablejs'
 import XEUtils from 'xe-utils'
 
 import 'viewerjs/dist/viewer.css'
@@ -394,7 +401,7 @@ export default {
     },
     action: {
       type: String,
-      default: '/bems/1.0/attach'
+      default: '/neams/eamsbaserecord/batchSavejson'
     },
     batchPrintMethod: {
       type: Function,
@@ -499,7 +506,8 @@ export default {
       previewName: undefined,
       previewSameOrg: false,
       seeRow: {},
-      officeStatus: false
+      officeStatus: false,
+      sortable: null
     }
   },
   computed: {
@@ -542,12 +550,81 @@ export default {
       },
       immediate: true,
       deep: true
+    },
+    tableKey() {
+      this.initSortable()
     }
   },
   mounted() {
     this.getConfiguration()
+    this.initSortable()
+  },
+  beforeDestroy() {
+    this.destroySortable()
   },
   methods: {
+    initSortable() {
+      this.$nextTick(() => {
+        this.destroySortable()
+
+        const $tbody = this.$refs.elTable?.$el?.querySelector('.el-table__body-wrapper > table > tbody')
+        if (!$tbody) {
+          return
+        }
+
+        this.sortable = Sortable.create($tbody, {
+          handle: '.file-upload-table__drag-handle',
+          ghostClass: 'file-upload-table__sortable-ghost',
+          setData(dataTransfer) {
+            dataTransfer.setData('Text', '')
+          },
+          onEnd: ({ oldIndex, newIndex }) => {
+            if (
+              oldIndex === newIndex ||
+              oldIndex === undefined ||
+              newIndex === undefined ||
+              oldIndex < 0 ||
+              newIndex < 0
+            ) {
+              return
+            }
+
+            const targetRow = this.tableData.splice(oldIndex, 1)[0]
+            if (!targetRow) {
+              return
+            }
+            this.tableData.splice(newIndex, 0, targetRow)
+            this.$emit('sort', this.tableData.slice())
+            this.saveFileSort().catch(() => {
+              this.$message.error($lc('附件排序保存失败'))
+            })
+          }
+        })
+      })
+    },
+    destroySortable() {
+      if (this.sortable) {
+        this.sortable.destroy()
+        this.sortable = null
+      }
+    },
+    async saveFileSort() {
+      const sortList = this.tableData
+        .map((row, index) => ({
+          beid: row.beid || row[this.keys.rowKey],
+          fileSort: String(index + 1)
+        }))
+        .filter((item) => item.beid)
+
+      if (!sortList.length) {
+        return
+      }
+
+      await axios.post(
+        this.apiPrefix ? `${this.apiPrefix}/neams/eamsbaserecord/fileSort` : '/neams/eamsbaserecord/fileSort',
+        sortList
+      )
+    },
     // ai校验取消
     aiCheckCancel(beid) {
       this.tableData.forEach((item) => {
@@ -1014,4 +1091,21 @@ export default {
   right: 46px;
   top: 10px;
 }
+
+.file-upload-table__drag-handle {
+  display: inline-block;
+  color: #909399;
+  font-size: 16px;
+  cursor: move;
+}
+
+.file-upload-table__drag-handle:hover {
+  color: #606266;
+}
+
+.file-upload-table__sortable-ghost {
+  opacity: 0.8;
+  color: #fff !important;
+  background: #42b983 !important;
+}
 </style>

package/src/components/Upload/index.vue

@@ -99,7 +99,7 @@ export default {
     },
     action: {
       type: String,
-      default: '/bems/1.0/attach'
+      default: '/neams/eamsbaserecord/batchSavejson'
     },
     list: {
       type: Array,