n20-common-lib 2.9.13 → 2.9.14

package/src/components/Preview/index.vue

@@ -0,0 +1,199 @@
+<template>
+  <Dialog
+    v-drag
+    class="p-a-0"
+    :title="'附件预览' | $lc"
+    :visible.sync="visibleP"
+    top="4vh"
+    width="96%"
+    append-to-body
+    :close-on-click-modal="false"
+    @close="closeSee"
+  >
+    <span class="file-upload-table_preview-pn"> </span>
+    <div v-if="visiblePv" class="p-a" style="height: 82vh">
+      <!--  <ViewerImg v-if="imgType.test(previewName)" :options="viewerOptions" style="height: 100%">
+        <img :src="previewUrl" :alt="previewName" style="display: none" />
+      </ViewerImg> -->
+      <component
+        :is="previewSameOrg ? 'object' : 'div'"
+        :key="previewUrl"
+        :data="previewUrl"
+        style="width: 100%; height: calc(100% - 30px)"
+      >
+        <div class="flex-column flex-c flex-v" style="height: 100%">
+          <i class="el-icon-s-release" style="font-size: 60px; color: #999"></i>
+          <!-- <span style="margin-top: 16px">
+            {{ '不支持在线预览，请' | $lc }}
+            <a :href="previewUrl" :download="previewName || previewUrl">下载</a>
+            到本地查看
+          </span> -->
+          <span style="margin-top: 16px">
+            {{ '不支持在线预览，请' | $lc }}
+            <a :href="previewUrl" :download="previewName || previewUrl">{{ '下载' | $lc }}</a
+            >{{ '到本地查看' | $lc }}
+          </span>
+        </div>
+      </component>
+      <div class="flex-box flex-c flex-v m-t-s">
+        <el-button round onlyicon plain size="mini" icon="el-icon-back" @click="preSee" />
+        <span v-if="fileList.length > 0" class="m-l-s m-r-s">{{ index + 1 }}/{{ fileList.length }}</span>
+        <el-button round onlyicon plain size="mini" icon="el-icon-right" @click="nextSee" />
+      </div>
+    </div>
+  </Dialog>
+</template>
+<script>
+import importG from '../../utils/importGlobal.js'
+import Dialog from '../Dialog/index.vue'
+const ViewerImg = async function () {
+  let { component } = await importG('v-viewer', () => import(/*webpackChunkName: "v-viewer"*/ 'v-viewer'))
+  return component
+}
+export default {
+  name: 'Preview',
+  components: {
+    ViewerImg,
+    Dialog
+  },
+  props: {
+    apiPrefix: {
+      type: String,
+      default: undefined
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    fileList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+    // seeRow: {
+    //   type: Object,
+    //   default: () => {}
+    // }
+  },
+  data() {
+    this.viewerOptions = {
+      debug: true,
+      inline: true,
+      scalable: false, // 不显示水平(垂直)翻转
+      navbar: false,
+      button: false,
+      title: true,
+      toolbar: {
+        zoomIn: true,
+        zoomOut: true,
+        oneToOne: true,
+        reset: true,
+        rotateLeft: true,
+        rotateRight: true,
+        flipHorizontal: true,
+        flipVertical: true,
+        prev: false,
+        play: false,
+        next: false
+      }
+    }
+    return {
+      name: '',
+      // 附件预览
+      imgType: /\.jpg|\.png|\.gif|\.jpeg|\.svg$/i,
+      seeTypes: /\.(jpg|png|gif|svg|pdf|swf|xlsx|xls|docx|doc)$/i,
+      previewUrl: undefined,
+      previewName: undefined,
+      previewSameOrg: false,
+      visiblePv: false,
+      visiblePvT: null,
+      visibleP: false,
+      index: 0
+    }
+  },
+
+  methods: {
+    async preSee() {
+      if (this.fileList.length > 0) {
+        if (this.index === 0) {
+          this.index = this.fileList.length - 1
+        } else {
+          this.index--
+        }
+        const { url, name, sameOrg } = await this.getFileInfo(this.fileList[this.index])
+        if (url) {
+          this.previewSameOrg = sameOrg
+          this.previewUrl = url
+          this.previewName = name
+        }
+      } else {
+        this.$emit('preSee')
+      }
+    },
+    async nextSee() {
+      if (this.fileList.length > 0) {
+        if (this.index === this.fileList.length - 1) {
+          this.index = 0
+        } else {
+          this.index++
+        }
+        const { url, name, sameOrg } = await this.getFileInfo(this.fileList[this.index])
+        if (url) {
+          this.previewSameOrg = sameOrg
+          this.previewUrl = url
+          this.previewName = name
+        }
+      } else {
+        this.$emit('nextSee')
+      }
+    },
+
+    async fileShow(id, fileName = '') {
+      let selectid = id
+      this.index = 0
+      if (this.fileList.length > 0) {
+        selectid = this.fileList[this.index]
+      }
+      this.name = fileName
+      const { url, name, sameOrg } = await this.getFileInfo(selectid)
+      if (url) {
+        this.previewSameOrg = sameOrg
+        this.previewUrl = url
+        this.previewName = name
+        this.visibleP = true
+        clearTimeout(this.visiblePvT)
+        this.visiblePv = true
+      }
+    },
+    async getFileInfo(id) {
+      const response = await this.$axios.post(
+        this.apiPrefix ? this.apiPrefix + '/neams/eamsbaserecord/downloadFile' : '/neams/eamsbaserecord/downloadFile',
+        { beid: id },
+        { responseType: 'blob', loading: true }
+      )
+      const blob = response
+      // 下载文件名
+      const name = this.name || blob.name
+      let url = ''
+      if (!this.seeTypes.test(name)) {
+        url = URL.createObjectURL(blob)
+      } else {
+        url = `/api/onlinePreview?beid=${id}`
+      }
+      const sameOrg = this.seeTypes.test(name) || this.seeTypes.test(url)
+      console.log(url, name, sameOrg)
+      return {
+        url,
+        name,
+        sameOrg
+      }
+    },
+    closeSee() {
+      this.previewUrl && URL.revokeObjectURL(this.previewUrl)
+      this.previewUrl = undefined
+      this.visibleP = false
+    }
+  }
+}
+</script>

package/src/components/SelectDatePickerPro/customDatePicker.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {}
+</script>

package/src/components/SelectDatePickerPro/halfYearPicker.vue

@@ -0,0 +1,165 @@
+<template>
+  <el-popover
+    ref="popover"
+    v-model="showHalfYear"
+    popper-class="half-year-picker el-date-picker"
+    width="324"
+    placement="bottom-start"
+    trigger="click"
+  >
+    <div class="el-picker-panel__body">
+      <div class="el-date-picker__header el-date-picker__header--bordered">
+        <button
+          type="button"
+          aria-label="前一年"
+          class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
+          @click="prev"
+        ></button>
+        <span role="button" class="el-date-picker__header-label" @click="handleYear">{{ year }}{{ '年' | $lc }}</span>
+        <button
+          type="button"
+          aria-label="后一年"
+          class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
+          @click="next"
+        ></button>
+      </div>
+
+      <div v-if="isHalfYear" class="half-year-picker__grid">
+        <el-button
+          type="text"
+          class="half-year-picker__btn"
+          :class="halfYear === 1 ? 'isactive' : ''"
+          @click="selectHalfYear(0)"
+          >{{ year }}{{ '年 上半年' | $lc }}</el-button
+        >
+        <el-button
+          type="text"
+          class="half-year-picker__btn"
+          :class="halfYear === 2 ? 'isactive' : ''"
+          @click="selectHalfYear(1)"
+          >{{ year }}{{ '年 下半年' | $lc }}</el-button
+        >
+      </div>
+      <div v-else class="n20-quarter-date-picker__year__grid">
+        <el-button
+          v-for="item in getYear"
+          :key="item"
+          type="text"
+          size="medium"
+          :class="year === item ? 'color-primary' : ''"
+          class="n20-quarter-date-picker__btn"
+          @click="selectYear(item)"
+          >{{ item }}{{ '年' | $lc }}</el-button
+        >
+      </div>
+    </div>
+    <el-input
+      slot="reference"
+      ref="halfYear"
+      v-model="showValue"
+      class="el-date-editor"
+      clearable
+      :placeholder="'选择半年' | $lc"
+      @focus="focusFn"
+    >
+      <i slot="suffix" class="el-input__icon el-icon-date" :class="showValue && 'half-year-picker__input--icon'"></i>
+    </el-input>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  name: 'HalfYearPicker',
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      showHalfYear: false,
+      year: new Date().getFullYear(),
+      isHalfYear: true,
+      halfYear: 1,
+      showValue: ''
+    }
+  },
+  computed: {
+    getYear() {
+      let nfOptionsArray = []
+      for (var i = this.year - 4; i <= this.year + 5; i++) {
+        nfOptionsArray.push(i)
+      }
+      return nfOptionsArray
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val && val.startDate && val.endDate) {
+          const regex = /(\d{4})-(\d{2})-(\d{2})/
+          const startDateMatch = val.startDate.match(regex)
+          const [, year, startMonth] = startDateMatch
+          this.year = year
+          this.halfYear = startMonth === '01' ? 1 : 2
+          this.showValue = `${year} 年 ${startMonth === '01' ? '上半年' : '下半年'}`
+        } else {
+          this.showValue = ''
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    selectYear(i) {
+      this.year = i
+      this.isHalfYear = true
+    },
+    prev() {
+      this.year = this.year * 1 - 1
+    },
+    next() {
+      this.year = this.year * 1 + 1
+    },
+    handleYear() {
+      this.isHalfYear = false
+    },
+    focusFn() {
+      this.$refs.halfYear.blur()
+    },
+    selectHalfYear(i) {
+      this.halfYear = i + 1
+      let arr = [`${this.year}-${i === 0 ? '01' : '07'}`, `${this.year}-${i === 0 ? '06' : '12'}`]
+      this.showHalfYear = false
+      this.showValue = `${this.year} 年 ${i === 0 ? '上半年' : '下半年'}`
+      // 6月最后一天是30 12月最后一天是31
+      this.$emit('input', { startDate: arr[0] + '-01', endDate: i === 0 ? arr[1] + '-30' : arr[1] + '-31' })
+      this.$emit('change', { startDate: arr[0] + '-01', endDate: i === 0 ? arr[1] + '-30' : arr[1] + '-31' })
+    }
+  }
+}
+</script>
+
+<style>
+.half-year-picker__grid {
+  display: flex;
+  justify-content: space-around;
+}
+.half-year-picker__btn {
+  flex: 1;
+  padding: 10px;
+  border: none;
+  background: #fff;
+  color: var(--text-color-base);
+  outline: none;
+  cursor: pointer;
+}
+.half-year-picker__btn.isactive {
+  color: var(--color-primary);
+}
+
+.el-date-editor:hover .half-year-picker__input--icon {
+  display: none;
+}
+</style>

package/src/components/SelectDatePickerPro/index.vue

@@ -1,14 +1,14 @@
 <template>
   <!--结算 日 周 月  年 时间选择控件封装 -->
   <div class="n20-date-select">
-    <el-select v-model="type" placeholder="请选择" style="width: 65px" @change="dateTypeSelectChange">
+    <el-select v-model="type" placeholder="请选择" style="width: 75px" @change="dateTypeSelectChange">
       <el-option v-for="(item, index) in selectList" :key="index" :label="item" :value="item" />
     </el-select>
     <date-picker
       v-if="type === '日' && selectList.includes(type)"
       key="day"
       v-model="day"
-      style="width: 220px"
+      style="width: 100%"
       format="yyyy-MM-dd"
       value-format="yyyy-MM-dd"
       type="daterange"
@@ -39,6 +39,13 @@
       :placeholder="'选择月' | $lc"
     />
     <quarter-date-picker v-if="type === '季'" key="quarter" v-model="quarter" :disabled-date="attrs.disabledDate" />
+    <HalfYearPicker
+      v-if="type === '半年' && selectList.includes(type)"
+      key="year"
+      v-model="halfYear"
+      v-bind="$attrs"
+      :placeholder="'选择半年' | $lc"
+    />
     <date-picker
       v-if="type === '年' && selectList.includes(type)"
       key="year"
@@ -50,6 +57,15 @@
       :editable="false"
       :placeholder="'选择年' | $lc"
     />
+    <el-date-picker
+      v-if="type === '临时' && selectList.includes(type)"
+      v-model="custom"
+      type="daterange"
+      style="width: 100%"
+      value-format="yyyy-MM-dd"
+      :start-placeholder="$l('开始日期')"
+      :end-placeholder="$l('结束日期')"
+    />
   </div>
 </template>
 
@@ -57,10 +73,11 @@
 // TODO: 双向绑定数值格式不统一
 import datePicker from '../DatePicker/index.vue'
 import quarterDatePicker from './quarterDatePicker'
+import HalfYearPicker from './halfYearPicker'
 import dayjs from 'dayjs'
 export default {
   name: 'SelectDatePickerPro',
-  components: { datePicker, quarterDatePicker },
+  components: { datePicker, quarterDatePicker, HalfYearPicker },
   props: {
     value: {
       type: Object,
@@ -87,7 +104,7 @@ export default {
     selectList: {
       type: Array,
       default: () => {
-        return ['日', '周', '月', '季', '年']
+        return ['日', '周', '月', '季', '半年', '年', '临时']
       }
     }
   },
@@ -199,6 +216,15 @@ export default {
         this.$emit('change', Object.assign(value, { typeDate: this.type }))
       }
     },
+    halfYear: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', Object.assign(value, { typeDate: this.type }))
+        this.$emit('change', Object.assign(value, { typeDate: this.type }))
+      }
+    },
     year: {
       get() {
         if (this.value.startDate) {
@@ -226,6 +252,20 @@ export default {
           this.$emit('change', iYear)
         }
       }
+    },
+    custom: {
+      get() {
+        return [this.value.startDate, this.value.endDate]
+      },
+      set(value) {
+        if (value) {
+          this.$emit('input', { startDate: value[0], endDate: value[1], typeDate: this.type })
+          this.$emit('change', { startDate: value[0], endDate: value[1], typeDate: this.type })
+        } else {
+          this.$emit('input', { startDate: '', endDate: '', typeDate: this.type })
+          this.$emit('change', { startDate: '', endDate: '', typeDate: this.type })
+        }
+      }
     }
   },
   methods: {

package/src/components/SelectDatePickerPro/quarterDatePicker.vue

@@ -16,7 +16,7 @@
           class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
           @click="prev"
         ></button>
-        <span role="button" class="el-date-picker__header-label" @click="handleYear">{{ year }}年</span>
+        <span role="button" class="el-date-picker__header-label" @click="handleYear">{{ year }}{{ '年' | $lc }}</span>
         <button
           type="button"
           aria-label="后一年"
@@ -34,7 +34,7 @@
             class="n20-quarter-date-picker__btn"
             :class="this.season == 1 ? 'isactive' : ''"
             @click="selectSeason(0)"
-            >{{ year }}年 第一季度</el-button
+            >{{ year }}{{ '年' | $lc }} {{ '第一季度' | $lc }}</el-button
           >
           <el-button
             type="text"
@@ -43,7 +43,7 @@
             class="n20-quarter-date-picker__btn"
             :class="this.season == 2 ? 'isactive' : ''"
             @click="selectSeason(1)"
-            >{{ year }}年 第二季度</el-button
+            >{{ year }}{{ '年' | $lc }} {{ '第二季度' | $lc }}</el-button
           >
           <el-button
             type="text"
@@ -52,7 +52,7 @@
             class="n20-quarter-date-picker__btn"
             :class="this.season == 3 ? 'isactive' : ''"
             @click="selectSeason(2)"
-            >{{ year }}年 第三季度</el-button
+            >{{ year }}{{ '年' | $lc }} {{ '第三季度' | $lc }}</el-button
           >
           <el-button
             :disabled="isDisabled(year, '4')"
@@ -61,7 +61,7 @@
             class="n20-quarter-date-picker__btn"
             :class="this.season == 4 ? 'isactive' : ''"
             @click="selectSeason(3)"
-            >{{ year }}年 第四季度</el-button
+            >{{ year }}{{ '年' | $lc }} {{ '第四季度' | $lc }}</el-button
           >
         </div>
         <div v-else class="n20-quarter-date-picker__year__grid">
@@ -72,8 +72,8 @@
             size="medium"
             :class="year === item ? 'color-primary' : ''"
             class="n20-quarter-date-picker__btn"
-            @click="selectYaer(item)"
-            >{{ item }}年</el-button
+            @click="selectYear(item)"
+            >{{ item }}{{ '年' | $lc }}</el-button
           >
         </div>
       </div>
@@ -83,7 +83,7 @@
       ref="quarterDate"
       v-model="showValue"
       class="el-date-editor"
-      placeholder="选择季度"
+      :placeholder="'选择季度' | $lc"
       clearable
       @focus="changeFocus"
     >
@@ -176,7 +176,9 @@ export default {
       },
       get() {
         if (this.value.startDate && this.value.endDate) {
-          return `${dayjs(this.value.startDate).year()} 年 ${dayjs(this.value.endDate).quarter()} 季度`
+          return `${dayjs(this.value.startDate).year()} 年 第${this.getChinese(
+            dayjs(this.value.endDate).quarter()
+          )}季度`
         } else {
           return ''
         }
@@ -188,6 +190,26 @@ export default {
     // this.getDefaultTime()
   },
   methods: {
+    getChinese(val) {
+      let value = ''
+      switch (val) {
+        case 1:
+          value = '一'
+          break
+        case 2:
+          value = '二'
+          break
+        case 3:
+          value = '三'
+          break
+        case 4:
+          value = '四'
+          break
+        default:
+          break
+      }
+      return value
+    },
     prev() {
       this.year = this.year * 1 - 1
     },
@@ -201,7 +223,7 @@ export default {
       this.isQuarter = true
       this.$refs.quarterDate.blur()
     },
-    selectYaer(i) {
+    selectYear(i) {
       this.year = i
       this.isQuarter = true
     },

package/src/components/SelectTree/index.vue

@@ -45,7 +45,9 @@
         :class="data[props.disabled] ? 'cursor-not' : ''"
         :style="{ color: data[props.disabled] ? 'var(--color-text-placeholder) ' : '' }"
       >
-        {{ props.isShowNo ? '(' + data[props.value] + ') ' + data[props.label] : data[props.label] }}
+        {{
+          props.isShowNo && data[props.value] ? '(' + data[props.value] + ') ' + data[props.label] : data[props.label]
+        }}
       </div></el-tree
     >
   </el-select>
@@ -123,6 +125,10 @@ export default {
     load: {
       type: Function,
       default: undefined
+    },
+    bigData: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -153,16 +159,17 @@ export default {
           }
           return
         }
-
         let dataList = []
         forEachs(this.data, (d) => dataList.push(d), this.props.children)
-
         if (!this.multiple) {
           let valueObj = dataList.find((d) => d[this.props.value] === val)
           this.wCdList = valueObj ? [valueObj] : []
           this.$refs['tree']?.setCurrentKey(val)
         } else {
           this.wCdList = dataList.filter((d) => val.includes(d[this.props.value]))
+          if (this.bigData && this.wCdList.length > 0) {
+            this.wCdList = this.wCdList.slice(0, 1)
+          }
           this.$refs['tree']?.setCheckedKeys(val)
         }
       },
@@ -215,7 +222,6 @@ export default {
     nodeClick(data) {
       if (!this.multiple && !data.disabled) {
         this.lazy && (this.tCdList = [data])
-
         let vK = this.props.value
         this.$emit('input', data[vK])
         this.$emit('change', data[vK], data)

package/src/components/SelectTree/pro.vue

@@ -117,6 +117,7 @@ export default {
   methods: {
     check(data, { checkedKeys }) {
       this.$emit('input', checkedKeys)
+      this.$emit('change', checkedKeys)
     },
     clear() {
       this.$emit('clear')
@@ -138,9 +139,11 @@ export default {
         this.$refs.tree.setCheckedNodes(this.data)
         const data = this.$refs.tree.getCheckedKeys()
         this.$emit('input', data)
+        this.$emit('change', data)
       } else {
         this.$refs.tree.setCheckedNodes([])
         this.$emit('input', [])
+        this.$emit('change', [])
       }
     }
   }