修改样式

yudao-ui-admin-vue3/src/views/pressure2/boilertaskorder/components/AddOrEditCheckItemForEquipment.vue

@@ -35,12 +35,15 @@
           <div
             class="checkItemContent"
             v-for="checkItem in checkItemList"
-            :key="checkItem.inspectionNature"
+            :key="checkItem.inspectionNature + '-' + checkItem.type"
           >
-            <div class="content-title">
+            <div class="content-title" @click="toggleCheckItemCollapse(checkItem)">
+              <el-icon class="collapse-icon" :class="{ 'is-collapsed': !checkItem.isExpanded }">
+                <ArrowDown />
+              </el-icon>
               {{ checkItem.inspectionNatureName }}
             </div>
-            <div class="inspection-grid">
+            <div class="inspection-grid" v-show="checkItem.isExpanded">
               <!-- 标题行 -->
               <div class="grid-header">检验项目</div>
               <template v-if="checkItem.itemList.length > 0">
@@ -241,6 +244,7 @@
 </template>
 <script setup lang="ts">
 import CustomDialog from '@/components/CustomDialog/index.vue'
+import { ArrowDown } from '@element-plus/icons-vue'
 import calcCheckItemFee from './calcCheckItemFee.vue'
 import CheckerSelect from '@/views/pressure2/equipboilerscheduling/components/CheckerSelect.vue'
 import { PressureBoilerCheckTypeMap, PressureReportType } from '@/utils/constants'
@@ -388,6 +392,7 @@ const handleQueryCheckItemList = async (checkType) => {
     inspectionNatureName: filterPressureBoilerCheckTypeMap.value[checkType] + " 法定收费项目",
     inspectionNature: checkType,
     type: '1',
+    isExpanded: true, // 默认展开
     itemList: (queryResult || []).map((item) => ({
       ...item,
       isAutoAmount: props.isBatch ? '0' : item.isAutoAmount,
@@ -402,6 +407,7 @@ const handleQueryCheckItemList = async (checkType) => {
     inspectionNatureName: filterPressureBoilerCheckTypeMap.value[checkType] + " 服务收费项目",
     inspectionNature: checkType,
     type: '2',
+    isExpanded: false, // 默认收起
     itemList: (queryResult || []).map((item) => ({
       ...item,
       isAutoAmount: props.isBatch ? '0' : item.isAutoAmount,
@@ -561,6 +567,11 @@ const calculateAmounts = () => {
   formData.value.serviceAmount = totalServiceAmount
 }
 
+/** 切换检验项目展开/收缩状态 */
+const toggleCheckItemCollapse = (checkItem: any) => {
+  checkItem.isExpanded = !checkItem.isExpanded
+}
+
 // 选择检验员
 const checkerSelectVisible = ref(false)
 const currentSelectedChecker = ref<any>(null)
@@ -804,6 +815,24 @@ const handleConfirm = async () => {
   height: 36px;
   line-height: 36px;
   background-color: var(--el-color-primary-light-9);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: var(--el-color-primary-light-8);
+  }
+
+  .collapse-icon {
+    margin-right: 8px;
+    transition: transform 0.3s;
+    font-size: 14px;
+
+    &.is-collapsed {
+      transform: rotate(-90deg);
+    }
+  }
+
   &::before {
     content: '';
     height: 70%;

yudao-ui-admin-vue3/src/views/pressure2/boilertaskorder/components/AddOrEditCheckItemForPart.vue

@@ -35,12 +35,15 @@
           <div
             class="checkItemContent"
             v-for="checkItem in checkItemList"
-            :key="checkItem.inspectionNature"
+            :key="checkItem.inspectionNature + '-' + checkItem.type"
           >
-            <div class="content-title">
+            <div class="content-title" @click="toggleCheckItemCollapse(checkItem)">
+              <el-icon class="collapse-icon" :class="{ 'is-collapsed': !checkItem.isExpanded }">
+                <ArrowDown />
+              </el-icon>
               {{ checkItem.inspectionNatureName }}
             </div>
-            <div class="inspection-grid">
+            <div class="inspection-grid" v-show="checkItem.isExpanded">
               <!-- 标题行 -->
               <div class="grid-header">检验项目</div>
               <template v-if="checkItem.itemList.length > 0">
@@ -132,6 +135,7 @@
 </template>
 <script setup lang="ts">
 import CustomDialog from '@/components/CustomDialog/index.vue'
+import { ArrowDown } from '@element-plus/icons-vue'
 import calcCheckItemFee from './calcCheckItemFee.vue'
 import CheckerSelect from '@/views/pressure2/equipboilerscheduling/components/CheckerSelect.vue'
 import { PressureBoilerCheckTypeMap, PressureReportType } from '@/utils/constants'
@@ -291,6 +295,7 @@ const handleQueryCheckItemList = async (checkType) => {
     inspectionNatureName: filterPressureBoilerCheckTypeMap.value[checkType] + " 法定收费项目",
     inspectionNature: checkType,
     type: '1',
+    isExpanded: true, // 默认展开
     itemList: (queryResult || []).map((item) => ({
       ...item,
       isAutoAmount: props.isBatch ? '0' : item.isAutoAmount,
@@ -305,6 +310,7 @@ const handleQueryCheckItemList = async (checkType) => {
     inspectionNatureName: filterPressureBoilerCheckTypeMap.value[checkType] + " 服务收费项目",
     inspectionNature: checkType,
     type: '2',
+    isExpanded: false, // 默认收起
     itemList: (queryResult || []).map((item) => ({
       ...item,
       isAutoAmount: props.isBatch ? '0' : item.isAutoAmount,
@@ -464,6 +470,11 @@ const calculateAmounts = () => {
   formData.value.serviceAmount = totalServiceAmount
 }
 
+/** 切换检验项目展开/收缩状态 */
+const toggleCheckItemCollapse = (checkItem: any) => {
+  checkItem.isExpanded = !checkItem.isExpanded
+}
+
 // 选择检验员
 const checkerSelectVisible = ref(false)
 const currentSelectedChecker = ref<any>(null)
@@ -603,6 +614,24 @@ const handleConfirm = async () => {
   height: 36px;
   line-height: 36px;
   background-color: var(--el-color-primary-light-9);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: var(--el-color-primary-light-8);
+  }
+
+  .collapse-icon {
+    margin-right: 8px;
+    transition: transform 0.3s;
+    font-size: 14px;
+
+    &.is-collapsed {
+      transform: rotate(-90deg);
+    }
+  }
+
   &::before {
     content: '';
     height: 70%;

yudao-ui-admin-vue3/src/views/pressure2/equipboilerscheduling/components/BoilerPlanScheduleDialog.vue

@@ -317,13 +317,16 @@
           <div
             class="checkItemContent"
             v-for="checkItem in checkItemList"
-            :key="checkItem.inspectionNature"
+            :key="checkItem.inspectionNature + '-' + checkItem.type"
           >
             <div v-if="checkItem.inspectionNature == formData.checkType">
-              <div class="content-title">
+              <div class="content-title" @click="toggleCheckItemCollapse(checkItem)">
+                <el-icon class="collapse-icon" :class="{ 'is-collapsed': !checkItem.isExpanded }">
+                  <ArrowDown />
+                </el-icon>
                 {{ checkItem.inspectionNatureName }}
               </div>
-              <div class="inspection-grid">
+              <div class="inspection-grid" v-show="checkItem.isExpanded">
                 <template v-if="checkItem.itemList.length > 0">
                   <!-- Grid 容器 -->
                   <div
@@ -417,6 +420,7 @@
 
 <script setup lang="ts">
 import {FormInstance} from 'element-plus'
+import {ArrowDown} from '@element-plus/icons-vue'
 import {useMessage} from '@/hooks/web/useMessage'
 import CheckerSelect from '@/views/pressure2/equipboilerscheduling/components/CheckerSelect.vue'
 import dayjs from 'dayjs';
@@ -1181,6 +1185,7 @@ const handleQueryCheckItemList = async () => {
       inspectionNatureName: PressureBoilerCheckTypeMap[type] + " 法定收费项目",
       inspectionNature: type,
       type: '1',
+      isExpanded: inType == 1, // 根据 inType 决定是否默认展开
       itemList: (queryResult || []).map((item) => (
         {
           ...item,
@@ -1195,6 +1200,7 @@ const handleQueryCheckItemList = async () => {
       inspectionNatureName: PressureBoilerCheckTypeMap[type] + " 服务收费项目",
       inspectionNature: type,
       type: '2',
+      isExpanded: inType == 2, // 根据 inType 决定是否默认展开
       itemList: (queryResult || []).map((item) => (
         {
           ...item,
@@ -1209,6 +1215,11 @@ const handleQueryCheckItemList = async () => {
 
 }
 
+/** 切换检验项目展开/收缩状态 */
+const toggleCheckItemCollapse = (checkItem: any) => {
+  checkItem.isExpanded = !checkItem.isExpanded
+}
+
 // 判断当前用户部门是否为锅炉检验部
 const isBoilerInspectionDept = ref(false)
 
@@ -1628,6 +1639,23 @@ defineExpose({
   height: 36px;
   line-height: 36px;
   background-color: var(--el-color-primary-light-9);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: var(--el-color-primary-light-8);
+  }
+
+  .collapse-icon {
+    margin-right: 8px;
+    transition: transform 0.3s;
+    font-size: 14px;
+
+    &.is-collapsed {
+      transform: rotate(-90deg);
+    }
+  }
 
   &::before {
     content: '';

yudao-ui-admin-vue3/src/views/pressure2/pipescheduling/components/PipePlanScheduleDialog.vue

@@ -228,13 +228,16 @@
             class="checkItemContent"
             v-for="checkItem in checkItemList"
             v-show="showCheck(checkItem)"
-            :key="checkItem.inspectionNature"
+            :key="checkItem.inspectionNature + '-' + checkItem.type"
           >
             <div v-if="checkItem.inspectionNature == formData.checkType">
-              <div class="content-title">
+              <div class="content-title" @click="toggleCheckItemCollapse(checkItem)">
+                <el-icon class="collapse-icon" :class="{ 'is-collapsed': !checkItem.isExpanded }">
+                  <ArrowDown />
+                </el-icon>
                 {{ checkItem.inspectionNatureName }}
               </div>
-              <div class="inspection-grid">
+              <div class="inspection-grid" v-show="checkItem.isExpanded">
                 <template v-if="checkItem.itemList.length > 0">
                   <!-- Grid 容器 -->
                   <div
@@ -321,6 +324,7 @@
 
 <script setup lang="ts">
 import {FormInstance} from 'element-plus'
+import {ArrowDown} from '@element-plus/icons-vue'
 import {useMessage} from '@/hooks/web/useMessage'
 import dayjs from 'dayjs';
 import {EquipPipeSchedulingApi, EquipPipeSchedulingVO} from "@/api/pressure2/pipescheduling";
@@ -889,6 +893,7 @@ const handleQueryCheckItemList = async () => {
       inspectionNatureName: PressurePipeCheckTypeMap[type] + " 法定收费项目",
       inspectionNature: type,
       type: '1',
+      isExpanded: inType == 1, // 根据 inType 决定是否默认展开
       itemList: (queryResult || []).map((item) => (
         {
           ...item,
@@ -903,6 +908,7 @@ const handleQueryCheckItemList = async () => {
       inspectionNatureName: PressurePipeCheckTypeMap[type] + " 服务收费项目",
       inspectionNature: type,
       type: '2',
+      isExpanded: inType == 2, // 根据 inType 决定是否默认展开
       itemList: (queryResult || []).map((item) => (
         {
           ...item,
@@ -916,6 +922,12 @@ const handleQueryCheckItemList = async () => {
   }
 
 }
+
+/** 切换检验项目展开/收缩状态 */
+const toggleCheckItemCollapse = (checkItem: any) => {
+  checkItem.isExpanded = !checkItem.isExpanded
+}
+
 /** 打开弹窗 */
 const open = async (selectedLegalList?: EquipPipeSchedulingVO[], selectedYearList?: EquipPipeSchedulingVO[],checkType?) => {
   //console.log('open', props.selectedRows)
@@ -1257,6 +1269,23 @@ defineExpose({
   height: 36px;
   line-height: 36px;
   background-color: var(--el-color-primary-light-9);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: var(--el-color-primary-light-8);
+  }
+
+  .collapse-icon {
+    margin-right: 8px;
+    transition: transform 0.3s;
+    font-size: 14px;
+
+    &.is-collapsed {
+      transform: rotate(-90deg);
+    }
+  }
 
   &::before {
     content: '';

yudao-ui-admin-vue3/src/views/pressure2/pipetaskorder/components/AddOrEditCheckItemForEquipment.vue

@@ -38,12 +38,15 @@
           <div
             class="checkItemContent"
             v-for="checkItem in checkItemList"
-            :key="checkItem.inspectionNature"
+            :key="checkItem.inspectionNature + '-' + checkItem.type"
           >
-            <div class="content-title">
+            <div class="content-title" @click="toggleCheckItemCollapse(checkItem)">
+              <el-icon class="collapse-icon" :class="{ 'is-collapsed': !checkItem.isExpanded }">
+                <ArrowDown />
+              </el-icon>
               {{ checkItem.inspectionNatureName }}
             </div>
-            <div class="inspection-grid">
+            <div class="inspection-grid" v-show="checkItem.isExpanded">
               <!-- 标题行 -->
               <div class="grid-header">检验项目</div>
               <template v-if="checkItem.itemList.length > 0">
@@ -257,6 +260,7 @@
 </template>
 <script setup lang="ts">
 import CustomDialog from '@/components/CustomDialog/index.vue'
+import { ArrowDown } from '@element-plus/icons-vue'
 import calcCheckItemFee from './calcCheckItemFee.vue'
 import CheckerSelectBox from '@/views/pressure2/equipboilerscheduling/components/CheckerSelectBox.vue'
 import {
@@ -404,6 +408,7 @@ const handleQueryCheckItemList = async (checkType) => {
     inspectionNatureName: filterPressurePipeCheckTypeMap.value[checkType] + " 法定收费项目",
     inspectionNature: checkType,
     type: '1',
+    isExpanded: true, // 默认展开
     itemList: (queryResult || []).map((item) => ({
       ...item,
       isAutoAmount: props.isBatch ? '0' : item.isAutoAmount,
@@ -419,6 +424,7 @@ const handleQueryCheckItemList = async (checkType) => {
     inspectionNatureName: filterPressurePipeCheckTypeMap.value[checkType] + " 服务收费项目",
     inspectionNature: checkType,
     type: '2',
+    isExpanded: false, // 默认收起
     itemList: (queryResult || []).map((item) => ({
       ...item,
       isAutoAmount: props.isBatch ? '0' : item.isAutoAmount,
@@ -579,6 +585,11 @@ const calculateAmounts = () => {
   formData.value.serviceAmount = totalServiceAmount
 }
 
+/** 切换检验项目展开/收缩状态 */
+const toggleCheckItemCollapse = (checkItem: any) => {
+  checkItem.isExpanded = !checkItem.isExpanded
+}
+
 
 // 选择检验员
 const checkerSelectVisible = ref(false)
@@ -815,6 +826,24 @@ const handleConfirm = async () => {
   height: 36px;
   line-height: 36px;
   background-color: var(--el-color-primary-light-9);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: var(--el-color-primary-light-8);
+  }
+
+  .collapse-icon {
+    margin-right: 8px;
+    transition: transform 0.3s;
+    font-size: 14px;
+
+    &.is-collapsed {
+      transform: rotate(-90deg);
+    }
+  }
+
   &::before {
     content: '';
     height: 70%;