益寿缘总后台-开方时长-增加开方数量（同一处方编号算一张）、拒方率、组别筛选与展示

src/views/his/duration/index.vue

@@ -45,7 +45,15 @@
             @keyup.enter.native="fetchList"
           />
         </el-form-item>
-
+        <el-form-item label="查询月份">
+          <el-date-picker
+            v-model="searchForm.queryMonthDate"
+            type="month"
+            placeholder="选择年月"
+            value-format="yyyy-MM"
+            size="small"
+          />
+        </el-form-item>
         <el-form-item label="开方时间">
           <el-date-picker
             v-model="dateRange"
@@ -78,12 +86,17 @@
 
     <!-- 数据列表 -->
     <el-card shadow="never" class="table-card">
+      <!--
+        在 el-table 上监听 sort-change 事件。
+        移除各个 el-table-column 上的 @sort-change，避免冲突。
+        给需要排序的列加上 sortable 属性。
+       -->
       <el-table
         :data="tableData"
         v-loading="loading"
         border
         style="width: 100%"
-        :default-sort="{ prop: 'avgOperateSecond', order: searchForm.sort === 'desc' ? 'descending' : 'ascending' }"
+        @sort-change="handleSortChange"
       >
         <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
         <el-table-column prop="doctorName" label="医生姓名" min-width="120"></el-table-column>
@@ -97,14 +110,30 @@
           label="平均耗时"
           min-width="140"
           sortable
-          :sort-orders="['ascending', 'descending']"
-          @sort-change="handleSortChange"
         >
           <template slot-scope="{ row }">
             {{ formatSeconds(row.avgOperateSecond) }}
           </template>
         </el-table-column>
-        <el-table-column prop="operation" label="总次数" min-width="120"></el-table-column>
+        <el-table-column
+          prop="operation"
+          label="总次数"
+          min-width="120"
+          sortable
+        ></el-table-column>
+        <el-table-column
+          prop="prescribeNum"
+          label="开方数量"
+          min-width="120"
+          sortable
+        ></el-table-column>
+        <el-table-column
+          prop="rejectRate"
+          label="拒方率"
+          sortable
+          align="center"
+          :formatter="formatPercentage"
+        />
         <el-table-column prop="hospitalName" label="所属医院" min-width="120"></el-table-column>
         <el-table-column prop="deptName" label="所属科室" min-width="120"></el-table-column>
       </el-table>
@@ -128,9 +157,10 @@
 </template>
 
 <script>
-import { getDurationList } from '@/api/his//doctorDuration'
-import{listDepartment} from "@/api/his/disease";
-import{listAllHospital} from "@/api/his/hospital";
+import {getDurationList} from '@/api/his//doctorDuration'
+import {listDepartment} from "@/api/his/disease";
+import {listAllHospital} from "@/api/his/hospital";
+
 export default {
   name: 'DoctorDuration',
   data() {
@@ -144,9 +174,9 @@ export default {
       loading: false,
       tableData: [],
       //医院列表
-      hospitalList:[],
+      hospitalList: [],
       //科室列表
-      depList:[],
+      depList: [],
       // 搜索表单
       searchForm: {
         groupCode: null,
@@ -155,6 +185,10 @@ export default {
         doctorName: '',
         startOperateTime: null,
         endOperateTime: null,
+        queryMonthDate: null, // 临时绑定字段，存储 "yyyy-MM" 字符串,实际传递给后端的字段 (在 fetchList 中处理)
+        queryYear: null,
+        queryMonth: null,
+        orderByColumn: 'avgOperateSecond', // 默认排序字段
         sort: 'asc' // 默认升序
       },
 
@@ -197,19 +231,33 @@ export default {
     async fetchList() {
       this.loading = true
       try {
+        // --- 处理月度查询参数 ---
+        //从 queryMonthDate 分解年月
+        if (this.searchForm.queryMonthDate) {
+          const parts = this.searchForm.queryMonthDate.split('-');
+          this.searchForm.queryYear = parseInt(parts[0], 10);
+          this.searchForm.queryMonth = parseInt(parts[1], 10);
+        } else {
+          // 如果没有选择月度查询，则清空年月参数
+          this.searchForm.queryYear = null;
+          this.searchForm.queryMonth = null;
+        }
+        // --- 结束处理月度查询参数 ---
+
         const params = {
-          ...this.searchForm,
+          ...this.searchForm, // 包含了 queryYear, queryMonth
           pageNum: this.pageNum,
           pageSize: this.pageSize
         }
 
-        // 处理时间范围
-        if (this.dateRange && this.dateRange.length === 2) {
+        // 处理时间范围 (月度查询优先)
+        // 这里简单处理：如果选择了月度查询，则不发送 date range 参数
+        if (!this.searchForm.queryMonthDate && this.dateRange && this.dateRange.length === 2) {
           params.startOperateTime = this.dateRange[0]
           params.endOperateTime = this.dateRange[1]
         } else {
-          params.startOperateTime = null
-          params.endOperateTime = null
+          delete params.startOperateTime;
+          delete params.endOperateTime;
         }
 
         const res = await getDurationList(params)
@@ -242,6 +290,10 @@ export default {
         doctorName: '',
         hospitalId: null,
         deptId: null,
+        // --- 重置月度查询 ---
+        queryMonthDate: null,
+        queryYear: null,
+        queryMonth: null,
         sort: 'asc'
       }
       this.dateRange = null
@@ -260,9 +312,26 @@ export default {
     },
 
     // 表格排序变化（点击表头排序）
-    handleSortChange({ order }) {
-      this.searchForm.sort = order === 'descending' ? 'desc' : 'asc'
-      this.fetchList()
+    handleSortChange({column, prop, order}) {
+      // console.log('Sort changed:', column, prop, order); // 可用于调试
+
+      // 如果点击的是可排序的列
+      if (prop && order) {
+        // 将点击的列的 prop (即字段名) 设置为排序字段
+        this.searchForm.orderByColumn = prop;
+        // 将排序顺序 ('ascending'/'descending') 转换为后端需要的 'asc'/'desc'
+        this.searchForm.sort = order === 'descending' ? 'desc' : 'asc';
+      } else {
+        // 如果取消排序或点击了不可排序的列，则恢复默认排序
+        // 注意：Element UI 取消排序时，order 可能是 null
+        this.searchForm.orderByColumn = 'avgOperateSecond'; // 恢复默认字段
+        this.searchForm.sort = 'asc'; // 恢复默认顺序
+      }
+
+      // 重置页码到第一页（排序后通常需要重新加载第一页）
+      this.pageNum = 1;
+      // 重新获取数据
+      this.fetchList();
     },
 
     // 秒数转“X分Y秒”
@@ -275,6 +344,24 @@ export default {
         return `${min}分${remainingSec}秒`
       }
       return `${remainingSec}秒`
+    },
+    /**
+     * 将小数格式的比率转换为百分比字符串
+     * @param {Number|String|null|undefined} rate - 输入的比率 (例如 0.1234)
+     * @param {Number} decimals - 保留的小数位数 (默认 2)
+     * @returns {String} 格式化后的百分比字符串 (例如 "12.34%")
+     */
+    formatPercentage(row, column, cellValue, index) {
+      const rate = cellValue;
+      const decimals = 2;
+      if (rate === null || rate === undefined || rate === '' || isNaN(rate)) {
+        return '0.00%';
+      }
+      const num = Number(rate);
+      if (isNaN(num) || !isFinite(num)) {
+        return '0.00%';
+      }
+      return (num * 100).toFixed(decimals) + '%';
     }
   }
 }