vue2-client 1.3.8 → 1.3.9

package/src/layouts/header/InstitutionDetail.vue

@@ -0,0 +1,181 @@
+<template>
+  <div style="position: relative;">
+    <h2 style="text-align: center">{{ institutionData.f_title }}</h2>
+    <p>简述: {{ institutionData.f_sketch }}</p>
+    <p>生效时间: {{ format(institutionData.f_effective_date) }}</p>
+    <div v-if="showDocument" class="content">
+      <iframe :src="institutionDocUrl" frameborder="0" height="100%" width="100%"></iframe>
+    </div>
+    <!-- 其他附件 -->
+    <div class="other-file">
+      <div class="title">其他附件</div>
+      <div v-for="file in otherFiles" :key="file.id">
+        <a class="file-item">
+          <span class="file-action" @click="handlePreviewDoc(file.url)">
+            <a-icon type="link" />{{ file.name }}
+          </span>
+          <span class="file-action" @click="handlePreviewDoc(file.url)">
+            <a-icon type="eye" />预览
+          </span>
+          <a class="file-action" target="_blank" @click="handlePreDowDoc(file)"><a-icon type="download" />下载</a>
+        </a>
+      </div>
+    </div>
+    <!-- 其他附件预览 -->
+    <a-modal v-model="previewDocVisible" :dialog-style="{ top: '20px' }" :footer="null" :z-index="1001" width="97%">
+      <div class="preview-doc-container">
+        <a-spin :spinning="previewDocLoading" size="large" />
+        <iframe
+          v-show="!previewDocLoading"
+          :src="previewDocUrl"
+          frameborder="0"
+          height="100%"
+          width="100%"
+          @load="previewDocLoading = false" />
+      </div>
+    </a-modal>
+    <a-button class="submit_btn" type="primary" @click="confirm_institution">确认</a-button>
+  </div>
+</template>
+
+<script>
+import { Base64 } from 'js-base64'
+import { post } from '@vue2-client/services/api/restTools'
+import { formatDate } from '@vue2-client/utils/util'
+
+export default {
+  name: 'InstitutionDetail',
+  props: {
+    institutionId: {
+      type: Number,
+      default: undefined
+    },
+    affirmInstitution: {
+      type: Number,
+      default: undefined
+    }
+  },
+  data () {
+    return {
+      institutionDocUrl: undefined,
+      showDocument: false,
+      otherFiles: [],
+      institutionData: {},
+      previewDocVisible: false,
+      previewDocUrl: undefined,
+      previewDocLoading: false
+    }
+  },
+  watch: {
+    institutionId () {
+      this.getDetailData()
+    }
+  },
+  mounted () {
+    this.getDetailData()
+  },
+  methods: {
+    // 获取详情数据
+    getDetailData () {
+      if (!this.institutionId) {
+        return
+      }
+      const otherFiles = []
+      post('/api/af-system/getInstitutionDetail', {
+        id: this.institutionId
+      }).then(res => {
+        res.files.forEach(item => {
+          if (item.use_type === '制度文件') {
+            this.institutionDocUrl = previewDocService + encodeURIComponent(Base64.encode(fileServer + item.url))
+            this.showDocument = true
+          } else {
+            otherFiles.push(item)
+          }
+        })
+        this.institutionData = res.institution
+        this.otherFiles = otherFiles
+      })
+    },
+    format (dateStr) {
+      return formatDate(dateStr, 'yyyy-MM-dd')
+    },
+    // 其他附件预览
+    handlePreviewDoc (url) {
+      const previewDocUrl = previewDocService + encodeURIComponent(Base64.encode(fileServer + url))
+      if (this.previewDocUrl !== previewDocUrl) {
+        this.previewDocLoading = true
+        this.previewDocUrl = previewDocUrl
+      }
+      this.previewDocVisible = true
+    },
+    // 下载文档
+    handlePreDowDoc (file) {
+      const a = document.createElement('a')
+      a.href = file.url
+      a.download = file.name
+      a.click()
+    },
+    confirm_institution () {
+      post('/api/af-system/affirmInstitution', {
+        data: {
+          tobe: [
+            {
+              id: this.affirmInstitution,
+              f_affirm_type: '系统确认'
+            }
+          ]
+        }
+      }).then(res => {
+        this.$message.success('确认成功')
+        this.$emit('get_to_be_confirmed')
+      })
+    },
+  }
+}
+// 文档预览服务 API
+const previewDocService = 'http://123.60.214.109:8012/onlinePreview?url='
+// 文件服务器地址
+const fileServer = 'http://123.60.214.109:8406'
+</script>
+
+<style lang="less" scoped>
+.submit_btn{
+  position: absolute;
+  right:0;
+  top: 0;
+}
+.content {
+  height: 80vh;
+  img {
+    max-width: 100%;
+  }
+}
+.other-file {
+  margin: 16px 0;
+  .title {
+    margin-bottom: 6px;
+  }
+}
+.file-item {
+  .file-action {
+    padding: 3px 4px;
+    color: #1890ff;
+    &:hover {
+      background: #e6f7ff;
+    }
+  }
+  .anticon {
+    margin-right: 3px;
+  }
+}
+.file-list-title {
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: bold;
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+.preview-doc-container {
+  height: calc(100vh - 92px);
+  padding-top: 20px;
+}
+</style>

package/src/layouts/tabs/TabsHead.vue

@@ -1,190 +1,190 @@
-<template>
-  <div :class="['tabs-head', layout, pageWidth]">
-    <a-tabs
-      type="editable-card"
-      :class="['tabs-container', layout, pageWidth, {'affixed' : affixed, 'fixed-header' : fixedHeader, 'collapsed' : adminLayout.collapsed}]"
-      :active-key="active"
-      :hide-add="true"
-    >
-      <a-tooltip placement="left" :title="lockTitle" slot="tabBarExtraContent">
-        <a-icon
-          theme="filled"
-          @click="onLockClick"
-          class="header-lock"
-          :type="fixedTabs ? 'lock' : 'unlock'"
-        />
-      </a-tooltip>
-      <a-tab-pane v-for="page in pageList" :key="page.path">
-        <div slot="tab" class="tab" @contextmenu="e => onContextmenu(page.path, e)">
-          <a-icon @click="onRefresh(page)" :class="['icon-sync', {'hide': page.path !== active && !page.loading}]" :type="page.loading ? 'loading' : 'sync'" />
-          <div class="title" @click="onTabClick(page.path)" >{{ pageName(page) }}</div>
-          <a-icon v-if="!page.unclose" @click="onClose(page.path)" class="icon-close" type="close"/>
-        </div>
-      </a-tab-pane>
-    </a-tabs>
-    <div v-if="affixed" class="virtual-tabs"></div>
-  </div>
-</template>
-
-<script>
-  import { mapState, mapMutations } from 'vuex'
-  import { getI18nKey } from '@vue2-client/utils/routerUtil'
-
-  export default {
-    name: 'TabsHead',
-    i18n: {
-      messages: {
-        CN: {
-          lock: '点击锁定页签头',
-          unlock: '点击解除锁定'
-        },
-        HK: {
-          lock: '點擊鎖定頁簽頭',
-          unlock: '點擊解除鎖定'
-        },
-        US: {
-          lock: 'click to lock the tabs head',
-          unlock: 'click to unlock'
-        }
-      }
-    },
-    props: {
-      // eslint-disable-next-line vue/require-default-prop
-      pageList: Array,
-      // eslint-disable-next-line vue/require-default-prop
-      active: String,
-      fixed: Boolean
-    },
-    data () {
-      return {
-        affixed: false
-      }
-    },
-    inject: ['adminLayout'],
-    created () {
-      this.affixed = this.fixedTabs
-    },
-    computed: {
-      ...mapState('setting', ['layout', 'pageWidth', 'fixedHeader', 'fixedTabs', 'customTitles']),
-      lockTitle () {
-        return this.$t(this.fixedTabs ? 'unlock' : 'lock')
-      }
-    },
-    methods: {
-      ...mapMutations('setting', ['setFixedTabs']),
-      onLockClick () {
-        this.setFixedTabs(!this.fixedTabs)
-        if (this.fixedTabs) {
-          setTimeout(() => {
-            this.affixed = true
-          }, 200)
-        } else {
-          this.affixed = false
-        }
-      },
-      onTabClick (key) {
-        if (this.active !== key) {
-          this.$emit('change', key)
-        }
-      },
-      onClose (key) {
-        this.$emit('close', key)
-      },
-      onRefresh (page) {
-        this.$emit('refresh', page.path, page)
-      },
-      onContextmenu (pageKey, e) {
-        this.$emit('contextmenu', pageKey, e)
-      },
-      pageName (page) {
-        const pagePath = page.fullPath.split('?')[0]
-        const custom = this.customTitles.find(item => item.path === pagePath)
-        return (custom && custom.title) || page.title || this.$t(getI18nKey(page.keyPath))
-      }
-    }
-  }
-</script>
-
-<style scoped lang="less">
-  .tab{
-    margin: 0 -16px;
-    padding: 0 16px;
-    font-size: 14px;
-    user-select: none;
-    transition: all 0.2s;
-    .title{
-      display: inline-block;
-      height: 100%;
-    }
-    .icon-close{
-      font-size: 12px;
-      margin-left: 6px;
-      margin-right: -4px !important;
-      color: @text-color-second;
-      &:hover{
-        color: @text-color;
-      }
-    }
-    .icon-sync{
-      margin-left: -4px;
-      color: @primary-4;
-      transition: all 0.3s ease-in-out;
-      &:hover{
-        color: @primary-color;
-      }
-      font-size: 14px;
-      &.hide{
-        font-size: 0;
-      }
-    }
-  }
-  .tabs-head{
-    margin: 0 auto;
-    &.head.fixed{
-      width: 1400px;
-    }
-  }
-  .tabs-container{
-    margin: -16px auto 8px;
-    transition: top,left 0.2s;
-    .header-lock{
-      font-size: 18px;
-      cursor: pointer;
-      color: @primary-3;
-      &:hover{
-        color: @primary-color;
-      }
-    }
-    &.affixed{
-      margin: 0 auto;
-      top: 0px;
-      padding: 8px 24px 0;
-      position: fixed;
-      height: 48px;
-      z-index: 1;
-      background-color: @layout-body-background;
-      &.side,&.mix{
-        right: 0;
-        left: 256px;
-        &.collapsed{
-          left: 80px;
-        }
-      }
-      &.head{
-        width: inherit;
-        padding: 8px 0 0;
-        &.fluid{
-          left: 0;
-          right: 0;
-          padding: 8px 24px 0;
-        }
-      }
-      &.fixed-header{
-        top: 64px;
-      }
-    }
-  }
-  .virtual-tabs{
-    height: 48px;
-  }
-</style>
+<template>
+  <div :class="['tabs-head', layout, pageWidth]">
+    <a-tabs
+      type="editable-card"
+      :class="['tabs-container', layout, pageWidth, {'affixed' : affixed, 'fixed-header' : fixedHeader, 'collapsed' : adminLayout.collapsed}]"
+      :active-key="active"
+      :hide-add="true"
+    >
+      <a-tooltip placement="left" :title="lockTitle" slot="tabBarExtraContent">
+        <a-icon
+          theme="filled"
+          @click="onLockClick"
+          class="header-lock"
+          :type="fixedTabs ? 'lock' : 'unlock'"
+        />
+      </a-tooltip>
+      <a-tab-pane v-for="page in pageList" :key="page.path">
+        <div slot="tab" class="tab" @contextmenu="e => onContextmenu(page.path, e)">
+          <a-icon @click="onRefresh(page)" :class="['icon-sync', {'hide': page.path !== active && !page.loading}]" :type="page.loading ? 'loading' : 'sync'" />
+          <div class="title" @click="onTabClick(page.path)" >{{ pageName(page) }}</div>
+          <a-icon v-if="!page.unclose" @click="onClose(page.path)" class="icon-close" type="close"/>
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+    <div v-if="affixed" class="virtual-tabs"></div>
+  </div>
+</template>
+
+<script>
+  import { mapState, mapMutations } from 'vuex'
+  import { getI18nKey } from '@vue2-client/utils/routerUtil'
+
+  export default {
+    name: 'TabsHead',
+    i18n: {
+      messages: {
+        CN: {
+          lock: '点击锁定页签头',
+          unlock: '点击解除锁定'
+        },
+        HK: {
+          lock: '點擊鎖定頁簽頭',
+          unlock: '點擊解除鎖定'
+        },
+        US: {
+          lock: 'click to lock the tabs head',
+          unlock: 'click to unlock'
+        }
+      }
+    },
+    props: {
+      // eslint-disable-next-line vue/require-default-prop
+      pageList: Array,
+      // eslint-disable-next-line vue/require-default-prop
+      active: String,
+      fixed: Boolean
+    },
+    data () {
+      return {
+        affixed: false
+      }
+    },
+    inject: ['adminLayout'],
+    created () {
+      this.affixed = this.fixedTabs
+    },
+    computed: {
+      ...mapState('setting', ['layout', 'pageWidth', 'fixedHeader', 'fixedTabs', 'customTitles']),
+      lockTitle () {
+        return this.$t(this.fixedTabs ? 'unlock' : 'lock')
+      }
+    },
+    methods: {
+      ...mapMutations('setting', ['setFixedTabs']),
+      onLockClick () {
+        this.setFixedTabs(!this.fixedTabs)
+        if (this.fixedTabs) {
+          setTimeout(() => {
+            this.affixed = true
+          }, 200)
+        } else {
+          this.affixed = false
+        }
+      },
+      onTabClick (key) {
+        if (this.active !== key) {
+          this.$emit('change', key)
+        }
+      },
+      onClose (key) {
+        this.$emit('close', key)
+      },
+      onRefresh (page) {
+        this.$emit('refresh', page.path, page)
+      },
+      onContextmenu (pageKey, e) {
+        this.$emit('contextmenu', pageKey, e)
+      },
+      pageName (page) {
+        const pagePath = page.fullPath.split('?')[0]
+        const custom = this.customTitles.find(item => item.path === pagePath)
+        return (custom && custom.title) || page.title || this.$t(getI18nKey(page.keyPath))
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .tab{
+    margin: 0 -16px;
+    padding: 0 16px;
+    font-size: 14px;
+    user-select: none;
+    transition: all 0.2s;
+    .title{
+      display: inline-block;
+      height: 100%;
+    }
+    .icon-close{
+      font-size: 12px;
+      margin-left: 6px;
+      margin-right: -4px !important;
+      color: @text-color-second;
+      &:hover{
+        color: @text-color;
+      }
+    }
+    .icon-sync{
+      margin-left: -4px;
+      color: @primary-4;
+      transition: all 0.3s ease-in-out;
+      &:hover{
+        color: @primary-color;
+      }
+      font-size: 14px;
+      &.hide{
+        font-size: 0;
+      }
+    }
+  }
+  .tabs-head{
+    margin: 0 auto;
+    &.head.fixed{
+      width: 1400px;
+    }
+  }
+  .tabs-container{
+    margin: -16px auto 8px;
+    transition: top,left 0.2s;
+    .header-lock{
+      font-size: 18px;
+      cursor: pointer;
+      color: @primary-3;
+      &:hover{
+        color: @primary-color;
+      }
+    }
+    &.affixed{
+      margin: 0 auto;
+      top: 0;
+      padding: 8px 24px 0;
+      position: fixed;
+      height: 48px;
+      z-index: 1;
+      background-color: @layout-body-background;
+      &.side,&.mix{
+        right: 0;
+        left: 256px;
+        &.collapsed{
+          left: 80px;
+        }
+      }
+      &.head{
+        width: inherit;
+        padding: 8px 0 0;
+        &.fluid{
+          left: 0;
+          right: 0;
+          padding: 8px 24px 0;
+        }
+      }
+      &.fixed-header{
+        top: 64px;
+      }
+    }
+  }
+  .virtual-tabs{
+    height: 48px;
+  }
+</style>