【update 系统】顶部消息加翻译、增加选择单侧日期的组件

src/common/lang/en-us.js

@@ -187,6 +187,11 @@ module.exports = {
   clauseNo: 'Clause number',
   clauseName: 'Clause name',
   clauseContent: 'Clause content',
+  startDate: 'Start date',
+  endDate: 'End Date',
+  curBefore: 'Before this day',
+  curAfter: 'After this day',
+  pleaseSelectADate: 'Please select a date first',
   // 树右键
   treeRight: {
     addFolder: 'Create New Folder',
@@ -212,7 +217,10 @@ module.exports = {
     clearCache: 'Clear Cache',
     notice: 'Notice',
     systemNotice: 'System Notifications',
-    lookMore: 'View More'
+    lookMore: 'View More',
+    generalMsg: 'General message',
+    importantMsg: 'Important news',
+    EmergencyMsg: 'Emergency messages'
   },
   // 用户管理
   user: {

src/common/lang/zh-cn.js

@@ -202,6 +202,11 @@ module.exports = {
   listName: '清单名称',
   countryRegion: '国家/地区',
   ccPerson: '抄送人员',
+  startDate: '开始日期',
+  endDate: '结束日期',
+  curBefore: '这天之前',
+  curAfter: '这天之后',
+  pleaseSelectADate: '请先选中一个日期',
   // 标准字段
   standardField: {
     standardEnglishName: '标准英文名称',
@@ -236,7 +241,10 @@ module.exports = {
     clearCache: '清理缓存',
     notice: '通知',
     systemNotice: '系统通知',
-    lookMore: '查看更多'
+    lookMore: '查看更多',
+    generalMsg: '一般消息',
+    importantMsg: '重要消息',
+    EmergencyMsg: '紧急消息'
   },
   // 用户管理
   user: {

src/components/JDatePicker.vue

@@ -0,0 +1,150 @@
+<template>
+  <span tabindex="0" class="ant-calendar-picker j-calendar-picker" @click="onChangeOpen(true)">
+    <span class="ant-calendar-picker-input ant-input">
+      <input readonly="true" v-model="startDate" :placeholder="placeholder[0] || $t('startDate')" tabindex="-1" class="ant-calendar-range-picker-input">
+      <span class="ant-calendar-range-picker-separator"> ~ </span>
+      <input readonly="true" v-model="endDate" :placeholder="placeholder[1] || $t('endDate')" tabindex="-1" class="ant-calendar-range-picker-input">
+      <a-icon v-if="startDate || endDate" @click.stop="clearValue" type="close-circle" class='anticon anticon-close-circle ant-calendar-picker-clear' theme="filled" />
+      <span class="ant-calendar-picker-icon"></span>
+    </span>
+    <a-range-picker class="j-calendar-picker-comp"
+                    v-model="dateValue"
+                    :open="open"
+                    @openChange="onChangeOpen"
+                    @change="onChange"
+                    dropdownClassName="j-calendar-picker-comp-dropdown"
+                    v-bind="$attrs">
+      <template slot="dateRender" slot-scope="current">
+        <div class="ant-calendar-date" @click="clickCalendarDate(current)">
+          {{current.date()}}
+        </div>
+      </template>
+      <template slot="renderExtraFooter">
+        <div class="j-calendar-picker-comp-dropdown-btns">
+          <a-button @click="handleCurrentChange('startDate')" type="primary" size="small">{{$t('curAfter')}}</a-button>
+          <a-button @click="handleCurrentChange('endDate')" type="primary" size="small" style="margin-left: 8px;">{{$t('curBefore')}}</a-button>
+        </div>
+      </template>
+    </a-range-picker>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'JDatePicker',
+  props: {
+    placeholder: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    value: {
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      open: false,
+      dateValue: [],
+      startDate: '',
+      endDate: '',
+      lastSelectDate: ''
+    }
+  },
+  watch: {
+    value (val) {
+      console.log('更新日期', val)
+      if (Array.isArray(val)) {
+        this.startDate = val[0] || ''
+        this.endDate = val[1] || ''
+        this.dateValue = val
+      } else {
+        this.lastSelectDate = ''
+        this.startDate = ''
+        this.endDate = ''
+        this.dateValue = []
+      }
+    }
+  },
+  methods: {
+    // 清空选中值
+    clearValue () {
+      this.lastSelectDate = ''
+      this.startDate = ''
+      this.endDate = ''
+      this.dateValue = []
+      this.triggerChange()
+    },
+    // 控制弹出层打开
+    onChangeOpen (open) {
+      this.open = open
+      this.dateValue = [this.startDate, this.endDate]
+    },
+    // 日期正常选择
+    onChange (dateArr) {
+      this.startDate = dateArr[0]
+      this.endDate = dateArr[1]
+      this.triggerChange()
+    },
+    // 点击底部按钮
+    handleCurrentChange (field) {
+      if (!this.lastSelectDate) {
+        this.$message.warning(this.$t('pleaseSelectADate'))
+        return
+      }
+      this.onChangeOpen(false)
+      this.startDate = ''
+      this.endDate = ''
+      this[field] = this.lastSelectDate
+      this.triggerChange()
+    },
+    // 触发change事件
+    triggerChange () {
+      this.$emit('change', [this.startDate, this.endDate])
+    },
+    // 记录最后一次点击的日期
+    clickCalendarDate (val) {
+      this.lastSelectDate = val.format('YYYY-MM-DD')
+      console.log(val, this.lastSelectDate)
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.j-calendar-picker {
+  position: relative;
+
+  .j-calendar-picker-comp {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+
+  }
+}
+</style>
+<style lang="less">
+// 弹出层样式
+.j-calendar-picker-comp-dropdown {
+  .ant-calendar-range .ant-calendar-footer-extra {
+    width: 100%;
+
+    .j-calendar-picker-comp-dropdown-btns {
+      padding: 7px 6px;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+.ant-calendar-picker:hover .ant-calendar-picker-clear {
+  opacity: 1;
+  pointer-events: auto;
+}
+</style>

src/components/tools/HeaderNotice.vue

@@ -9,17 +9,17 @@
     :overlayStyle="{ width: '330px', top: '50px' }">
     <template slot="content">
       <a-spin :spinning="loadding">
-        <div class="notice-title">系统通知</div>
+        <div class="notice-title">{{ $t('header.systemNotice') }}</div>
         <a-list>
           <a-list-item :key="index" v-for="(record, index) in announcement2">
             <div style="margin-left: 5%;width: 80%">
               <p><a @click="showAnnouncement(record)">{{ record.titile }}</a></p>
-              <p style="color: rgba(0,0,0,.45);margin-bottom: 0">{{ record.createTime }} 发布</p>
+              <p style="color: rgba(0,0,0,.45);margin-bottom: 0">{{ record.createTime }} {{ $t('release') }}</p>
             </div>
             <div style="text-align: right">
-              <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'L'" color="blue">一般消息</a-tag>
+              <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'L'" color="blue">{{ $t('header.generalMsg') }}</a-tag>
-              <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'M'" color="orange">重要消息</a-tag>
+              <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'M'" color="orange">{{ $t('header.importantMsg') }}</a-tag>
-              <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'H'" color="red">紧急消息</a-tag>
+              <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'H'" color="red">{{ $t('header.EmergencyMsg') }}</a-tag>
             </div>
           </a-list-item>
           <div style="margin-top: 5px;text-align: center">

src/components/tools/Logo.vue

@@ -48,6 +48,11 @@ export default {
 
   .h1-logo {
     padding: 0 12px !important;
+
+    &.logo {
+      height: auto !important;
+      line-height: 1 !important;
+    }
   }
 
   .logo {