n20-common-lib 2.22.43 → 2.22.45

package/package.json

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

package/src/components/DatePicker/index.vue

@@ -1,16 +1,29 @@
 <template>
-  <el-date-picker
-    ref="date-picker"
-    class="n20-date-editor"
-    :class="{ 'has-value': clearable && value }"
-    v-bind="$attrs"
-    :value="value"
-    :clearable="clearable"
-    v-on="$listeners"
-  />
+  <div class="n20-date-picker" :class="{ 'has-long-term': showLongTerm }">
+    <el-date-picker
+      ref="date-picker"
+      class="n20-date-editor"
+      :class="{ 'has-value': clearable && value }"
+      v-bind="$attrs"
+      :value="value"
+      :clearable="clearable"
+      :disabled="datePickerDisabled"
+      v-on="listeners"
+    />
+    <el-checkbox
+      v-if="showLongTerm"
+      v-model="longTermC"
+      class="n20-date-picker__long-term"
+      :disabled="checkboxDisabled"
+    >
+      {{ longTermLabel | $lc }}
+    </el-checkbox>
+  </div>
 </template>
 
 <script>
+const LONG_TERM_DATE = new Date(9999, 11, 31, 23, 59, 59)
+
 export default {
   name: 'DatePicker',
   props: {
@@ -21,7 +34,139 @@ export default {
     clearable: {
       type: Boolean,
       default: true
+    },
+    showLongTerm: {
+      type: Boolean,
+      default: false
+    },
+    longTerm: {
+      type: Boolean,
+      default: false
+    },
+    longTermLabel: {
+      type: String,
+      default: '长期'
+    }
+  },
+  computed: {
+    listeners() {
+      return Object.assign({}, this.$listeners, {
+        input: (val) => {
+          this.$emit('input', val)
+          if (this.longTerm) {
+            this.$emit('update:long-term', false)
+            this.$emit('changeLongTerm', {
+              longTerm: false,
+              value: val
+            })
+          }
+        }
+      })
+    },
+    longTermC: {
+      get() {
+        return this.longTerm
+      },
+      set(val) {
+        this.handleLongTermChange(val)
+      }
+    },
+    datePickerDisabled() {
+      return this.longTerm || this.isDisabled
+    },
+    checkboxDisabled() {
+      return this.isDisabled
+    },
+    isDisabled() {
+      return this.$attrs.disabled === '' || this.$attrs.disabled === true || this.$attrs.disabled === 'disabled'
+    }
+  },
+  methods: {
+    handleLongTermChange(val) {
+      this.$emit('update:long-term', val)
+
+      if (val) {
+        const longTermValue = this.getLongTermValue()
+        this.$emit('input', longTermValue)
+        this.$emit('change', longTermValue)
+        this.$emit('changeLongTerm', {
+          longTerm: true,
+          value: longTermValue
+        })
+      } else {
+        const currentValue = this.getCurrentValue()
+        this.$emit('input', currentValue)
+        this.$emit('change', currentValue)
+        this.$emit('changeLongTerm', {
+          longTerm: false,
+          value: currentValue
+        })
+      }
+    },
+    getLongTermValue() {
+      return this.getDateValue(LONG_TERM_DATE)
+    },
+    getCurrentValue() {
+      return this.getDateValue(new Date())
+    },
+    getDateValue(date) {
+      const valueFormat = this.$attrs['value-format']
+
+      if (valueFormat === 'timestamp') {
+        return date.getTime()
+      }
+
+      if (!valueFormat) {
+        return new Date(date.getTime())
+      }
+
+      const year = date.getFullYear() + ''
+      const month = this.padDateValue(date.getMonth() + 1)
+      const day = this.padDateValue(date.getDate())
+      const hours = this.padDateValue(date.getHours())
+      const minutes = this.padDateValue(date.getMinutes())
+      const seconds = this.padDateValue(date.getSeconds())
+
+      return valueFormat
+        .replace(/yyyy/g, year)
+        .replace(/YYYY/g, year)
+        .replace(/MM/g, month)
+        .replace(/dd/g, day)
+        .replace(/DD/g, day)
+        .replace(/HH/g, hours)
+        .replace(/hh/g, hours)
+        .replace(/mm/g, minutes)
+        .replace(/ss/g, seconds)
+    },
+    padDateValue(value) {
+      return value > 9 ? value + '' : '0' + value
     }
   }
 }
 </script>
+
+<style scoped>
+.n20-date-picker {
+  display: inline-block;
+}
+
+.n20-date-picker > .n20-date-editor {
+  width: 100%;
+}
+
+.n20-date-picker.has-long-term {
+  display: inline-flex;
+  align-items: center;
+}
+
+.n20-date-picker.has-long-term > .n20-date-editor {
+  flex: 1;
+  width: auto;
+  min-width: 0;
+}
+
+.n20-date-picker__long-term {
+  margin-left: 8px;
+  white-space: nowrap;
+}
+</style>

package/src/components/DatePicker/por.vue

@@ -27,6 +27,7 @@
 <script>
 import { $lc } from '../../utils/i18n/index'
 import dayjs from 'dayjs'
+
 let startDate = ''
 
 const onPick = ({ maxDate, minDate }) => {

package/src/components/FileUploadTable/index.vue

@@ -32,15 +32,11 @@
       :height="height"
       border
       @selection-change="(selection) => (selectionList = selection)"
+      @sort-change="onSortChange"
     >
       <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"
@@ -77,7 +73,7 @@
             </div>
           </slot>
         </el-table-column>
-        <el-table-column :label="'附件名称' | $lc" :prop="keys.name">
+        <el-table-column :label="'附件名称' | $lc" :prop="keys.name" sortable="custom">
           <slot slot="header" slot-scope="scope" name="name-header" :column="scope.column">{{ '附件名称' | $lc }}</slot>
           <slot slot-scope="{ row }" name="name" :row="row">
             <span v-if="readonly">{{ row[keys.name] ? row[keys.name].replace(/\.[A-z0-9]+$/, '') : '' }}</span>
@@ -272,7 +268,7 @@
       :close-on-click-modal="false"
       :destroy-on-open="true"
     >
-      <el-select v-model="bathType" class="m-b-s" clearable @change="handleBathChange">
+      <el-select v-model="bathType" class="m-b-s w-100p" clearable @change="handleBathChange">
         <el-option
           v-for="item in typeOptions"
           :key="item.type"
@@ -292,7 +288,7 @@
         :multiple="true"
         :show-file-list="true"
         :action="apiPrefix ? apiPrefix + action : action"
-        :data="fileData"
+        :data="_batchFileData || fileData"
         :headers="headers"
         :accept="fileAccept"
         :size="fileSize"
@@ -322,7 +318,6 @@ 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'
@@ -507,7 +502,8 @@ export default {
       previewSameOrg: false,
       seeRow: {},
       officeStatus: false,
-      sortable: null
+      // 批量上传使用的文件数据（避免直接修改计算属性）
+      _batchFileData: null
     }
   },
   computed: {
@@ -550,63 +546,31 @@ 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
+    // 点击附件名称表头排序（替代原拖动排序）
+    onSortChange({ prop, order }) {
+      // 仅处理附件名称列；order 为 null（取消排序）时不处理
+      if (prop !== this.keys.name || !order) {
+        return
       }
+      const nameKey = this.keys.name
+      // 与显示一致：去除扩展名后再比较
+      const stripName = (v) => (v == null ? '' : String(v).replace(/\.[A-z0-9]+$/, ''))
+      const dir = order === 'ascending' ? 1 : -1
+      const sorted = [...this.tableData].sort(
+        (a, b) => stripName(a[nameKey]).localeCompare(stripName(b[nameKey]), 'zh-CN', { numeric: true }) * dir
+      )
+      // 原地更新 tableData（沿用现有 splice 修改 prop 数组的模式）
+      this.tableData.splice(0, this.tableData.length, ...sorted)
+      this.$emit('sort', this.tableData.slice())
+      this.saveFileSort().catch(() => {
+        this.$message.error($lc('附件排序保存失败'))
+      })
     },
     async saveFileSort() {
       const sortList = this.tableData
@@ -783,20 +747,32 @@ export default {
       if (bu) return bu(file)
     },
     handleBathChange() {
-      let dto = JSON.parse(this.dataPorp.fileData.data)
+      // 创建新的文件数据对象，避免直接修改计算属性
+      let fileData = this.fileData || {}
+      let dto = JSON.parse(fileData.data || '{}')
       dto[this.keys.type] = this.bathType
-      this.fileData.data = JSON.stringify(dto)
+      this._batchFileData = {
+        ...fileData,
+        data: JSON.stringify(dto)
+      }
     },
     batchUploadFn() {
       let $uploadwrap = this.$refs['upload-batch']
-      let fileList = $uploadwrap.fileList
-      if (fileList.length !== 0 && fileList.every((f) => f.status === 'success')) {
-        this.visibleBatch = false
-      }
+      // 直接提交上传，关闭对话框的逻辑在 batchSuccess 回调中处理
       $uploadwrap.submit()
     },
     batchSuccess(response, file, fileList) {
-      let row = { ...this.dataPorp.keys }
+      // 创建完整的行对象，初始化状态字段
+      let row = {
+        id: 'n' + Math.random(),
+        [this.keys.name]: '',
+        [this.keys.type]: this.bathType,
+        [this.keys.time]: '',
+        [this.keys.user]: JSON.parse(sessionStorage.getItem('userInfo')).uname,
+        _percent: 0,
+        _status: undefined,
+        _typeDisabled: false
+      }
       this.tableData.splice(0, 0, row)
       this.$nextTick(() => {
         this.onSuccessFn(response, file, fileList, row)
@@ -954,13 +930,8 @@ export default {
         let FD = new FormData()
         FD.append(opt.filename, opt.file)
 
-        let data
-        if (window._fileData) {
-          data = window._fileData
-          delete window._fileData
-        } else {
-          data = opt.data
-        }
+        // 优先使用 opt.data，其次使用 this.fileData，移除全局变量 window._fileData 的使用
+        let data = opt.data || this.fileData
 
         if (data) {
           let dto = JSON.parse(data.data)
@@ -1034,7 +1005,7 @@ export default {
           _percent = 99
           _status = 'error'
         } else {
-          _percent = 99
+          _percent = 100
           _status = 'success'
         }
         setTimeout(() => {
@@ -1091,21 +1062,4 @@ 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>