dev

src/components/settings/item/ItemSearch.vue

@@ -3,14 +3,14 @@
     <template #default>
       <div class="search_content_wrapper">
         <div class="search_wrapper">
-          <span>项目名称:</span>
+          <span>项目名称：</span>
           <el-input
               class="input"
               v-model="keyword"
               placeholder="请输入药品名称或者编号"
               @keydown.enter="searchSocialItem"
               clearable/>
-          <el-button type="primary" @click="searchSocialItem">搜索</el-button>
+          <span class="default-btn" @click="searchSocialItem">搜索</span>
         </div>
         <div class="search_result" style="width: 100%;padding: 0 12px">
           <div class="result_table" style="width: 100%;height: 100%;box-sizing: border-box;padding-bottom: 20px">
@@ -34,8 +34,8 @@
                          v-model:current-page="searchResult.pageNum" @current-change="changePage"/>
         </div>
         <div class="btn">
-          <el-button type="primary" @click="confirm">确认</el-button>
+          <span class="default-btn" @click="confirm">确认</span>
-          <el-button type="primary" @click="close">关闭</el-button>
+          <span class="default-btn" @click="close">关闭</span>
         </div>
       </div>
     </template>
@@ -67,6 +67,7 @@ let tableRowClassName = (res: any) => {
 }
 
 let changePage = (page: number) => {
+  searchResult.value.pageNum = page;
   searchSocialItem()
 }
 const changeCurRow = (row: any) => {
@@ -124,28 +125,20 @@ const close = () => {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  margin: auto;
-  margin-top: 20px;
   border-radius: 10px;
   box-sizing: border-box;
-  padding: 10px;
+  padding: 24px;
   display: flex;
   flex-direction: column;
 }
 
 .search_wrapper {
-  position: relative;
   width: 100%;
   display: flex;
-  margin: 0 auto;
+  margin-bottom: 24px;
-  height: 60px;
 
   span {
-    position: relative;
+    line-height: 42px;
-    display: block;
-    width: 100px;
-    text-align: right;
-    line-height: 40px;
   }
 
   .input {
@@ -153,6 +146,9 @@ const close = () => {
     flex: 1;
   }
 
+  .default-btn {
+    margin-left: 24px;
+  }
 
   button {
     width: 80px;
@@ -185,5 +181,16 @@ const close = () => {
 
 :deep(.el-input__wrapper) {
   width: 100%;
+  height: 42px;
+}
+
+.btn {
+  .default-btn {
+    margin-right: 24px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
 }
 </style>

src/components/settings/item/group/GroupAdd.vue

@@ -1,10 +1,13 @@
 <template>
-  <Mask :is-show="isShow" @close="close" title="添加组套">
+  <Mask :is-show="isShow" @close="close" title="添加组套" :show-footer="true">
-    <el-form :model="form" label-width="auto" ref="formRef">
+    <div class="group">
+      <div class="form-info">
+        <el-form :model="form" label-width="auto" ref="formRef" style="width: 100%;height: 100%">
           <el-descriptions
               :column="2"
               direction="vertical"
               border
+              style="width: 100%"
           >
             <el-descriptions-item label="组套名称">
               <el-form-item prop="itemName">
@@ -43,13 +46,15 @@
             </el-descriptions-item>
           </el-descriptions>
         </el-form>
+      </div>
       <div class="top">
         <div class="default-btn" @click="openSearchDialog">添加子项目</div>
       </div>
-    <el-table v-if="list.length>0" :data="list">
+      <div class="table" style="height: 100%">
-      <el-table-column label="名称" prop="name"></el-table-column>
+        <el-table v-if="list.length>0" :data="list" style="width: 100%;height: 100%">
-      <el-table-column label="单位" prop="unit"></el-table-column>
+          <el-table-column label="名称" prop="name" show-overflow-tooltip></el-table-column>
-      <el-table-column label="医保编码" prop="socialCode"></el-table-column>
+          <el-table-column label="单位" prop="unit" width="100" show-overflow-tooltip></el-table-column>
+          <el-table-column label="医保编码" prop="socialCode" show-overflow-tooltip></el-table-column>
           <el-table-column label="原价" prop="purchaseUnitPrice">
             <template #default="scope">
               <el-input v-model="scope.row.purchaseUnitPrice" type="number">
@@ -64,43 +69,61 @@
               </el-input>
             </template>
           </el-table-column>
+          <el-table-column label="操作" width="80">
+            <template #default="scope">
+              <span @click="removeTableRow(scope.row)" class="small-btn">删除</span>
+            </template>
+          </el-table-column>
         </el-table>
+      </div>
+    </div>
     <ItemSearch ref="createSearchRef" @confirm="createConfirm"/>
+    <template #footer>
+      <div class="footer">
+        <div class="page">
+          <el-pagination background layout="prev, pager, next" v-model:page-count="pageNum"
+                         :page-size="pageSize" :total="total" @current-change="changePage"/>
+        </div>
+        <span class="default-btn" @click="save">保存</span>
+      </div>
+    </template>
   </Mask>
 </template>
 <script setup lang="ts">
 import {ref, defineExpose, nextTick, watch} from 'vue'
 import Mask from "@/components/common/Mask.vue";
 import ItemSearch from "@/components/settings/item/ItemSearch.vue";
+
 const createSearchRef = ref<any>('')
 import {itemUnitList} from "@/utils/unitList.ts"
 import UnitSelector from "@/components/inventory/UnitSelector.vue";
+
 const isShow = ref<any>(false)
-const list=ref<any[]>([])
+const list = ref<any[]>([])
 const id = ref<any>('')
 const init = (row: any) => {
   isShow.value = true
-  form.value=default_form
+  form.value = default_form
-  if(row!=null){
+  if (row != null) {
     id.value = row.id
     form.value.name = row.name
   }
 }
 
-const openSearchDialog=()=>{
+const openSearchDialog = () => {
   nextTick(() => {
     createSearchRef.value?.init(form.value.itemName);
   });
 }
 
-const createConfirm= (data: any) => {
+const createConfirm = (data: any) => {
-  let row={
+  let row = {
-    id:null,
+    id: null,
-    name:data.name,
+    name: data.name,
-    unit:data.unit,
+    unit: data.unit,
-    socialCode:data.code,
+    socialCode: data.code,
-    purchaseUnitPrice:0,
+    purchaseUnitPrice: 0,
-    unitPrice:0,
+    unitPrice: 0,
   }
   list.value.push(row)
   calculateTotalPrices();
@@ -111,21 +134,34 @@ const close = () => {
   form.value = {name: '', ids: []}
   emit('close')
 }
-const default_form={
+const default_form = {
-  id:null,
+  id: null,
-  name:"",
+  name: "",
-  unit:"次",
+  unit: "次",
-  purchaseUnitPrice:"",
+  purchaseUnitPrice: "",
-  unitPrice:"",
+  unitPrice: "",
 }
 const form = ref<any>(default_form)
 const calculateTotalPrices = () => {
   const totalPurchasePrice = list.value.reduce((sum, item) => sum + parseFloat(item.purchaseUnitPrice || 0), 0);
   const totalPrice = list.value.reduce((sum, item) => sum + parseFloat(item.unitPrice || 0), 0);
-
   form.value.purchaseUnitPrice = totalPurchasePrice.toFixed(2); // 可以保留两位小数
   form.value.unitPrice = totalPrice.toFixed(2);
 };
+const save = () => {
+  close()
+}
+const removeTableRow = (row: any) => {
+  list.value = list.value.filter((item: any) => item.id !== row.id);
+  calculateTotalPrices();
+}
+const pageNum = ref<any>(1)
+const pageSize = ref<any>(20)
+const total = ref<any>(0)
+const changePage= (value:any) => {
+  pageNum.value=value
+  calculateTotalPrices()
+}
 watch(
     () => list.value.map(item => ({
       purchaseUnitPrice: item.purchaseUnitPrice,
@@ -134,15 +170,40 @@ watch(
     () => {
       calculateTotalPrices();
     },
-    { deep: true }
+    {deep: true}
 );
 defineExpose({init})
 </script>
 <style scoped lang="scss">
-.page {
+.group{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .form-info {
+    padding: 24px;
+  }
+}
+
+
+.top {
+  padding-left: 24px;
+}
+
+.table {
+  padding: 24px;
+  flex: 1;
+  min-height: 0;
+}
+
+.footer {
+  height: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 10px;
+  padding: 0 24px;
+}
+
+.small-btn {
+  width: 50px;
 }
 </style>

src/components/settings/item/group/GroupList.vue

@@ -3,7 +3,7 @@
     <template #default>
       <div class="search_content_wrapper">
         <div class="search_wrapper">
-          <el-button type="primary" @click="add">添加组套</el-button>
+          <span class="default-btn" @click="add">添加组套</span>
         </div>
         <div class="content">
           <el-table :data="tableList" @row-click="rowClick">
@@ -36,7 +36,7 @@
       </div>
     </template>
   </Mask>
-  <GroupAdd :add="true" ref="addGroupRef" @close="init"></GroupAdd>
+  <GroupAdd ref="addGroupRef" @close="init"></GroupAdd>
 </template>
 <script setup lang="ts">
 import {ref, nextTick} from "vue";
@@ -115,7 +115,6 @@ const handleCurrentChange = (val: any) => {
     position: relative;
     display: block;
     width: 100px;
-    text-align: right;
     line-height: 40px;
   }