上传 进度条 组件。

src/App.vue

@@ -2,12 +2,42 @@
   <el-config-provider :locale="locale">
     <router-view></router-view>
   </el-config-provider>
+  <div style="position: fixed; z-index: 10000">
+    <el-dialog :title="jdt.title" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
+               v-model="jdt.isOpen">
+      <el-progress :text-inside="true" :stroke-width="22" :percentage="percentage"
+                   :status="percentage===100 ? 'success':''">
+                <span>
+                  {{ cptUpldRsTxt }}
+                  <i v-show="percentage < 100" class="el-icon-loading"></i>
+                  <i v-show="percentage === 100" class="el-icon-check"></i>
+                </span>
+      </el-progress>
+      <el-divider></el-divider>
+      <ul style="overflow: auto" class="infinite-list" id="jdtRef">
+        <li v-for="i in jdtData" :key="i" class="infinite-list-item" :class="infiniteList(i)">
+          <div class="jdt-message" :title="i.message">{{ i.title }} 结果: {{ i.message }}</div>
+        </li>
+      </ul>
+      <el-divider></el-divider>
+      <div style="width: 100%;display: flex; justify-content: right;">
+        <el-button @click="ce" :disabled="percentage < 100" type="warning" icon="el-icon-close" size="small">
+          关闭
+        </el-button>
+        <el-button @click="excel" :disabled="percentage < 100" type="primary" icon="el-icon-download" size="small">
+          导出Excel
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-import { defineComponent } from 'vue'
+import {computed, defineComponent, ref, onMounted} from 'vue'
 import locale from 'element-plus/lib/locale/lang/zh-cn'
-import { useStore } from 'vuex'
+import {useStore} from 'vuex'
+import {setCallback} from '@/utils/websocket'
+import {Export} from "./utils/ExportExcel";
 
 export default defineComponent({
   name: 'App',
@@ -15,20 +45,96 @@ export default defineComponent({
     const store = useStore()
     const windowSize = getWindowSize()
     store.commit('app/setWindowSize', windowSize)
+    store.commit('app/setJdt', {title: '数据上传', isOpen: false})
+
+    const jdt = computed(() => {
+      return store.state.app.jdt
+    })
+
+    const cptUpldRsTxt = computed(() => {
+      if (percentage.value < 100) {
+        return `上传中 ( ${percentage.value}% ) ...`
+      }
+      return '上传完成(100%)'
+    })
+
+    const jdtData = ref([])
+
+    const ce = () => {
+      jdtData.value = []
+      percentage.value = 0
+      store.commit('app/closeJdt')
+    }
+
+    const socketCallback = (data) => {
+      percentage.value = data.percentage
+      jdtData.value.push(data)
+      const jdtRef = document.getElementById("jdtRef")
+      jdtRef.scrollTop = jdtRef.scrollHeight + 72
+    }
+
+    const percentage = ref(0)
+
+    const infiniteList = (val) => {
+      switch (val.type) {
+        case 1:
+          val.typeName = '成功'
+          return "jdt-success"
+        case 2:
+          val.typeName = '中心错误'
+          return "jdt-danger"
+        case 3:
+          val.typeName = '内部错误'
+          return "jdt-warning"
+        default:
+          val.typeName = '未知错误'
+          return "jdt-info"
+      }
+    }
+
+    const excel = () => {
+      const fields = ref({})
+      jdtData.value[0].keys.forEach(item => {
+        if (item.code === 'type') {
+          fields.value.typeName = item.name
+        } else {
+          fields.value[item.code] = item.name
+        }
+      })
+      Export(jdtData.value, fields.value, store.state.app.jdt.title)
+    }
+
+
+    onMounted(() => {
+      setCallback(socketCallback)
+    })
+
+
     return {
       locale,
+      jdt,
+      ce,
+      jdtData,
+      infiniteList,
+      excel,
+      percentage,
+      cptUpldRsTxt
     }
   },
 })
 
+
 function getWindowSize() {
   const w = window.innerWidth
   const h = window.innerHeight - 96
-  return { w, h }
+  return {w, h}
 }
 </script>
 
+
 <style>
+
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -83,4 +189,48 @@ function getWindowSize() {
     opacity: 1;
   }
 }
+
+.infinite-list {
+  height: 300px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.infinite-list .infinite-list-item {
+  display: flex;
+  height: 35px;
+  margin: 10px;
+  align-items: center;
+  border-radius: 8px;
+}
+
+.jdt-success {
+  background: #83e3534d;
+  color: #67c23a;
+}
+
+.jdt-danger {
+  background: #f38e8e5c;
+  color: #f56c6c;
+}
+
+.jdt-warning {
+  background: #E5A03A5C;
+  color: #ea9c29
+}
+
+.jdt-info {
+  background: #A3A4AB6C;
+  color: #909399
+}
+
+.jdt-message {
+  padding: 0 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+
 </style>

src/api/medical-insurance/si-manage.js

@@ -1,57 +1,59 @@
 import request from '../../utils/request'
 
 export function selectSetlinfos(data) {
-  return request({
-    url: '/siManage/selectSetlinfos',
-    method: 'post',
-    data,
-  })
+    return request({
+        url: '/siManage/selectSetlinfos',
+        method: 'post',
+        data,
+    })
 }
 
 export function institutionSettlementLedgerCheck(data) {
-  return request({
-    url: '/siManage/institutionSettlementLedgerCheck',
-    method: 'post',
-    data,
-  })
+    return request({
+        url: '/siManage/institutionSettlementLedgerCheck',
+        method: 'post',
+        data,
+    })
 }
 
 export function institutionSettlementDetailCheck(data) {
-  return request({
-    url: '/siManage/institutionSettlementDetailCheck',
-    method: 'post',
-    data,
-  })
+    return request({
+        url: '/siManage/institutionSettlementDetailCheck',
+        method: 'post',
+        data,
+    })
 }
 
 export function uploadCatalogueContrast(data) {
-  return request({
-    url: '/siManage/uploadCatalogueContrast',
-    method: 'post',
-    data,
-  })
+    return request({
+        url: '/siManage/uploadCatalogueContrast',
+        method: 'post',
+        data,
+    })
 }
 
 export function revokeCatalogueContrast(data) {
-  return request({
-    url: '/siManage/revokeCatalogueContrast',
-    method: 'post',
-    data,
-  })
+    return request({
+        url: '/siManage/revokeCatalogueContrast',
+        method: 'post',
+        data,
+    })
 }
 
 export function upldSetlList(data) {
-  return request({
-    url: '/siManage/upldSetlList',
-    method: 'post',
-    data,
-  })
+    return request({
+        url: '/siManage/upldSetlList',
+        method: 'post',
+        data,
+        jdtTitle: '医保结算单上传',
+    })
 }
 
 export function upldSetlListTimes(startTime, endTime, insutype) {
-  return request({
-    url: '/siManage/upldSetlListTimes',
-    method: 'get',
-    params: { startTime, endTime, insutype },
-  })
+    return request({
+        url: '/siManage/upldSetlListTimes',
+        method: 'get',
+        params: {startTime, endTime, insutype},
+        jdtTitle: '医保结算单上传',
+    })
 }

src/store/modules/app.js

@@ -1,3 +1,5 @@
+import Cookies from "js-cookie";
+
 const state = () => ({
     isCollapse: false, // 侧边栏是否收缩展示
     contentFullScreen: false, // 内容是否可全屏展示
@@ -9,6 +11,10 @@ const state = () => ({
     loading: false,
     windowSize: {},
     currentPageName: null,
+    jdt: {
+        title: null,
+        isOpen: null
+    },
     theme: {
         state: {
             style: 'default',
@@ -41,6 +47,14 @@ const mutations = {
     setCurrentPageName(state, val) {
         state.currentPageName = val
     },
+    setJdt(state, val) {
+        Cookies.set('jdtTitle', val.title)
+        state.jdt = val
+    },
+    closeJdt(state) {
+        state.jdt.isOpen = false
+    }
+
 }
 
 // actions

src/utils/ExportExcel.js

@@ -0,0 +1,48 @@
+import fs from 'file-saver'
+import XLSX from 'xlsx'
+import {clone} from "./clone";
+
+export function Export(json, fields, filename) {
+    const temp = clone(json)
+    temp.forEach(item => {
+        for (let i in item) {
+            if (fields.hasOwnProperty(i)) {
+                item[fields[i]] = item[i];
+            }
+            delete item[i]; //删除原先的对象属性
+        }
+    })
+
+    let sheetName = filename //excel的文件名称
+    let wb = XLSX.utils.book_new()  //工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。
+    let ws = XLSX.utils.json_to_sheet(temp, {header: Object.values(fields)}) //将JS对象数组转换为工作表。
+    wb.SheetNames.push(sheetName)
+    wb.Sheets[sheetName] = ws
+    const defaultCellStyle = {font: {name: "Verdana", sz: 13, color: "FF00FF88"}, fill: {fgColor: {rgb: "FFFFAA00"}}};//设置表格的样式
+    let wopts = {
+        bookType: 'xlsx',
+        bookSST: false,
+        type: 'binary',
+        cellStyles: true,
+        defaultCellStyle: defaultCellStyle,
+        showGridLines: false
+    }  //写入的样式
+    let wbout = XLSX.write(wb, wopts)
+    let blob = new Blob([s2ab(wbout)], {type: 'application/octet-stream'})
+    fs.saveAs(blob, filename + '.xlsx')
+}
+
+const s2ab = s => {
+    let buf;
+    let i;
+    if (typeof ArrayBuffer !== 'undefined') {
+        buf = new ArrayBuffer(s.length);
+        const view = new Uint8Array(buf);
+        for (i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
+        return buf
+    } else {
+        buf = new Array(s.length);
+        for (i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
+        return buf;
+    }
+}

src/utils/request.js

@@ -16,15 +16,17 @@ const service = axios.create({
 /*axios请求拦截*/
 service.interceptors.request.use(
     (config) => {
-        startLoading()
+        if (typeof config.jdtTitle !== 'undefined') {
+            store.commit('app/setJdt', {title: config.jdtTitle, isOpen: true})
+        } else {
+            startLoading()
+        }
         if (store.getters['user/token']) {
             config.headers['token'] = store.state.user.token
         }
-        //store.commit('app/setLoading', false)
         return config
     },
     (error) => {
-        //store.commit('app/setLoading', false)
         endLoading()
         return Promise.reject(error)
     }
@@ -32,7 +34,6 @@ service.interceptors.request.use(
 
 service.interceptors.response.use(
     (response) => {
-        //store.commit('app/setLoading', false)
         endLoading()
         if (response.data.code === 200 || response.data.code === 0) {
             return response.data.data
@@ -93,7 +94,7 @@ service.interceptors.response.use(
     },
     (error) => {
         endLoading()
-        //store.commit('app/setLoading', false)
+
         ElMessage({
             message: error,
             type: 'error',

src/utils/websocket.js

@@ -1,4 +1,4 @@
-import { ElMessageBox, ElNotification } from 'element-plus'
+import {ElMessageBox, ElNotification} from 'element-plus'
 import Cookies from 'js-cookie'
 import router from '@/router'
 import store from '@/store'
@@ -9,95 +9,96 @@ let webSocket = null
 let globalCallback = null
 
 export function closeWebSocket() {
-  Cookies.remove('sid')
-  if (webSocket !== null) {
-    webSocket.close()
-    webSocket = null
-  }
+    Cookies.remove('sid')
+    if (webSocket !== null) {
+        webSocket.close()
+        webSocket = null
+    }
 }
 
 export function setCallback(callback) {
-  if (callback !== null) {
-    globalCallback = callback
-    console.log('global callback settled.')
-  }
+    if (callback !== null) {
+        globalCallback = callback
+        console.log('global callback settled.')
+    }
 }
 
 export function initWebSocket(sid) {
-  if ('WebSocket' in window) {
-    if (webSocket === null) {
-      const url = socketUrl + sid
-      webSocket = new WebSocket(url)
+    if ('WebSocket' in window) {
+        if (webSocket === null) {
+            const url = socketUrl + sid
+            webSocket = new WebSocket(url)
+        }
+    } else {
+        alert('该浏览器不支持websocket!')
+        webSocket = 'unsupport'
     }
-  } else {
-    alert('该浏览器不支持websocket!')
-    webSocket = 'unsupport'
-  }
 
-  webSocket.onopen = function () {
-    console.log('WebSocket连接成功')
-  }
-
-  webSocket.onmessage = function (e) {
-    let data = JSON.parse(e.data)
-    if (data.name === 'refreshToken') {
-      store.commit('user/tokenChange', data.token)
-    } else if (data.name === 'systemNotification') {
-      ElNotification({
-        title: typeof data.title === 'undefined' ? '新消息' : data.title,
-        message: data.message,
-        dangerouslyUseHTMLString: true,
-        type: typeof data.type === 'undefined' ? 'warning' : data.type,
-        duration: 0,
-      })
-      if (data.refreshDelay) {
-        setTimeout(() => {
-          location.reload()
-        }, data.refreshDelay)
-      }
-      if (null !== globalCallback) {
-        globalCallback(data)
-      }
-    } else if (data.name === 'upldSetlListMessage') {
-      if (null != globalCallback) {
-        globalCallback(data)
-      }
-    } else {
-      if (null !== globalCallback) {
-        globalCallback(data)
-      }
+    webSocket.onopen = function () {
+        console.log('WebSocket连接成功')
     }
-  }
 
-  webSocket.onclose = function () {
-    webSocket = null
-    let sid
-    if (router.currentRoute.value.path === '/triageRoomScreen') {
-      sid = Cookies.get('room-screen-sid')
-    } else {
-      sid = store.getters['user/sid']
+    webSocket.onmessage = function (e) {
+        let data = JSON.parse(e.data)
+        if (data.name === 'refreshToken') {
+            store.commit('user/tokenChange', data.token)
+        } else if (data.name === 'systemNotification') {
+            ElNotification({
+                title: typeof data.title === 'undefined' ? '新消息' : data.title,
+                message: data.message,
+                dangerouslyUseHTMLString: true,
+                type: typeof data.type === 'undefined' ? 'warning' : data.type,
+                duration: 0,
+            })
+            if (data.refreshDelay) {
+                setTimeout(() => {
+                    location.reload()
+                }, data.refreshDelay)
+            }
+            if (null !== globalCallback) {
+                globalCallback(data)
+            }
+        } else if (data.name === 'upldSetlListMessage') {
+            if (null != globalCallback) {
+                store.commit('app/setJdt', {title: Cookies.get('jdtTitle'), isOpen: true})
+                globalCallback(data)
+            }
+        } else {
+            if (null !== globalCallback) {
+                globalCallback(data)
+            }
+        }
     }
-    if (!sid) {
-      if (router.currentRoute.value.path === '/login') {
-        return
-      }
-      ElMessageBox.confirm('未检测到WebSocket连接的sid，请重新登录。', '提示', {
-        showCancelButton: false,
-        type: 'warning',
-      }).then(() => {
-        router.push('/login')
-      })
-    } else {
-      if (router.currentRoute.value.path === '/triageFloorScreen') {
-        sid += '-triageFloorScreen'
-      }
-      setTimeout(() => {
-        initWebSocket(sid)
-      }, 3000)
+
+    webSocket.onclose = function () {
+        webSocket = null
+        let sid
+        if (router.currentRoute.value.path === '/triageRoomScreen') {
+            sid = Cookies.get('room-screen-sid')
+        } else {
+            sid = store.getters['user/sid']
+        }
+        if (!sid) {
+            if (router.currentRoute.value.path === '/login') {
+                return
+            }
+            ElMessageBox.confirm('未检测到WebSocket连接的sid，请重新登录。', '提示', {
+                showCancelButton: false,
+                type: 'warning',
+            }).then(() => {
+                router.push('/login')
+            })
+        } else {
+            if (router.currentRoute.value.path === '/triageFloorScreen') {
+                sid += '-triageFloorScreen'
+            }
+            setTimeout(() => {
+                initWebSocket(sid)
+            }, 3000)
+        }
     }
-  }
 
-  webSocket.onerror = function () {
-    console.error('WebSocket连接发生错误')
-  }
+    webSocket.onerror = function () {
+        console.error('WebSocket连接发生错误')
+    }
 }