seo

src/components/report/PatientRegisterListNobtn.vue

@@ -4,99 +4,48 @@
       <el-table :data="patientRegister.prList" border ref="info" id="info"
         :height="(window.pageHeight < 600) ? 230 : (window.pageHeight - 370)" highlight-current-row
         @row-click="rowClick" size="small" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="40" align="center" />
-        <el-table-column prop="completeFlag" label="体检进度" sortable>
-          <template slot-scope="scope">
-            <div :style="`color: ${setPrStatusColor(scope.row.isAudit, scope.row.completeFlag)}`">{{
-              dddw(dict.completeFlag, "id", scope.row.completeFlag, "displayName") }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="medicalStartDate" label="体检日期" width="100" align="center" sortable>
+        <el-table-column :type="dragCol[0].type" width="40" align="center" />
+        <!--列可拖拽 key值很关键  -->
+        <el-table-column v-for="(item, index) in dragCol" v-if="index != 0" :key="`${item.label + index}`"
+          :type="dragCol[index].type" :min-width="dragCol[index].minWidth" :align="dragCol[index].align"
+          :label="dragCol[index].type ? '' : item.label" :prop="dragCol[index].prop"
+          :sortable="dragCol[index].type ? false : true">
+
           <template slot-scope="scope">
-            <div v-if="scope.row.medicalStartDate">
-              {{ lmoment(scope.row.medicalStartDate, "yyyy-MM-DD") }}
+            <div v-if="dragCol[index].prop == 'completeFlag'"
+              :style="`color: ${setPrStatusColor(scope.row.isAudit, scope.row.completeFlag)}`">
+              {{ dddw(dict.completeFlag, "id", scope.row[dragCol[index].prop], "displayName") }}
             </div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="isReportPrint" label="打印" width="60" align="center" sortable>
-          <template slot-scope="scope">
-            <i class="el-icon-printer" v-if="scope.row.isReportPrint == 'Y'" style="font-size: 24px;color: green;"></i>
-          </template>
-        </el-table-column>
-        <el-table-column prop="reportPrintName" label="打印人" width="70" align="center" sortable />
-        <el-table-column prop="isUploadAppoint" label="预约备单" align="center" sortable>
-          <template slot-scope="scope">
-            <div style="font-family: 'Microsoft YaHei';">{{ scope.row.isUploadAppoint == "Y" ? "√" : "" }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="isUpload" label="报告上传" align="center" sortable>
-          <template slot-scope="scope">
-            <div style="font-family: 'Microsoft YaHei';">{{ scope.row.isUpload == "Y" ? "√" : "" }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="customerOrgName" label="单位" width="180" sortable />
-        <el-table-column prop="departmentName" label="部门" width="180" sortable />
-        <el-table-column prop="patientName" label="姓名" align="center" sortable />
-        <el-table-column prop="mobileTelephone" label="手机" width="130" sortable />
-        <el-table-column prop="sexName" label="性别" align="center" sortable />
-        <el-table-column prop="age" label="年龄" align="center" sortable />
-        <el-table-column prop="patientRegisterNo" label="条码号" width="150" align="center" sortable />
-        <el-table-column prop="patientNo" label="档案号" align="center" sortable />
-        <el-table-column prop="medicalTimes" label="体检次数" align="center" sortable />
-        <el-table-column label="分组/套餐" width="150">
-          <template slot-scope="scope">
-            <div v-if="scope.row.medicalPackageName">
-              {{ scope.row.medicalPackageName }}
+            <div v-else-if="dragCol[index].prop == 'birthDate'">
+              {{ scope.row[dragCol[index].prop].substring(0,10) }}
             </div>
-            <div v-if="scope.row.customerOrgGroupName">
-              {{ scope.row.customerOrgGroupName }}
+            <div v-else-if="dragCol[index].prop == 'isReportPrint'">
+              <i class="el-icon-printer" v-if="scope.row.isReportPrint == 'Y'"
+                style="font-size: 24px;color: green;"></i>
             </div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="nationId" label="民族" align="center" sortable>
-          <template slot-scope="scope">
-            <div>
-              {{ dddw(dict.nation, "nationId", scope.row.nationId, "displayName") }}
+            <div v-else-if="dragCol[index].prop == 'isLock'">
+              <i class="el-icon-lock" v-if="scope.row.isLock == 'Y'" style="font-size: 20px; color: red" />
             </div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="idNo" label="身份证" width="150" align="center" sortable />
-        <el-table-column prop="birthDate" label="出生日期" width="100" align="center" sortable>
-          <template slot-scope="scope">
-            <div v-if="scope.row.birthDate">
-              {{ lmoment(scope.row.birthDate, "yyyy-MM-DD") }}
+            <div v-else-if="
+              dragCol[index].prop == 'isVip' ||
+              dragCol[index].prop == 'isUpload' ||
+              dragCol[index].prop == 'isUploadAppoint'
+            ">
+              <el-checkbox :value="scope.row[dragCol[index].prop] == 'Y'" />
+            </div>
+            <div v-else-if="dragCol[index].prop == 'packGroup'">
+              {{ scope.row.medicalPackageName || scope.row.customerOrgGroupName }}
+            </div>
+            <div v-else>
+              {{ scope.row[dragCol[index].prop] }}
             </div>
           </template>
+
         </el-table-column>
-        <el-table-column prop="email" label="邮箱" width="180" sortable />
-        <el-table-column prop="telephone" label="电话" width="130" sortable />
-        <el-table-column prop="address" label="地址" width="400" sortable />
-        <el-table-column prop="medicalCardNo" label="体检卡号" sortable />
-        <el-table-column prop="jobCardNo" label="工卡号" sortable />
-        <el-table-column prop="maritalStatusName" label="婚姻状况" align="center" sortable />
-        <el-table-column prop="medicalTypeName" label="体检类别" min-width="100" align="center" sortable />
-        <el-table-column prop="personnelTypeName" label="人员类别" min-width="100" align="center" sortable />
-        <el-table-column prop="jobPost" label="职务" sortable />
-        <el-table-column prop="jobTitle" label="职称" sortable />
-        <el-table-column prop="salesman" label="介绍人" sortable />
-        <el-table-column prop="isVip" label="VIP" width="50" align="center" sortable>
-          <template slot-scope="scope">
-            <div>{{ scope.row.isVip == "Y" ? "是" : "否" }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="summaryDoctorName" :label="`${summary_check_doctor_alias[0]||'总检'}人`" align="center" sortable />
-        <el-table-column prop="summaryDate" :label="`${summary_check_doctor_alias[0]||'总检'}时间`" width="150" align="center" sortable />
 
-        <el-table-column prop="auditDoctorName" :label="`${summary_check_doctor_alias[1]||'审核'}人`" align="center" sortable />
-        <el-table-column prop="auditDate" :label="`${summary_check_doctor_alias[1]||'审核'}时间`" width="150" align="center" sortable />
 
-        <el-table-column prop="registerName" label="登记人" align="center" sortable />
-        <el-table-column prop="registerDate" label="登记时间" width="150" align="center" sortable />
-        <el-table-column prop="isLock" label="锁住" align="center" width="60" sortable>
-          <template slot-scope="scope">
-            <div>{{ scope.row.isLock == "Y" ? "是" : "否" }}</div>
-          </template>
-        </el-table-column>        
+
+
       </el-table>
       <div style="display: flex;justify-content:space-between;">
         <div></div>
@@ -112,6 +61,7 @@
 
 import moment from "moment";
 import { mapState, mapActions } from "vuex";
+import Sortable from "sortablejs";
 import { getapi, postapi, putapi, deletapi } from "@/api/api";
 import { dddw, deepCopy, objCopy, arrayReduce, arrayExistObj, setPrStatusColor } from "@/utlis/proFunc";
 
@@ -151,25 +101,46 @@ export default {
       summary_check_doctor_alias: ["总检", "审核"],
 
       //拖动列  
+      selectionCol:0,    
       dragCol: [
-        { label: "序号", prop: "sn", minWidth: 50, align: "center" },
-        { label: "姓名", prop: "patientName", minWidth: 65, align: "center"},
-        { label: "档案号", prop: "oldPatientNo", minWidth: 90, align: "center"},
-        { label: "检查条码", prop: "checkRequestNo", minWidth: 90, align: "center"},
-        { label: "检查项目", prop: "asbitemName", minWidth: 110, align: "left"},
-        { label: "性别", prop: "sexName", minWidth: 50, align: "center"},
-        { label: "年龄", prop: "age", minWidth: 50, align: "center"},        
-        { label: "单位名称", prop: "customerOrgParentName", minWidth: 110, align: "left"},
-        { label: "部门名称", prop: "customerOrgName", minWidth: 110, align: "left"},
-        { label: "电话", prop: "mobileTelephone", minWidth: 110, align: "center"},
+        { label: "勾选", type: "selection", minWidth: 40, align: "center" },
+        { label: "体检进度", prop: "completeFlag", minWidth: 90, align: "center" },
+        { label: "体检日期", prop: "medicalStartDate", minWidth: 100, align: "center" },
+        { label: "打印", prop: "isReportPrint", minWidth: 60, align: "center" },
+        { label: "打印人", prop: "reportPrintName", minWidth: 70, align: "center" },
+        { label: "预约备单", prop: "isUploadAppoint", minWidth: 90, align: "center" },
+        { label: "上传", prop: "isUpload", minWidth: 60, align: "center" },
+        { label: "条码号", prop: "patientRegisterNo", minWidth: 150, align: "center" },
+        { label: "姓名", prop: "patientName", minWidth: 60, align: "center" },
+        { label: "性别", prop: "sexName", minWidth: 60, align: "center" },
+        { label: "年龄", prop: "age", minWidth: 60, align: "center" },
+        { label: "分组/套餐", prop: "packGroup", minWidth: 150, align: "center" },
+        { label: "体检次数", prop: "medicalTimes", minWidth: 90, align: "center" },
+        { label: "单位名称", prop: "customerOrgName", minWidth: 180, align: "left" },
+        { label: "部门名称", prop: "departmentName", minWidth: 180, align: "left" },
+        { label: "手机", prop: "mobileTelephone", minWidth: 130, align: "center" },
+        { label: "电话", prop: "telephone", minWidth: 130, align: "center" },
+        { label: "档案号", prop: "patientNo", minWidth: 80, align: "center" },
         { label: "身份证号", prop: "idNo", minWidth: 160, align: "center" },
-        { label: "上传日期", prop: "pacsUploadDate", minWidth: 140, align: "center"},
-        { label: "检查日期", prop: "pacsCheckDate", minWidth: 140, align: "center"},
-        { label: "检查医生", prop: "checkDoctorName", minWidth: 80, align: "center"},
-        { label: "体检类别", prop: "medicalTypeName", minWidth: 120, align: "center"},
-        { label: "发送状态", prop: "isSend", minWidth: 80, align: "center"},
-        { label: "审核日期", prop: "auditTime", minWidth: 140, align: "center"},
-        { label: "审核医生", prop: "auditorUserName", minWidth: 80, align: "center"}
+        { label: "出生日期", prop: "birthDate", minWidth: 90, align: "center" },
+        { label: "婚姻", prop: "maritalStatusName", minWidth: 70, align: "center" },
+        { label: "民族", prop: "nationName", minWidth: 70, align: "center" },
+        { label: "地址", prop: "address", minWidth: 400, align: "left" },
+        { label: "体检卡号", prop: "medicalCardNo", minWidth: 90, align: "center" },
+        { label: "工卡号", prop: "jobCardNo", minWidth: 90, align: "center" },
+        { label: "体检类别", prop: "medicalTypeName", minWidth: 100, align: "center" },
+        { label: "人员类别", prop: "personnelTypeName", minWidth: 100, align: "center" },
+        { label: "职务", prop: "jobPost", minWidth: 70, align: "center" },
+        { label: "职称", prop: "jobTitle", minWidth: 70, align: "center" },
+        { label: "介绍人", prop: "salesman", minWidth: 80, align: "center" },
+        { label: "VIP", prop: "isVip", minWidth: 80, align: "center" },
+        { label: "总检医生", prop: "summaryDoctorName", minWidth: 90, align: "center" },
+        { label: "总检日期", prop: "summaryDate", minWidth: 140, align: "center" },
+        { label: "审核医生", prop: "auditDoctorName", minWidth: 90, align: "center" },
+        { label: "审核日期", prop: "auditDate", minWidth: 140, align: "center" },
+        { label: "登记人", prop: "registerName", minWidth: 80, align: "center" },
+        { label: "登记时间", prop: "registerDate", minWidth: 140, align: "center" },
+        { label: "锁住", prop: "isLock", minWidth: 60, align: "center" },
       ],
 
     };
@@ -194,7 +165,11 @@ export default {
   mounted() {
     this.$nextTick(() => {
       this.scrollFull()
+
+      // 监听列拖拽
+      this.initColDrag()
     })
+
   },
   computed: {
     ...mapState(["window", "dict", 'dataTransOpts', "patientRegister", "customerOrg", "report"]),
@@ -257,6 +232,37 @@ export default {
       })
     },
 
+    //监听拖拽
+    initColDrag() {
+      // 1. 获取表格的表头元素
+      const table = document.querySelector('.el-table__header-wrapper tr');
+
+      // 2. 创建 Sortable 实例
+      Sortable.create(table, {
+        animation: 150, // 拖拽动画时长
+        
+        // 开始拖拽的时候
+        onStart: (event) => {
+          if(event.oldIndex == 0){
+            this.$alert('第1列不可以拖动', '提示')
+          }
+          //evt.oldIndex;  // element index within parent
+        },
+        // 3. 监听拖拽结束事件
+        onEnd: (event) => {
+          const { oldIndex, newIndex } = event;
+          
+          // 4. 更新列定义数组的顺序
+          let movedColumn = this.dragCol.splice(oldIndex, 1)[0];
+          this.dragCol.splice(newIndex, 0, movedColumn);
+          //this.selectionCol = arrayExistObj(this.dragCol,'type','selection')
+
+          // 5. 强制表格重新渲染以更新视图
+          //this.tableBrush += 1;                
+        }
+      });
+    },
+
     lmoment(date, forMat) {
       return moment(new Date(date)).format(forMat);
     },