优化代码项目录入中的模板，添加分页。

src/api/yibao/xiang-mu-lu-ru.js

@@ -1,143 +1,143 @@
 import request from '../../utils/request'
 
 export function getHuanZheFeiYong(data) {
-    return request({
-        url: '/xmlr/getHuanZheFeiYong',
-        method: 'post',
-        data,
-    })
+  return request({
+    url: '/xmlr/getHuanZheFeiYong',
+    method: 'post',
+    data,
+  })
 }
 
 export function getChargeCode(pyCode) {
-    return request({
-        url: '/xmlr/getChargeCode',
-        method: 'get',
-        params: {pyCode},
-    })
+  return request({
+    url: '/xmlr/getChargeCode',
+    method: 'get',
+    params: { pyCode },
+  })
 }
 
 export function xiangMuTuiFei(data) {
-    return request({
-        url: '/xmlr/xiangMuTuiFei',
-        method: 'post',
-        data,
-    })
+  return request({
+    url: '/xmlr/xiangMuTuiFei',
+    method: 'post',
+    data,
+  })
 }
 
-export function getMuBan(deptCode) {
-    return request({
-        url: '/xmlr/getMuBan',
-        method: 'get',
-        params: {deptCode},
-    })
+export function getMuBan(deptCode, currentPage, pageSize, total) {
+  return request({
+    url: '/xmlr/getMuBan',
+    method: 'get',
+    params: { deptCode, currentPage, pageSize, total },
+  })
 }
 
 export function getMuBanXinXi(patternName, opIdCode) {
-    return request({
-        url: '/xmlr/getMuBanXinXi',
-        method: 'get',
-        params: {patternName, opIdCode},
-    })
+  return request({
+    url: '/xmlr/getMuBanXinXi',
+    method: 'get',
+    params: { patternName, opIdCode },
+  })
 }
 
 export function queryDanGeXiangMu(pyCode, xiangMuHuoYaoPinFlag) {
-    return request({
-        url: '/xmlr/queryXiangMu',
-        method: 'get',
-        params: {pyCode, xiangMuHuoYaoPinFlag},
-    })
+  return request({
+    url: '/xmlr/queryXiangMu',
+    method: 'get',
+    params: { pyCode, xiangMuHuoYaoPinFlag },
+  })
 }
 
 export function xiangMuFeiYongShangChuan(data) {
-    return request({
-        url: '/xmlr/xiangMuFeiYongShangChuan',
-        method: 'post',
-        data,
-    })
+  return request({
+    url: '/xmlr/xiangMuFeiYongShangChuan',
+    method: 'post',
+    data,
+  })
 }
 
 export function shangChuanMuBan(data) {
-    return request({
-        url: '/xmlr/shangChuanMuBan',
-        method: 'post',
-        data,
-    })
+  return request({
+    url: '/xmlr/shangChuanMuBan',
+    method: 'post',
+    data,
+  })
 }
 
 export function yiZhuTuiFeiPiPei(inpatientNo, admissTimes, deptCode) {
-    return request({
-        url: '/xmlr/yiZhuTuiFeiPiPei',
-        method: 'get',
-        params: {inpatientNo, admissTimes, deptCode},
-    })
+  return request({
+    url: '/xmlr/yiZhuTuiFeiPiPei',
+    method: 'get',
+    params: { inpatientNo, admissTimes, deptCode },
+  })
 }
 
 export function shanChuMuBan(patterName, opIdCode) {
-    return request({
-        url: '/xmlr/shanChuMuBan',
-        method: 'get',
-        params: {patterName, opIdCode},
-    })
+  return request({
+    url: '/xmlr/shanChuMuBan',
+    method: 'get',
+    params: { patterName, opIdCode },
+  })
 }
 
 export function getDept() {
-    return request({
-        url: '/xmlr/getDept',
-        method: 'get',
-    })
+  return request({
+    url: '/xmlr/getDept',
+    method: 'get',
+  })
 }
 
 export function getWard() {
-    return request({
-        url: '/xmlr/getWard',
-        method: 'get',
-    })
+  return request({
+    url: '/xmlr/getWard',
+    method: 'get',
+  })
 }
 
 export function getPyCode(inputStr) {
-    return request({
-        url: '/xmlr/getPyCode',
-        method: 'get',
-        params: {inputStr},
-    })
+  return request({
+    url: '/xmlr/getPyCode',
+    method: 'get',
+    params: { inputStr },
+  })
 }
 
 export function getBingQuDuiYingKeShi(ward) {
-    return request({
-        url: '/xmlr/getBingQuDuiYingKeShi',
-        method: 'get',
-        params: {ward},
-    })
+  return request({
+    url: '/xmlr/getBingQuDuiYingKeShi',
+    method: 'get',
+    params: { ward },
+  })
 }
 
 export function cheXiaoTuiFei(inpatientNo, admissTimes, ledger, detailSn) {
-    return request({
-        url: '/xmlr/cheXiaoTuiFei',
-        method: 'get',
-        params: {inpatientNo, admissTimes, ledger, detailSn},
-    })
+  return request({
+    url: '/xmlr/cheXiaoTuiFei',
+    method: 'get',
+    params: { inpatientNo, admissTimes, ledger, detailSn },
+  })
 }
 
 export function weiGuiFeiYongFenXi(inpatientNo, execUnit) {
-    return request({
-        url: '/xmlr/weiGuiFeiYongFenXi',
-        method: 'get',
-        params: {inpatientNo, execUnit},
-    })
+  return request({
+    url: '/xmlr/weiGuiFeiYongFenXi',
+    method: 'get',
+    params: { inpatientNo, execUnit },
+  })
 }
 
 export function huoQuZhenShuKePiPei(inpatientNo, admissTimes, ledgerSn, chargeCodeMx, execUnit, orderNo, startTime, endTime, riQiPaiXu) {
-    return request({
-        url: '/xmlr/huoQuZhenShuKePiPei',
-        method: 'get',
-        params: {inpatientNo, admissTimes, ledgerSn, chargeCodeMx, execUnit, orderNo, startTime, endTime, riQiPaiXu},
-    })
+  return request({
+    url: '/xmlr/huoQuZhenShuKePiPei',
+    method: 'get',
+    params: { inpatientNo, admissTimes, ledgerSn, chargeCodeMx, execUnit, orderNo, startTime, endTime, riQiPaiXu },
+  })
 }
 
 export function caiFenPiPei(data) {
-    return request({
-        url: '/xmlr/caiFenPiPei',
-        method: 'post',
-        data,
-    })
+  return request({
+    url: '/xmlr/caiFenPiPei',
+    method: 'post',
+    data,
+  })
 }

src/components/med-tec-mod/HuoQuMuBan.vue

@@ -1,16 +1,17 @@
 <template>
   <el-container>
     <el-aside width="190px">
-      <el-table :height="tableHeight + 20" :data="muBanData.slice((muBanCurrentPage - 1) * muBanPageSize, muBanCurrentPage * muBanPageSize)">
+      <el-table :data="templateData.data" :height="windowSize.h - 170 + 20">
         <el-table-column label="模板名称" prop="name" width="120px">
           <!-- 店家激发弹出框 -->
           <template #default="scope">
-            <el-popover placement="right" trigger="click" :width="600">
+            <el-popover :width="600" placement="right" trigger="click">
               <template #reference>
                 <el-button type="text" @click="getMuBanXinXiClick(scope.row)">{{ scope.row.name }}</el-button>
               </template>
               <!-- 这里是弹出框中的数据 -->
-              <el-table :height="tableHeight" :data="muBanXiangQing" @selection-change="xuanZeXiangMuTable" class="eltable">
+              <el-table :data="muBanXiangQing" :height="windowSize.h - 170" class="eltable"
+                        @selection-change="xuanZeXiangMuTable">
                 <el-table-column type="selection"></el-table-column>
                 <el-table-column label="项目名称" prop="chargeName"></el-table-column>
                 <el-table-column label="单价" prop="chargeAmount"></el-table-column>
@@ -28,12 +29,12 @@
         <el-table-column>
           <template #default="scope">
             <el-popconfirm
-              confirm-button-text="确认"
-              cancel-button-text="取消"
-              icon="el-icon-info"
-              iconColor="red"
-              title="是否删除该数据"
-              @confirm="shanChuMuBanClick(scope.$index, scope.row)"
+                cancel-button-text="取消"
+                confirm-button-text="确认"
+                icon="el-icon-info"
+                iconColor="red"
+                title="是否删除该数据"
+                @confirm="shanChuMuBanClick(scope.$index, scope.row)"
             >
               <template #reference>
                 <el-button type="danger">删除</el-button>
@@ -43,90 +44,86 @@
         </el-table-column>
       </el-table>
       <el-pagination
-        @current-change="muBanHandleCurrentChange"
-        :current-page="muBanCurrentPage"
-        :page-size="muBanPageSize"
-        layout=" prev, pager, next"
-        :total="muBanData.length"
-        style="margin-top: 5px"
-        :pager-count="5"
-        small
+          :current-page="templateData.currentPage"
+          :page-size="templateData.pageSize"
+          :pager-count="5"
+          :total="templateData.total"
+          layout=" prev, pager, next"
+          small
+          style="margin-top: 5px"
+          @current-change="templatePaging"
       ></el-pagination>
     </el-aside>
   </el-container>
 </template>
 
-<script>
-import { onMounted, ref } from 'vue'
-import { getMuBanXinXi, shanChuMuBan, getMuBan } from '@/api/yibao/xiang-mu-lu-ru'
+<script name="HuoQuMuBan" setup>
+import {onMounted, ref} from 'vue'
+import {getMuBan, getMuBanXinXi, shanChuMuBan} from '@/api/yibao/xiang-mu-lu-ru'
 import store from '@/store'
-import { ElMessageBox } from 'element-plus'
-export default {
-  setup(props, ctx) {
-    const windowSize = store.state.app.windowSize
-    const tableHeight = windowSize.h - 170
+import {ElMessageBox} from 'element-plus'
 
-    // 项目录入模板数据
-    const muBanData = ref([])
-    const muBanCurrentPage = ref(1)
-    const muBanPageSize = ref(10)
+const emit = defineEmits(['selectionFeiYong'])
 
-    const muBanHandleCurrentChange = (val) => {
-      muBanCurrentPage.value = val
-    }
+const windowSize = computed(() => {
+  return store.state.app.windowSize
+})
 
-    // 获取模板信息
-    const getMuBanXinXiClick = (row) => {
-      getMuBanXinXi(row.name, row.opIdCode).then((res) => {
-        muBanXiangQing.value = res
-      })
-    }
+const templateData = $ref({
+  data: [],
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+})
 
-    // 获取模板的详情
-    const muBanXiangQing = ref([])
+const templatePaging = (val) => {
+  templateData.currentPage = val
+  getMuBan(store.state.user.info.deptCode, templateData.currentPage, templateData.pageSize, templateData.total).then((res) => {
+    templateData.data = res.records
+  })
+}
 
-    // 获取选择的数据
-    const xuanZeXiangMuTable = (val) => {
-      ctx.emit('selectionFeiYong', { val })
-    }
+// 获取模板信息
+const getMuBanXinXiClick = (row) => {
+  getMuBanXinXi(row.name, row.opIdCode).then((res) => {
+    muBanXiangQing.value = res
+  })
+}
 
-    const shanChuMuBanClick = (index, data) => {
-      if (data.opIdCode !== store.state.user.info.code) {
-        ElMessageBox.confirm('该模板非本人创建是否强制删除', '提示', {
-          type: 'error',
-        })
-          .then(() => {
-            shanChuMuBan(data.name, data.opIdCode).then((res) => {
-              muBanData.value.splice(index, 1)
-            })
+// 获取模板的详情
+const muBanXiangQing = ref([])
+
+// 获取选择的数据
+const xuanZeXiangMuTable = (val) => {
+  emit('selectionFeiYong', {val})
+}
+
+const shanChuMuBanClick = (index, data) => {
+  if (data.opIdCode !== store.state.user.info.code) {
+    ElMessageBox.confirm('该模板非本人创建是否强制删除', '提示', {
+      type: 'error',
+    })
+        .then(() => {
+          shanChuMuBan(data.name, data.opIdCode).then((res) => {
+            templateData.data.splice(index, 1)
           })
-          .catch(() => {})
-      } else {
-        shanChuMuBan(data.name, data.opIdCode).then((res) => {
-          muBanData.value.splice(index, 1)
         })
-      }
-    }
-
-    onMounted(() => {
-      getMuBan(store.state.user.info.deptCode).then((res) => {
-        muBanData.value = res
-      })
+        .catch(() => {
+        })
+  } else {
+    shanChuMuBan(data.name, data.opIdCode).then((res) => {
+      templateData.data.splice(index, 1)
     })
-
-    return {
-      tableHeight,
-      muBanData,
-      muBanCurrentPage,
-      muBanPageSize,
-      muBanHandleCurrentChange,
-      getMuBanXinXiClick,
-      xuanZeXiangMuTable,
-      muBanXiangQing,
-      shanChuMuBanClick,
-    }
-  },
+  }
 }
+
+onMounted(() => {
+  getMuBan(store.state.user.info.deptCode, templateData.currentPage, templateData.pageSize, templateData.total).then((res) => {
+    templateData.total = res.total
+    templateData.data = res.records
+    templateData.currentPage = 1
+  })
+})
 </script>
 
 <style></style>