导出

src/components/patientRegister/patientRegisterRecoverListQuery.vue

@@ -5,20 +5,38 @@
     </div>
 
     <!--查询条件-->
-    <div style="display: flex;">
+    <div style="display: flex">
       <div class="query">
-
-        <el-select v-model="patientRegister.query.dateType" placeholder="请选择" style="width: 80px" size="small">
+        <el-select
+          v-model="patientRegister.query.dateType"
+          placeholder="请选择"
+          style="width: 80px"
+          size="small"
+        >
           <el-option label="登记日期" :value="'1'" />
           <el-option label="体检日期" :value="'2'" />
           <el-option label="登记或体检" :value="'3'" />
         </el-select>
         <!-- dateType  1 登记，2 体检，3 体检或登记-->
-        <el-date-picker v-model="patientRegister.query.startDate" type="date" placeholder="起始日期" size="small"
-          style="width:90px;" value-format="yyyy-MM-dd" :picker-options="pickerOptions" />
+        <el-date-picker
+          v-model="patientRegister.query.startDate"
+          type="date"
+          placeholder="起始日期"
+          size="small"
+          style="width: 90px"
+          value-format="yyyy-MM-dd"
+          :picker-options="pickerOptions"
+        />
         <span class="spanClass">至</span>
-        <el-date-picker v-model="patientRegister.query.endDate" type="date" placeholder="截止日期" size="small"
-          style="width:90px;" value-format="yyyy-MM-dd" :picker-options="pickerOptions" />
+        <el-date-picker
+          v-model="patientRegister.query.endDate"
+          type="date"
+          placeholder="截止日期"
+          size="small"
+          style="width: 90px"
+          value-format="yyyy-MM-dd"
+          :picker-options="pickerOptions"
+        />
       </div>
       <!--
       <div class="query">
@@ -116,15 +134,33 @@
     -->
       <div class="query">
         <span class="spanClass">人员类别</span>
-        <el-select v-model="patientRegister.query.personnelTypeIds" placeholder="请选择" clearable filterable
-          style="width: 170px" size="small" multiple collapse-tags>
-          <el-option v-for="item in dict.personnelType" :key="item.id" :label="item.displayName" :value="item.id" />
+        <el-select
+          v-model="patientRegister.query.personnelTypeIds"
+          placeholder="请选择"
+          clearable
+          filterable
+          style="width: 170px"
+          size="small"
+          multiple
+          collapse-tags
+        >
+          <el-option
+            v-for="item in dict.personnelType"
+            :key="item.id"
+            :label="item.displayName"
+            :value="item.id"
+          />
         </el-select>
       </div>
       <div class="query">
         <span class="spanClass">表回收</span>
-        <el-select v-model="patientRegister.query.isRecoverGuide" placeholder="请选择" clearable style="width: 80px"
-          size="small">
+        <el-select
+          v-model="patientRegister.query.isRecoverGuide"
+          placeholder="请选择"
+          clearable
+          style="width: 80px"
+          size="small"
+        >
           <el-option label="未回收" value="N" />
           <el-option label="已回收" value="Y" />
         </el-select>
@@ -133,53 +169,114 @@
         <el-button class="commonbutton" @click="btnQuery">查询</el-button>
       </div>
       <div class="query">
-        <download-excel :fields="jsonFields" :fetch="btnExport" type="xls" :name="tableName">
+        <!-- <download-excel :fields="jsonFields" :fetch="btnExport" type="xls" :name="tableName">
             <el-button type="" style="width:100%">导出excel</el-button>
-          </download-excel>
+          </download-excel> -->
+        <el-button type="" class="commonbutton" @click="btnExport"
+          >导出excel</el-button
+        >
       </div>
     </div>
     <div :style="'margin-top: 10px;width:' + (window.pageWidth - 15) + 'px;'">
-      <el-table :data="tableData" width="100%" border :height="window.pageHeight < 600 ? 405 : window.pageHeight - 165"
-        row-key="id" size="small" highlight-current-row ref="dataList" @selection-change="handleSelectionChange"
-        @row-click="rowClick">
+      <el-table
+        :data="tableData"
+        width="100%"
+        border
+        :height="window.pageHeight < 600 ? 405 : window.pageHeight - 165"
+        row-key="id"
+        size="small"
+        highlight-current-row
+        ref="dataList"
+        @selection-change="handleSelectionChange"
+        @row-click="rowClick"
+      >
         <el-table-column type="index" width="40" label="序号" align="center" />
-        <el-table-column prop="isRecoverGuide" label="回收" align="center" width="50" sortable>
+        <el-table-column
+          prop="isRecoverGuide"
+          label="回收"
+          align="center"
+          width="50"
+          sortable
+        >
           <template slot-scope="scope">
             <el-checkbox :value="scope.row.isRecoverGuide == 'Y'" />
           </template>
         </el-table-column>
         <el-table-column prop="completeFlag" label="体检进度" sortable>
           <template slot-scope="scope">
-            <div>{{ dddw(dict.completeFlag, "id", scope.row.completeFlag, "displayName") }}</div>
+            <div>
+              {{
+                dddw(
+                  dict.completeFlag,
+                  "id",
+                  scope.row.completeFlag,
+                  "displayName"
+                )
+              }}
+            </div>
           </template>
         </el-table-column>
         <el-table-column prop="isLock" label="锁住" width="50">
           <template slot-scope="scope">
-            <i class="el-icon-lock" v-if="scope.row.isLock == 'Y'" style="font-size: 20px; color: red" />
+            <i
+              class="el-icon-lock"
+              v-if="scope.row.isLock == 'Y'"
+              style="font-size: 20px; color: red"
+            />
           </template>
         </el-table-column>
-        <el-table-column prop="customerOrgParentName" label="单位" width="180" sortable>
+        <el-table-column
+          prop="customerOrgParentName"
+          label="单位"
+          width="180"
+          sortable
+        >
           <template slot-scope="scope">
-            <div>{{ scope.row.customerOrgParentName ? scope.row.customerOrgParentName : scope.row.customerOrgName }}
+            <div>
+              {{
+                scope.row.customerOrgParentName
+                  ? scope.row.customerOrgParentName
+                  : scope.row.customerOrgName
+              }}
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="customerOrgName" label="部门" width="180" sortable>
+        <el-table-column
+          prop="customerOrgName"
+          label="部门"
+          width="180"
+          sortable
+        >
           <template slot-scope="scope">
-            <div>{{ scope.row.customerOrgParentName == scope.row.customerOrgName ? "" : scope.row.customerOrgName }}
+            <div>
+              {{
+                scope.row.customerOrgParentName == scope.row.customerOrgName
+                  ? ""
+                  : scope.row.customerOrgName
+              }}
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="patientName" label="姓名" sortable/>
+        <el-table-column prop="patientName" label="姓名" sortable />
         <el-table-column prop="sexName" label="性别" sortable>
         </el-table-column>
         <el-table-column prop="age" label="年龄" />
-        <el-table-column prop="patientRegisterNo" label="条码号" width="150" sortable/>
-        <el-table-column prop="patientNo" label="档案号" sortable/>
+        <el-table-column
+          prop="patientRegisterNo"
+          label="条码号"
+          width="150"
+          sortable
+        />
+        <el-table-column prop="patientNo" label="档案号" sortable />
         <el-table-column prop="medicalTimes" label="体检次数"></el-table-column>
         <el-table-column label="分组/套餐" width="150">
           <template slot-scope="scope">
-            <div v-if="scope.row.medicalPackageId !== dict.personOrgId && scope.row.customerOrgId === dict.personOrgId">
+            <div
+              v-if="
+                scope.row.medicalPackageId !== dict.personOrgId &&
+                scope.row.customerOrgId === dict.personOrgId
+              "
+            >
               {{ scope.row.medicalPackageName }}
             </div>
             <div v-else>
@@ -187,8 +284,7 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="nationName" label="民族">
-        </el-table-column>
+        <el-table-column prop="nationName" label="民族"> </el-table-column>
         <el-table-column prop="idNo" label="身份证" width="150" />
         <el-table-column prop="birthDate" label="出生日期" width="100">
           <template slot-scope="scope">
@@ -228,41 +324,44 @@
             <el-checkbox :value="scope.row.isUpload == 'Y'" />
           </template>
         </el-table-column>
-
       </el-table>
       <div style="display: flex; justify-content: space-between">
         <div></div>
         <div>
-          <span style="font-size: 12px">共：{{ loadOpts.totalCount }} 条记录，当前显示：{{
-            tableData.length
-          }}
-            条。</span>
+          <span style="font-size: 12px"
+            >共：{{ loadOpts.totalCount }} 条记录，当前显示：{{
+              tableData.length
+            }}
+            条。</span
+          >
         </div>
       </div>
     </div>
-
-
   </div>
 </template>
 <script>
 import moment from "moment";
 import { mapState, mapActions } from "vuex";
 import { getapi, postapi, putapi, deletapi } from "@/api/api";
-import { dddw, objCopy, arrayReduce, arrayExistObj,deepCopy  } from "@/utlis/proFunc";
+import {
+  dddw,
+  objCopy,
+  arrayReduce,
+  arrayExistObj,
+  deepCopy,
+} from "@/utlis/proFunc";
 import { savePeoplePhoto } from "../../utlis/proApi";
+import { exportJsonToExcel } from "../../utlis/Export2Excel";
 
 export default {
-  components: {
-    
-  },
+  components: {},
   data() {
     return {
       tableData: [], //列表数据
       multipleSelection: [], //选中的数据列表
-      tableDataCurrentRow: {},  // 单行选中的行 
+      tableDataCurrentRow: {}, // 单行选中的行
 
-
-      patientRegisterNo: '',
+      patientRegisterNo: "",
 
       LocalConfig: {
         normal: {
@@ -278,7 +377,8 @@ export default {
       lazyLoading: false,
       dom: null,
       jsonFields: {
-        回收:"isRecoverGuide",
+        序号: "sn",
+        回收: "isRecoverGuide",
         体检进度: "completeFlag",
         锁住: "isLock",
         单位: "customerOrgParentName",
@@ -308,19 +408,21 @@ export default {
         VIP: "isVip",
         登记人: "creatorName",
         登记日期: "creationTime",
-        上传: "isUpload"
+        上传: "isUpload",
       },
-      tableName:""
+      tableName: "",
     };
   },
 
   created() {
     try {
-      let LocalConfig = JSON.parse(window.localStorage.getItem("LocalConfig") || null)
+      let LocalConfig = JSON.parse(
+        window.localStorage.getItem("LocalConfig") || null
+      );
       if (LocalConfig?.normal?.maxResultCount) {
-        this.LocalConfig.normal.maxResultCount = LocalConfig.normal.maxResultCount
+        this.LocalConfig.normal.maxResultCount =
+          LocalConfig.normal.maxResultCount;
       }
-
     } catch (error) {
       console.log('window.localStorage.getItem("LocalConfig")', error);
     }
@@ -338,20 +440,27 @@ export default {
     let ldate = new Date();
     this.patientRegister.query.startDate = ldate;
     this.patientRegister.query.endDate = ldate;
-    this.patientRegister.query.dateType = '2'
+    this.patientRegister.query.dateType = "2";
 
-    this.dictInit()
+    this.dictInit();
 
     this.$nextTick(() => {
-      this.scrollFull()
-    })
+      this.scrollFull();
+    });
   },
   computed: {
-    ...mapState(["pickerOptions", "window", "dict", "patientRegister", "customerOrg"]),
+    ...mapState([
+      "pickerOptions",
+      "window",
+      "dict",
+      "patientRegister",
+      "customerOrg",
+    ]),
   },
   methods: {
     ...mapActions(["getCustomerOrgGroup", "getPatientRegisterAbs"]),
-    dddw, moment,
+    dddw,
+    moment,
 
     dictInit() {
       //体检类别
@@ -380,32 +489,30 @@ export default {
     },
 
     rowClick(row) {
-      this.tableDataCurrentRow = row
+      this.tableDataCurrentRow = row;
     },
 
-
-
-
     //按条码号查个人数据
     signByPatientRegisterNo() {
-      let patientRegisterNos = [this.patientRegisterNo]
+      let patientRegisterNos = [this.patientRegisterNo];
       let body = {
-        patientRegisterNos
-      }
+        patientRegisterNos,
+      };
       //console.log(`/api/app/patientregister/getpatientregisterorpatient`, body)
-      postapi('/api/app/PatientRegister/BatchRecoverGuideByPatientRegisterNo', body)
-        .then((res) => {
-          if (res.code > -1) {
-            this.patientRegisterNo = ''
-            this.$message.success({ showClose: true, message: '操作成功！' })
-          }
-        });
+      postapi(
+        "/api/app/PatientRegister/BatchRecoverGuideByPatientRegisterNo",
+        body
+      ).then((res) => {
+        if (res.code > -1) {
+          this.patientRegisterNo = "";
+          this.$message.success({ showClose: true, message: "操作成功！" });
+        }
+      });
     },
 
-    
     //查询
     btnQuery() {
-      this.Query()
+      this.Query();
     },
     async Query() {
       // 查询时，清掉明细数据 （滚动时不清）
@@ -419,7 +526,6 @@ export default {
         this.tableData = [];
       }
 
-
       this.loadOpts = Object.assign(this.loadOpts, this.loadOptsInit);
       await this.getPrList();
     },
@@ -428,7 +534,7 @@ export default {
     async load() {
       this.loadOpts.skipCount++;
       await this.getPrList();
-      this.lazyLoading = false
+      this.lazyLoading = false;
     },
 
     // 获取列表数据
@@ -436,7 +542,7 @@ export default {
       if (
         this.loadOpts.skipCount != 0 &&
         this.loadOpts.skipCount * this.loadOpts.maxResultCount >=
-        this.loadOpts.totalCount
+          this.loadOpts.totalCount
       )
         return;
       // console.log('getPrList', this.loadOpts)
@@ -470,7 +576,7 @@ export default {
               this.patientRegister.query.customerOrgGroupIds;
           }
         } catch (error) {
-          console.error(error)
+          console.error(error);
         }
       }
 
@@ -623,48 +729,103 @@ export default {
             // curLoad.forEach((e, index) => {
             //   this.tableData.push(Object.assign({ index: Number(oldCount) + Number(index), choosed: false }, e))
             // })
-
           }
         }
       );
     },
 
-
     //滚动加载数据
     scrollFull() {
-      this.dom = this.$refs['dataList'].bodyWrapper
-      console.log('obj', this.dom)
+      this.dom = this.$refs["dataList"].bodyWrapper;
+      console.log("obj", this.dom);
 
-      this.dom.addEventListener('scroll', async () => {
+      this.dom.addEventListener("scroll", async () => {
         // console.log('scrollTop',this.dom.scrollTop,'clientHeight',this.dom.clientHeight,'scrollHeight',this.dom.scrollHeight);
-        if (this.dom.scrollTop + this.dom.clientHeight + 20 > this.dom.scrollHeight && !this.lazyLoading) {
+        if (
+          this.dom.scrollTop + this.dom.clientHeight + 20 >
+            this.dom.scrollHeight &&
+          !this.lazyLoading
+        ) {
           // 获取到的不是全部数据 当滚动到底部
           //console.log('scrollTop', obj.scrollTop, 'clientHeight', obj.clientHeight, 'scrollHeight', obj.scrollHeight);
-          if (Number(this.loadOpts.skipCount) * Number(this.loadOpts.maxResultCount) >= Number(this.loadOpts.totalCount)) {
-            this.lazyLoading = false
+          if (
+            Number(this.loadOpts.skipCount) *
+              Number(this.loadOpts.maxResultCount) >=
+            Number(this.loadOpts.totalCount)
+          ) {
+            this.lazyLoading = false;
           } else {
-            this.lazyLoading = true
-            this.load()
+            this.lazyLoading = true;
+            this.load();
             // this.dom.scrollTop = this.dom.scrollTop - 100
           }
         }
-      })
+      });
     },
     btnExport(elId) {
-      let tableDatas = deepCopy(this.tableData)
-      tableDatas.forEach((e, index) => {
-        if(e.completeFlag) e.completeFlag = this.dddw(this.dict.completeFlag, "id", e.completeFlag, "displayName")
-        if (e.sexId) e.sexId = dddw(this.dict.sex, "id", e.sexId, "displayName")
-        if (e.medicalPackageId !== this.dict.personOrgId && e.customerOrgId === this.dict.personOrgId) {
-          e.groupPack = e.medicalPackageName  // dddw(this.dict.medicalPackage, "id", e.medicalPackageId, "displayName")
-        } else if (e.medicalPackageId !== this.dict.personOrgId && e.customerOrgId !== this.dict.personOrgId) {
-          e.groupPack = e.customerOrgGroupName // dddw(this.dict.customerOrgGroupAll, "id", e.customerOrgGroupId, "displayName")
-        }
-        if (e.idNo) e.idNo = e.idNo + '&'
-        if (e.birthDate) e.birthDate = moment(e.birthDate).format("yyyy-MM-DD")
-      })
-      this.tableName = '体检表回收' + moment(new Date()).format('yyyyMMDDHHmmss') + '.xls'
-      return tableDatas;
+      require.ensure([], () => {
+        const tHeader = [];
+        const filterVal = [];
+        this.jsonFields &&
+          Object.keys(this.jsonFields).forEach((key) => {
+            tHeader.push(key);
+            filterVal.push(this.jsonFields[key]);
+          });
+        const list = this.tableData.map((row, index) => {
+          const newRow = { ...row }; // 创建副本，避免修改原数据
+          // 使用对象映射优化数据转换
+          newRow.sn = index + 1;
+          if (newRow.completeFlag)
+            newRow.completeFlag = this.dddw(
+              this.dict.completeFlag,
+              "id",
+              newRow.completeFlag,
+              "displayName"
+            );
+          if (newRow.sexId)
+            newRow.sexId = dddw(this.dict.sex, "id", newRow.sexId, "displayName");
+          if (
+            newRow.medicalPackageId !== this.dict.personOrgId &&
+            newRow.customerOrgId === this.dict.personOrgId
+          ) {
+            newRow.groupPack = newRow.medicalPackageName; // dddw(this.dict.medicalPackage, "id", newRow.medicalPackageId, "displayName")
+          } else if (
+            newRow.medicalPackageId !== this.dict.personOrgId &&
+            newRow.customerOrgId !== this.dict.personOrgId
+          ) {
+            newRow.groupPack = newRow.customerOrgGroupName; // dddw(this.dict.customerOrgGroupAll, "id", newRow.customerOrgGroupId, "displayName")
+          }
+          if (newRow.idNo) newRow.idNo = "\u200C"+newRow.idNo;
+          if (newRow.patientRegisterNo)
+            newRow.patientRegisterNo = "\u200C" + newRow.patientRegisterNo;
+          if (newRow.patientNo) newRow.patientNo = "\u200C" + newRow.patientNo;
+          if (newRow.birthDate)
+            newRow.birthDate = moment(newRow.birthDate).format("yyyy-MM-DD");
+
+          return newRow;
+        });
+        const data = list.map((v) => filterVal.map((j) => v[j]));
+        exportJsonToExcel(
+          tHeader,
+          data,
+          "体检表回收" + moment(new Date()).format("yyyyMMDDHHmmss")
+        ); //"列表excel"  是下载后的表名 可修改
+      });
+
+      // let tableDatas = deepCopy(this.tableData)
+      // tableDatas.forEach((e, index) => {
+      //   if(e.completeFlag) e.completeFlag = this.dddw(this.dict.completeFlag, "id", e.completeFlag, "displayName")
+      //   if (e.sexId) e.sexId = dddw(this.dict.sex, "id", e.sexId, "displayName")
+      //   if (e.medicalPackageId !== this.dict.personOrgId && e.customerOrgId === this.dict.personOrgId) {
+      //     e.groupPack = e.medicalPackageName  // dddw(this.dict.medicalPackage, "id", e.medicalPackageId, "displayName")
+      //   } else if (e.medicalPackageId !== this.dict.personOrgId && e.customerOrgId !== this.dict.personOrgId) {
+      //     e.groupPack = e.customerOrgGroupName // dddw(this.dict.customerOrgGroupAll, "id", e.customerOrgGroupId, "displayName")
+      //   }
+      //   if (e.idNo) e.idNo = e.idNo + '&'
+      //   if (e.birthDate) e.birthDate = moment(e.birthDate).format("yyyy-MM-DD")
+      // })
+      // this.tableName = '体检表回收' + moment(new Date()).format('yyyyMMDDHHmmss') + '.xls'
+      // return tableDatas;
     },
   },
 
@@ -677,17 +838,16 @@ export default {
         this.Query();
       }
     },
-
   },
 };
 </script>
 <style scoped>
-@import '../../assets/css/global_button.css';
-@import '../../assets/css/global_dialog.css';
-@import '../../assets/css/global_form.css';
-@import '../../assets/css/global_input.css';
-@import '../../assets/css/global_table.css';
-@import '../../assets/css/global.css';
+@import "../../assets/css/global_button.css";
+@import "../../assets/css/global_dialog.css";
+@import "../../assets/css/global_form.css";
+@import "../../assets/css/global_input.css";
+@import "../../assets/css/global_table.css";
+@import "../../assets/css/global.css";
 
 .btnClass {
   width: 100px;

src/utlis/Export2Excel.js

@@ -193,3 +193,21 @@ export function exportToExcel(idSelector, fileName, isNew, list, titleNum = 1) {
     }
     return wbout
 }
+export function exportJsonToExcel(th, jsonData, defaultTitle) {
+
+    /* original data */
+    var data = jsonData;
+    data.unshift(th);
+    var ws_name = "SheetJS";
+    var wb = new Workbook()
+    var ws = sheet_from_array_of_arrays(data);
+    console.log(wb,ws)
+
+
+    /* add worksheet to workbook */
+    wb.SheetNames.push(ws_name);
+    wb.Sheets[ws_name] = ws;
+    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
+    var title = defaultTitle || '列表'
+    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
+}