vue2-client 1.2.99 → 1.2.102

package/CHANGELOG.md

@@ -1,7 +1,7 @@
 # Change Log
 > 所有关于本项目的变化都在该文档里。
 
-**1.2.94 -2022-08-05  - 1.2.98 @张振宇**
+**1.2.94 -2022-08-05  - 1.2.102 @张振宇**
 - 功能新增：
 - 新增表单组件 人员选择框
 - 新增表单配置可以配置自定义请求
@@ -9,6 +9,7 @@
 - 文件表单项cascader 修改了一下能用了
 - xformitem修改了两个文件上传框时得bug
 - 新增制度待确认提示
+- 修改制度待确认提示
 
 **1.2.93 -2022-08-03 @江超**
 - 功能新增：

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.2.99",
+  "version": "1.2.102",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -27,6 +27,7 @@
     "enquire.js": "^2.1.6",
     "file-saver": "^2.0.5",
     "highlight.js": "^10.7.3",
+    "js-base64": "^3.7.2",
     "js-cookie": "^2.2.1",
     "jsencrypt": "^3.2.1",
     "lodash.get": "^4.4.2",

package/src/layouts/header/HeaderNotice.vue

@@ -2,7 +2,11 @@
   <a-dropdown :trigger="['click']" v-model="show">
     <div slot="overlay">
       <a-spin :spinning="loading">
-        <a-tabs class="dropdown-tabs" :tabBarStyle="{textAlign: 'center'}" :style="{width: '297px'}">
+        <a-tabs
+          class="dropdown-tabs"
+          :tabBarStyle="{textAlign: 'center'}"
+          :style="{width: '297px'}"
+          v-model="activeKey">
           <a-tab-pane tab="通知" key="1">
             <a-list>
               <a-list-item :key="item.id" class="tab-pane" v-for=" item in exception">
@@ -24,11 +28,23 @@
           <a-tab-pane tab="待办" key="3">
             <a-list item-layout="horizontal" :data-source="backlog" :bordered="true">
               <a-list-item slot="renderItem" slot-scope="item, index">
-                <a slot="actions" v-if="item.type==='制度待确认'" @click="confirm_institution(item)">确认</a>
+                <a slot="actions" v-if="item.type==='制度待确认'" @click="confirm_institution(item)">查看</a>
                 <a-list-item-meta :title="item.title" :description="item.description"/>
               </a-list-item>
             </a-list>
           </a-tab-pane>
+          <a-drawer
+            placement="right"
+            title="待确认制度详情"
+            :width="screenWidth * 0.5"
+            :visible="institutionDetailVisible"
+            @close="onClose"
+          >
+            <institution-detail
+              :institutionId="institution"
+              :affirmInstitution="affirmInstitution"
+              @get_to_be_confirmed="getToBeConfirmed"/>
+          </a-drawer>
         </a-tabs>
       </a-spin>
     </div>
@@ -42,22 +58,33 @@
 
 <script>
 import { post } from '@vue2-client/services/api'
+import InstitutionDetail from './InstitutionDetail'
 
 export default {
   name: 'HeaderNotice',
   data () {
     return {
       loading: false,
+      screenWidth: document.documentElement.clientWidth,
       show: false,
+      institutionDetailVisible: false,
+      institution: undefined,
+      affirmInstitution: undefined,
       exception: [],
-      backlog: []
+      backlog: [],
+      activeKey: '1'
     }
   },
+  components: { InstitutionDetail },
   computed: {},
   created () {
-    this.get_to_be_confirmed()
+    this.getToBeConfirmed()
   },
   methods: {
+    onClose () {
+      this.institutionDetailVisible = false
+      this.getToBeConfirmed()
+    },
     read (item) {
       post('/webmeterapi/saveSingleTable', {
         data: {
@@ -68,30 +95,53 @@ export default {
         this.refresh()
       })
     },
-    get_to_be_confirmed (item) {
+    getToBeConfirmed () {
+      this.institutionDetailVisible = false
       try {
         if (this.$login.f.name) {
           post('/webmetersql/getToBeConfirmed', { data: { condition: `state = '待确认' and f_affirm_by  = '${this.$login.f.name}'` } }).then(res => {
             this.backlog = [...res]
+            if (this.backlog.length > 0) {
+              const key = `open${Date.now()}`
+              this.$notification.open({
+                key,
+                message: `您有${this.backlog.length}条待办需要确认`,
+                top: '50px',
+                description: this.backlog.map((item, index) => index + 1 + '、' + item.title).join('；'),
+                icon: <a-icon type="container" style="color: #f5222d"/>,
+                btn: h => {
+                  return h(
+                    'a-button',
+                    {
+                      props: {
+                        type: 'primary',
+                        size: 'small',
+                      },
+                      on: {
+                        click: () => this.viewBacklog(key),
+                      },
+                    },
+                    '查看',
+                  )
+                }
+              })
+            }
           })
         }
       } catch (e) {
         console.log(e)
       }
     },
+    viewBacklog (key) {
+      this.$notification.close(key)
+      this.show = true
+      this.activeKey = '3'
+    },
     confirm_institution (item) {
-      post('/webmeterapi/affirmInstitution', {
-        data: {
-          tobe: [
-            {
-              id: item.id,
-              f_affirm_type: '系统确认'
-            }
-          ]
-        }
-      }).then(res => {
-        this.get_to_be_confirmed()
-      })
+      this.institutionDetailVisible = true
+      this.show = false
+      this.institution = item.institution
+      this.affirmInstitution = item.id
     },
     refresh () {
       post('/webmeterapi/commonQuery', {

package/src/layouts/header/InstitutionDetail.vue

@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <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" width="100%" height="100%" frameborder="0"></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" @click="handlePreDowDoc(file)" target="_blank"><a-icon type="download" />下载</a>
+        </a>
+      </div>
+    </div>
+    <!-- 其他附件预览 -->
+    <a-modal v-model="previewDocVisible" :footer="null" :dialog-style="{ top: '20px' }" width="97%" :z-index="1001">
+      <div class="preview-doc-container">
+        <a-spin size="large" :spinning="previewDocLoading" />
+        <iframe
+          v-show="!previewDocLoading"
+          :src="previewDocUrl"
+          width="100%"
+          height="100%"
+          frameborder="0"
+          @load="previewDocLoading = false" />
+      </div>
+    </a-modal>
+    <a-button 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('/webmeterapi/getInstitutionDetail', {
+        id: this.institutionId
+      }).then(res => {
+        res.files.forEach(item => {
+          if (item.use_type === '制度文件') {
+            const institutionDocUrl = previewDocService + encodeURIComponent(Base64.encode(fileServer + item.url))
+            this.institutionDocUrl = institutionDocUrl
+            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('/webmeterapi/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>
+.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/services/api/common.js

@@ -1,58 +1,58 @@
-import { METHOD, request } from '@vue2-client/utils/request'
-import { indexedDB } from '@vue2-client/utils/indexedDB'
-
-const commonApi = {
-  // 获取表格列配置
-  getColumnsJson: '/webmeterapi/getColumns',
-  // 通用查询
-  query: '/webmeterapi/commonQuery',
-  // 表单通用查询
-  queryWithResource: '/webmeterapi/commonQueryWithResource',
-  // 通用新增/修改
-  addOrModify: '/webmeterapi/commonAddOrModify',
-  // 通用删除
-  delete: '/webmeterapi/commonDelete',
-  // 获取字典键列表
-  getDictionaryParam: '/webmeterapi/getDictionaryParam',
-  // 获取所有员工及其部门的级联菜单数据
-  getEmpTree: '/webmeterapi/getEmpTree',
-}
-
-/**
- * 带缓存查询的表格配置文件查询
- * @param queryParamsName 配置名称
- * @param callback 回调函数
- */
-export function getColumnsJson (queryParamsName, callback) {
-  indexedDB.getByWeb(queryParamsName, commonApi.getColumnsJson, { str: queryParamsName }, callback)
-}
-
-/**
- * 通用表单查询
- */
-export function query (parameter) {
-  return request(commonApi.query, METHOD.POST, parameter)
-}
-
-/**
- * 通用表单查询
- */
-export function queryWithResource (parameter, api = commonApi.queryWithResource) {
-  return request(api, METHOD.POST, parameter)
-}
-
-/**
- * 通用新增/修改
- */
-export function addOrModify (parameter, api = commonApi.queryWithResource) {
-  return request(api, METHOD.POST, parameter)
-}
-
-/**
- * 通用删除
- */
-export function remove (parameter) {
-  return request(commonApi.delete, METHOD.POST, parameter)
-}
-
-export { commonApi }
+import { METHOD, request } from '@vue2-client/utils/request'
+import { indexedDB } from '@vue2-client/utils/indexedDB'
+
+const commonApi = {
+  // 获取表格列配置
+  getColumnsJson: '/webmeterapi/getColumns',
+  // 通用查询
+  query: '/webmeterapi/commonQuery',
+  // 表单通用查询
+  queryWithResource: '/webmeterapi/commonQueryWithResource',
+  // 通用新增/修改
+  addOrModify: '/webmeterapi/commonAddOrModify',
+  // 通用删除
+  delete: '/webmeterapi/commonDelete',
+  // 获取字典键列表
+  getDictionaryParam: '/webmeterapi/getDictionaryParam',
+  // 获取所有员工及其部门的级联菜单数据
+  getEmpTree: '/webmeterapi/getEmpTree',
+}
+
+/**
+ * 带缓存查询的表格配置文件查询
+ * @param queryParamsName 配置名称
+ * @param callback 回调函数
+ */
+export function getColumnsJson (queryParamsName, callback) {
+  indexedDB.getByWeb(queryParamsName, commonApi.getColumnsJson, { str: queryParamsName }, callback)
+}
+
+/**
+ * 通用表单查询
+ */
+export function query (parameter) {
+  return request(commonApi.query, METHOD.POST, parameter)
+}
+
+/**
+ * 通用表单查询
+ */
+export function queryWithResource (parameter, api = commonApi.queryWithResource) {
+  return request(api, METHOD.POST, parameter)
+}
+
+/**
+ * 通用新增/修改
+ */
+export function addOrModify (parameter, api = commonApi.addOrModify) {
+  return request(api, METHOD.POST, parameter)
+}
+
+/**
+ * 通用删除
+ */
+export function remove (parameter) {
+  return request(commonApi.delete, METHOD.POST, parameter)
+}
+
+export { commonApi }