n20-common-lib 2.22.43 → 2.22.44

package/package.json

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

package/src/components/DatePicker/por.vue

@@ -1,32 +1,44 @@
 <template>
-  <el-date-picker
-    ref="date-picker"
-    v-model="valueC"
-    class="n20-date-editor"
-    :class="{
-      'has-value': clearable && valueC,
-      [this.$attrs && this.$attrs['rule-form']]: !valueC
-    }"
-    :popper-class="
-      !clearable && type === 'datetimerange'
-        ? 'clearable-datetimerange' + ' ' + $attrs['popper-class']
-        : $attrs['popper-class']
-    "
-    :type="type"
-    :value-format="valueFormat"
-    :placeholder="'选择日期' | $lc"
-    :start-placeholder="'开始日期' | $lc"
-    :end-placeholder="'结束日期' | $lc"
-    :picker-options="pickerOptionsAs"
-    :clearable="clearable"
-    v-bind="$attrs"
-    v-on="listeners"
-  />
+  <div class="n20-date-picker-por" :class="{ 'has-long-term': showLongTermCheckbox }">
+    <el-date-picker
+      ref="date-picker"
+      v-model="valueC"
+      class="n20-date-editor"
+      :class="{
+        'has-value': clearable && valueC,
+        [this.$attrs && this.$attrs['rule-form']]: !valueC
+      }"
+      :popper-class="
+        !clearable && pickerType === 'datetimerange'
+          ? 'clearable-datetimerange' + ' ' + $attrs['popper-class']
+          : $attrs['popper-class']
+      "
+      :type="pickerType"
+      :value-format="valueFormat"
+      :placeholder="'选择日期' | $lc"
+      :start-placeholder="'开始日期' | $lc"
+      :end-placeholder="'结束日期' | $lc"
+      :picker-options="pickerOptionsAs"
+      :clearable="clearable"
+      v-bind="$attrs"
+      v-on="listeners"
+    />
+    <el-checkbox
+      v-if="showLongTermCheckbox"
+      v-model="longTermC"
+      class="n20-date-picker-por__long-term"
+      :disabled="longTermDisabled"
+    >
+      {{ '长期' | $lc }}
+    </el-checkbox>
+  </div>
 </template>
 
 <script>
-import { $lc } from '../../utils/i18n/index'
 import dayjs from 'dayjs'
+
+import { $lc } from '../../utils/i18n/index'
+
 let startDate = ''
 
 const onPick = ({ maxDate, minDate }) => {
@@ -251,25 +263,20 @@ export default {
       type: Boolean,
       default: true
     },
+    showLongTerm: {
+      type: Boolean,
+      default: false
+    },
+    longTerm: {
+      type: Boolean,
+      default: false
+    },
     pickerOptions: {
       type: Object,
       default: () => ({})
     }
   },
   data() {
-    let shortcuts = undefined
-    if (this.shortcuts && ['daterange', 'datetimerange'].includes(this.type))
-      shortcuts = this.startStop ? shortcuts_2 : shortcuts_1
-
-    this.pickerOptionsAs = Object.assign(
-      {
-        disabledDate: this.minNow ? disabledDate_1 : this.maxNow ? disabledDate_2 : undefined,
-        shortcuts
-        // onPick
-      },
-      this.pickerOptions
-    )
-
     this.listeners = Object.assign({}, this.$listeners, {
       input: () => {},
       change: () => {}
@@ -278,9 +285,56 @@ export default {
     return {}
   },
   computed: {
+    isRangeType() {
+      return ['daterange', 'monthrange', 'datetimerange'].includes(this.type)
+    },
+    showLongTermCheckbox() {
+      return this.showLongTerm && this.isRangeType
+    },
+    isLongTerm() {
+      return this.showLongTermCheckbox && this.longTerm
+    },
+    pickerType() {
+      if (!this.isLongTerm) return this.type
+      const typeMap = {
+        daterange: 'date',
+        datetimerange: 'datetime',
+        monthrange: 'month'
+      }
+      return typeMap[this.type] || this.type
+    },
+    pickerOptionsAs() {
+      let shortcuts = undefined
+      if (!this.isLongTerm && this.shortcuts && ['daterange', 'datetimerange'].includes(this.type)) {
+        shortcuts = this.startStop ? shortcuts_2 : shortcuts_1
+      }
+
+      return Object.assign(
+        {
+          disabledDate: this.minNow ? disabledDate_1 : this.maxNow ? disabledDate_2 : undefined,
+          shortcuts
+          // onPick
+        },
+        this.pickerOptions
+      )
+    },
+    longTermC: {
+      get() {
+        return this.longTerm
+      },
+      set(val) {
+        this.handleLongTermChange(val)
+      }
+    },
+    longTermDisabled() {
+      return this.$attrs.disabled === '' || this.$attrs.disabled === true || this.$attrs.disabled === 'disabled'
+    },
     valueC: {
       get() {
-        if (['daterange', 'monthrange', 'datetimerange'].includes(this.type)) {
+        if (this.isRangeType) {
+          if (this.isLongTerm) {
+            return this.startDate || null
+          }
           if (this.startDate && this.endDate) {
             return [this.startDate, this.endDate]
           } else {
@@ -291,7 +345,11 @@ export default {
         }
       },
       set(val) {
-        if (['daterange', 'monthrange', 'datetimerange'].includes(this.type)) {
+        if (this.isRangeType) {
+          if (this.isLongTerm) {
+            this.handleLongTermDateChange(val)
+            return
+          }
           if (val && val[0]) {
             if (this.type === 'monthrange' && ['yyyy-MM-dd', 'yyyy-MM-dd HH:mm:ss'].includes(this.valueFormat)) {
               let end = new Date(val[1])
@@ -329,6 +387,51 @@ export default {
     }
   },
   methods: {
+    handleLongTermChange(val) {
+      this.$emit('update:long-term', val)
+
+      if (val) {
+        this.$emit('update:end-date', undefined)
+        this.$emit('end', undefined)
+        this.$emit('changeLongTerm', {
+          longTerm: true,
+          startTime: this.startDate || null
+        })
+      } else {
+        this.$emit('update:start-date', null)
+        this.$emit('update:end-date', null)
+        this.$emit('start', null)
+        this.$emit('end', null)
+        this.$emit('changeLongTerm', {
+          longTerm: false,
+          startTime: null
+        })
+        this.$emit('change', null)
+      }
+    },
+    handleLongTermDateChange(val) {
+      if (val) {
+        this.$emit('update:start-date', val)
+        this.$emit('update:end-date', undefined)
+        this.$emit('start', val)
+        this.$emit('end', undefined)
+        this.$emit('change', [val, undefined])
+        this.$emit('changeLongTerm', {
+          longTerm: true,
+          startTime: val
+        })
+      } else {
+        this.$emit('update:start-date', null)
+        this.$emit('update:end-date', undefined)
+        this.$emit('start', null)
+        this.$emit('end', undefined)
+        this.$emit('change', val)
+        this.$emit('changeLongTerm', {
+          longTerm: true,
+          startTime: null
+        })
+      }
+    },
     HandleBlur() {
       let startSh = shortcuts_2.find((s) => s.text.includes($lc('开始')))
       let endSh = shortcuts_2.find((s) => s.text.includes($lc('截止')))
@@ -348,3 +451,29 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.n20-date-picker-por {
+  display: inline-block;
+}
+
+.n20-date-picker-por > .n20-date-editor {
+  width: 100%;
+}
+
+.n20-date-picker-por.has-long-term {
+  display: inline-flex;
+  align-items: center;
+}
+
+.n20-date-picker-por.has-long-term > .n20-date-editor {
+  flex: 1;
+  width: auto;
+  min-width: 0;
+}
+
+.n20-date-picker-por__long-term {
+  margin-left: 8px;
+  white-space: nowrap;
+}
+</style>

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>
@@ -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'
@@ -506,8 +501,7 @@ export default {
       previewName: undefined,
       previewSameOrg: false,
       seeRow: {},
-      officeStatus: false,
-      sortable: null
+      officeStatus: false
     }
   },
   computed: {
@@ -550,63 +544,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
@@ -1091,21 +1053,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>