任务6804，6806风险识别与评估页面优化增加导出导入功能，分页功能（金山）

src/views/platform/risk/riskDetail.vue

@@ -138,7 +138,25 @@
             :closable="false"
             description="提示：可以拖动表格数据进行排序 。右侧有放大缩小按钮，可以放大全屏查看表格数据。"
           />
-          <el-table ref="eltable1" :data="tableList" border>
+
+          <div class="table-btn" v-if="!readonly && exportImport">
+            <el-button
+              type="primary"
+              size="mini"
+              icon="ibps-icon-sign-in"
+              @click="importTableList"
+              >导入</el-button
+            >
+            <el-button
+              type="primary"
+              size="mini"
+              icon="ibps-icon-sign-out"
+              @click="exportTableList"
+              >导出</el-button
+            >
+          </div>
+
+          <el-table ref="eltable1" :data="showPaperList" border>
             <el-table-column
               prop=""
               label="序号"
@@ -280,7 +298,7 @@
             <el-table-column
               prop="feng_xian_deng_ji"
               label="风险等级"
-              width="100"
+              width="70"
             />
             <el-table-column
               prop="feng_xian_ying_du"
@@ -364,18 +382,18 @@
               </template>
             </el-table-column>
           </el-table>
+          <el-pagination
+            v-if="pages"
+            style="margin-top: 5px; padding-bottom: 10px"
+            :current-page="pagination.currentPage"
+            :page-sizes="[10, 20, 30, 50]"
+            :page-size="pagination.pageSize"
+            layout="prev,pager,next,jumper,sizes,->,total"
+            :total="tableList.length"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
         </div>
-
-        <!-- <el-pagination
-                    style="margin-top: 5px; padding-bottom: 10px"
-                    :current-page="pagination.currentPage"
-                    :page-sizes="[10, 20,30, 50]"
-                    :page-size="pagination.pageSize"
-                    layout="prev,pager,next,jumper,sizes,->,total"
-                    :total="categoryList.length"
-                    @size-change="handleSizeChange"
-                    @current-change="handleCurrentChange"
-                /> -->
       </div>
 
       <span slot="footer" class="dialog-footer">
@@ -403,6 +421,16 @@
           >退 出</el-button
         >
       </span>
+
+      <input
+        id=""
+        ref="file"
+        style="display: none"
+        type="file"
+        name=""
+        accept=".xlsx,.xls"
+        @change="handleUploadChange"
+      />
     </el-dialog>
   </div>
 </template>
@@ -414,6 +442,9 @@ import ibpsUserSelector from '@/business/platform/org/selector'
 import { getImage } from '@/api/platform/file/attachment'
 import sortableJs from '@/mixins/sortable'
 import Sortable from 'sortablejs'
+import xlsx from 'xlsx'
+import fs from 'file-saver'
+
 export default {
   mixins: [sortableJs],
   components: {
@@ -428,7 +459,7 @@ export default {
     }
   },
   data() {
-    const { userId, position, level } = this.$store.getters
+    const { userId, position, level, setting } = this.$store.getters
     return {
       filter: [
         {
@@ -501,7 +532,22 @@ export default {
       muban: '2',
       leixing: '安全',
       riskResponse: ['风险降低', '风险接受', '风险回避'],
-      pzYishanIds: []
+      pzYishanIds: [],
+      tableCloumns: {
+        index: '序号（不可修改）',
+        yao_su_tiao_kuan_: '要素条款（不可修改）',
+        gong_zuo_huan_jie: '工作环节',
+        feng_xian_miao_sh: '风险描述',
+        xian_xing_kong_zh: '现行控制方法',
+        yan_zhong_cheng_d: '严重程度',
+        fa_sheng_pin_du_: '发生频度',
+        feng_xian_ying_du: '风险应对',
+        qian_zai_yuan_yin: '潜在原因分析',
+        ni_cai_qu_cuo_shi: '拟采取控制措施',
+        zhi_ding_ren_: '措施制定人'
+      },
+      pages: setting?.risk?.pages || false,
+      exportImport: setting?.risk?.exportImport || false
     }
   },
   computed: {
@@ -533,7 +579,10 @@ export default {
     showPaperList() {
       const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
       const end = start + this.pagination.pageSize
-      return this.categoryList.slice(start, end)
+      if (this.pages) {
+        return this.tableList.slice(start, end)
+      }
+      return this.tableList
     },
     readonly() {
       if (this.rowParams.bian_zhi_ren_) {
@@ -641,7 +690,9 @@ export default {
     // 初始化拖拽排序
     initSortable() {
       // 获取表格的tbody元素
-      console.log(this.$refs)
+      if (this.pages) {
+        return
+      }
       const el = this.$refs.eltable1.$el.querySelectorAll(
         '.el-table__body-wrapper > table > tbody'
       )[0]
@@ -1273,6 +1324,183 @@ export default {
         .join(',')
 
       this.tableList.splice(index, 1)
+    },
+    getTimeStamp() {
+      return dayjs().format('YYYYMMDDHHmmss')
+    },
+    xlsx(json, fields, filename = '.xlsx') {
+      // 导出xlsx
+      json.forEach((item) => {
+        for (const i in item) {
+          if (fields.hasOwnProperty(i)) {
+            item[fields[i]] = item[i]
+          }
+          delete item[i] // 删除原先的对象属性
+        }
+      })
+      const sheetName = filename // excel的文件名称
+      const wb = xlsx.utils.book_new() // 工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。
+      const ws = xlsx.utils.json_to_sheet(json, {
+        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' } }
+      } // 设置表格的样式
+      const wopts = {
+        bookType: 'xlsx',
+        bookSST: false,
+        type: 'binary',
+        cellStyles: true,
+        defaultCellStyle: defaultCellStyle,
+        showGridLines: false
+      } // 写入的样式
+      const wbout = xlsx.write(wb, wopts)
+      const blob = new Blob([this.s2ab(wbout)], {
+        type: 'application/octet-stream'
+      })
+      fs.saveAs(blob, filename + '.xlsx')
+    },
+    s2ab(s) {
+      let buf
+      if (typeof ArrayBuffer !== 'undefined') {
+        buf = new ArrayBuffer(s.length)
+        const view = new Uint8Array(buf)
+        for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
+        return buf
+      } else {
+        buf = new Array(s.length)
+        for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff
+        return buf
+      }
+    },
+    exportTableList() {
+      const exportData = JSON.parse(JSON.stringify(this.tableList)) || []
+      const userList = this.$store.getters.userList || []
+      console.log(exportData)
+
+      exportData.forEach((item, index) => {
+        item.index = index + 1
+        item.zhi_ding_ren_ = this.getKey(
+          userList,
+          item.zhi_ding_ren_,
+          'userId',
+          'userName'
+        )
+      })
+      console.log(exportData)
+
+      this.xlsx(exportData, this.tableCloumns, '风险项' + this.getTimeStamp())
+      this.$message.success('风险项导出成功！')
+    },
+    importTableList() {
+      this.$refs.file.click()
+    },
+    async handleUploadChange(file) {
+      try {
+        const dataBinary = await this.readFile(file.target.files[0])
+        file.target.value = null // 注意上传后要将input的值设为空
+        const workBook = xlsx.read(dataBinary, {
+          type: 'binary',
+          cellDates: true
+        })
+        const workSheet = workBook.Sheets[workBook.SheetNames[0]]
+        const data = xlsx.utils.sheet_to_json(workSheet)
+        const xlsxData = this.switchKey(data, this.tableCloumns)
+        const importData = this.switchImportData(xlsxData)
+        if (importData) {
+          this.tableList = importData
+          this.$message.success('导入风险项成功！')
+        }
+      } catch (error) {
+        this.$message.warning(error?.message || '导入失败！')
+      }
+    },
+    /* 读取文件 将文件转换为二进制 */
+    readFile(file) {
+      return new Promise((resolve) => {
+        const reader = new FileReader()
+        reader.readAsBinaryString(file)
+        reader.onload = (ev) => {
+          resolve(ev.target.result)
+        }
+      })
+    },
+    // 转换对象的key
+    switchKey(data, originalObj) {
+      const result = []
+      data.forEach((item) => {
+        const obj = {}
+        for (const key in originalObj) {
+          obj[key] = String(item[originalObj[key]] || '')
+            .trim()
+            .replace(/\r/g, '')
+        }
+        result.push(obj)
+      })
+      return result
+    },
+    switchImportData(xlsxData) {
+      const importData = JSON.parse(JSON.stringify(this.tableList)) || []
+      const userList = this.$store.getters.userList || []
+      let flag = true
+      importData.forEach((item, index) => {
+        const i = xlsxData.find(
+          (i) =>
+            i.index == index + 1 &&
+            i.yao_su_tiao_kuan_ == item.yao_su_tiao_kuan_
+        )
+
+        if (i.yan_zhong_cheng_d) {
+          if (!this.yan_zhong_cheng_d_List.includes(i.yan_zhong_cheng_d)) {
+            this.$message.error('严重程度请填写1-5数字！')
+            flag = false
+          }
+        }
+        if (i.fa_sheng_pin_du_) {
+          if (!this.fa_sheng_pin_du_List.includes(i.fa_sheng_pin_du_)) {
+            this.$message.error('发生频度请填写1-5数字！')
+            flag = false
+          }
+        }
+
+        if (i.feng_xian_ying_du) {
+          if (!this.riskResponse.includes(i.feng_xian_ying_du)) {
+            this.$message.error('风险应对请填写风险降低或风险接受或风险回避！')
+            flag = false
+          }
+        }
+        item.gong_zuo_huan_jie = i.gong_zuo_huan_jie
+        item.feng_xian_miao_sh = i.feng_xian_miao_sh
+        item.xian_xing_kong_zh = i.xian_xing_kong_zh
+        item.yan_zhong_cheng_d = i.yan_zhong_cheng_d
+        item.fa_sheng_pin_du_ = i.fa_sheng_pin_du_
+        item.feng_xian_ying_du = i.feng_xian_ying_du
+        item.qian_zai_yuan_yin = i.qian_zai_yuan_yin
+        item.ni_cai_qu_cuo_shi = i.ni_cai_qu_cuo_shi
+        item.zhi_ding_ren_ = this.getKey(
+          userList,
+          i.zhi_ding_ren_,
+          'userName',
+          'userId'
+        )
+        this.culRate(item)
+      })
+      return flag ? importData : flag
+    },
+    getKey(list, data, inKey, outKey) {
+      if (!data) {
+        return ''
+      }
+      const dataList = data.replaceAll('，', ',').split(',')
+      const keyList = []
+      dataList.forEach((n) => {
+        const item = list.find((item) => item[inKey] === n.trim())
+        keyList.push(item[outKey] || '')
+      })
+      return keyList.join(',')
     }
   }
 }
@@ -1335,6 +1563,14 @@ export default {
       background: #fff;
       overflow: auto;
     }
+    .table-btn {
+      font-size: 16px;
+      font-weight: 600;
+      margin: 20px 8px 5px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
   }
   .table-fullscreen-icon {
     position: absolute;