检验项目->套餐设置->部分组件、布局问题

openhis-ui-vue3/src/views/maintainSystem/Inspection/PackageManagement.vue

@@ -47,9 +47,10 @@
             <option>检验套餐</option>
           </select>
         </div>
-        <div class="filter-item">
+        <div class="filter-item filter-item-department">
           <label>科室：</label>
           <el-tree-select
+                 v-model="searchParams.department"
                  placeholder="请选择科室"
                  :data="departments"
                  :props="{
@@ -58,7 +59,10 @@
                    children: 'children'
                  }"
                  value-key="name"
-                 style="width: 100%;"
+                 check-strictly
+                 :expand-on-click-node="false"
+                 clearable
+                 style="width: 200px;"
                />
         </div>
         <div class="filter-item">
@@ -235,7 +239,8 @@ const searchParams = ref({
   startDate: getCurrentDate(),
   endDate: getCurrentDate(),
   packageName: '',
-  packageLevel: ''
+  packageLevel: '',
+  department: ''
 });
 
 // 过滤后的数据
@@ -251,6 +256,9 @@ const filteredData = computed(() => {
     // 套餐级别筛选
     if (searchParams.value.packageLevel && item.level !== searchParams.value.packageLevel) return false;
     
+    // 科室筛选
+    if (searchParams.value.department && item.department !== searchParams.value.department) return false;
+    
     return true;
   });
 });
@@ -281,7 +289,8 @@ function handleReset() {
     startDate: getCurrentDate(),
     endDate: getCurrentDate(),
     packageName: '',
-    packageLevel: ''
+    packageLevel: '',
+    department: ''
   };
 }
 
@@ -452,6 +461,14 @@ function convertToCSV(data) {
   gap: 8px;
 }
 
+.filter-item-department {
+  min-width: 280px;
+}
+
+.filter-item-department .el-tree-select {
+  width: 100%;
+}
+
 .filter-item label {
   font-size: 14px;
   color: var(--text-secondary);

openhis-ui-vue3/src/views/maintainSystem/Inspection/index.vue

@@ -411,12 +411,22 @@
             
             <div class="form-item">
               <span class="form-label">套餐级别</span>
-              <select class="form-control form-select" id="packageLevel" v-model="packageLevel">
+              <el-select
-                <option value="">请选择套餐级别</option>
+                v-model="packageLevel"
-                <option value="全院套餐">全院套餐</option>
+                filterable
-                <option value="科室套餐">科室套餐</option>
+                allow-create
-                <option value="个人套餐">个人套餐</option>
+                default-first-option
-              </select>
+                placeholder="请选择或输入套餐级别"
+                style="width: 100%;"
+                @change="handlePackageLevelChange"
+              >
+                <el-option
+                  v-for="item in packageLevelOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
             </div>
             <div class="form-item" id="departmentContainer" v-show="packageLevel === '科室套餐'">
               <span class="form-label">科室</span>
@@ -468,47 +478,31 @@
             </div>
             <div class="form-item">
               <span class="form-label">是否停用</span>
-              <div class="radio-group">
+              <el-radio-group v-model="isDisabled" size="medium">
-                <label class="radio-item">
+                <el-radio :label="false">启用</el-radio>
-                  <input type="radio" v-model="isDisabled" :value="false" checked> 启用
+                <el-radio :label="true">停用</el-radio>
-                </label>
+              </el-radio-group>
-                <label class="radio-item">
-                  <input type="radio" v-model="isDisabled" :value="true"> 停用
-                </label>
-              </div>
             </div>
             <div class="form-item">
               <span class="form-label">显示套餐名</span>
-              <div class="radio-group">
+              <el-radio-group v-model="showPackageName" size="medium">
-                <label class="radio-item">
+                <el-radio :label="true">是</el-radio>
-                  <input type="radio" v-model="showPackageName" :value="true" checked> 是
+                <el-radio :label="false">否</el-radio>
-                </label>
+              </el-radio-group>
-                <label class="radio-item">
-                  <input type="radio" v-model="showPackageName" :value="false"> 否
-                </label>
-              </div>
             </div>
             <div class="form-item">
               <span class="form-label">生成服务费</span>
-              <div class="radio-group">
+              <el-radio-group v-model="generateServiceFee" size="medium">
-                <label class="radio-item">
+                <el-radio :label="true">是</el-radio>
-                  <input type="radio" v-model="generateServiceFee" :value="true" checked> 是
+                <el-radio :label="false">否</el-radio>
-                </label>
+              </el-radio-group>
-                <label class="radio-item">
-                  <input type="radio" v-model="generateServiceFee" :value="false"> 否
-                </label>
-              </div>
             </div>
             <div class="form-item">
               <span class="form-label">套餐价格</span>
-              <div class="radio-group">
+              <el-radio-group v-model="enablePackagePrice" size="medium">
-                <label class="radio-item">
+                <el-radio :label="true">启用</el-radio>
-                  <input type="radio" v-model="enablePackagePrice" :value="true" checked> 启用
+                <el-radio :label="false">不启用</el-radio>
-                </label>
+              </el-radio-group>
-                <label class="radio-item">
-                  <input type="radio" v-model="enablePackagePrice" :value="false"> 不启用
-                </label>
-              </div>
             </div>
             
             <div class="form-item">
@@ -848,6 +842,14 @@ function handleDepartmentChange(selectedNode, item) {
   }
 }
 
+// 处理套餐级别选择变化
+function handlePackageLevelChange(value) {
+  console.log('选择的套餐级别:', value);
+  if (value !== '科室套餐') {
+    department.value = '';
+  }
+}
+
 // 处理套餐科室选择变化
 function handlePackageDepartmentChange(selectedNode) {
   console.log('选择的套餐科室节点:', selectedNode);
@@ -973,6 +975,11 @@ const resetFilters = () => {
 // 套餐相关数据
 const packageCategory = ref('检验套餐');
 const packageLevel = ref('');
+const packageLevelOptions = ref([
+  { value: '全院套餐', label: '全院套餐' },
+  { value: '科室套餐', label: '科室套餐' },
+  { value: '个人套餐', label: '个人套餐' }
+]);
 const packageName = ref('');
 const department = ref('');
 const discount = ref('');
@@ -2058,6 +2065,8 @@ watch(packageItems, (newVal) => {
   flex: 1;
   padding: 20px;
   overflow-y: auto;
+  overflow-x: hidden;
+  max-width: 100%;
 }
 
 /* 页面标题 */
@@ -2407,6 +2416,8 @@ watch(packageItems, (newVal) => {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
   padding: 16px;
   margin-bottom: 16px;
+  max-width: 100%;
+  overflow-x: hidden;
 }
 
 .section-title {
@@ -2426,6 +2437,8 @@ watch(packageItems, (newVal) => {
 .form-item {
   display: flex;
   align-items: center;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .form-label {
@@ -2522,6 +2535,11 @@ watch(packageItems, (newVal) => {
   border-radius: 4px;
   padding: 0 8px;
   font-size: 14px;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .form-control:focus {