feat(pressure2): 添加表格序号列功能

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

@@ -24,25 +24,25 @@
       <div class="section-title">
         <span>设备信息</span>
       </div>
-      
+
       <!-- 搜索工作栏 -->
       <ContentWrap>
         <el-form
-        :model="queryParams"
-        ref="queryFormRef"
-        :inline="true"
-        label-width="80px"
+          :model="queryParams"
+          ref="queryFormRef"
+          :inline="true"
+          label-width="80px"
         >
           <!-- 基本信息查询部分 -->
           <div class="flex flex-wrap items-start gap-x-2">
             <el-form-item label="设备代码" prop="equipCode">
-            <el-input
+              <el-input
                 v-model="queryParams.equipCode"
                 placeholder="请输入设备注册代码"
                 clearable
                 @keyup.enter="handleQuery"
                 class="!w-240px"
-            />
+              />
             </el-form-item>
 
             <el-form-item label="出厂编号" prop="equipCode">
@@ -56,12 +56,12 @@
             </el-form-item>
 
             <el-form-item label="部门" prop="relateDepartment">
-            <DeptSelect
+              <DeptSelect
                 v-model="queryParams.relateDepartment"
                 placeholder="请选择部门"
                 clearable
                 class="!w-210px"
-            />
+              />
             </el-form-item>
 
             <!-- <el-form-item label="运行状态" prop="status">
@@ -86,27 +86,27 @@
             <el-form-item label="临检时间" prop="nextDate">
               <div class="flex items-center gap-x-2">
                 <el-select v-model="datePickerType" class="!w-[90px]">
-                <el-option label="时间段" value="daterange" />
-                <el-option label="月份" value="month" />
+                  <el-option label="时间段" value="daterange" />
+                  <el-option label="月份" value="month" />
                 </el-select>
                 <el-date-picker
-                v-if="datePickerType === 'daterange'"
-                v-model="daterange"
-                type="daterange"
-                value-format="YYYY-MM-DD"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                class="!w-[220px]"
-                @change="handleDateChange"
+                  v-if="datePickerType === 'daterange'"
+                  v-model="daterange"
+                  type="daterange"
+                  value-format="YYYY-MM-DD"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  class="!w-[220px]"
+                  @change="handleDateChange"
                 />
                 <el-date-picker
-                v-else
-                v-model="month"
-                type="month"
-                value-format="YYYY-MM"
-                placeholder="选择月份"
-                class="!w-[140px]"
-                @change="handleMonthChange"
+                  v-else
+                  v-model="month"
+                  type="month"
+                  value-format="YYYY-MM"
+                  placeholder="选择月份"
+                  class="!w-[140px]"
+                  @change="handleMonthChange"
                 />
               </div>
             </el-form-item>
@@ -116,9 +116,9 @@
           <!-- 区域和时间查询部分 -->
           <div class="flex flex-wrap items-start gap-x-2">
             <el-form-item label="区域" prop="equipDistrict">
-              <AreaSelect 
-                v-model="queryParams.equipDistrict" 
-                placeholder="请选择区域" 
+              <AreaSelect
+                v-model="queryParams.equipDistrict"
+                placeholder="请选择区域"
                 class="!w-[240px]"
                 multiple
                 collapse-tags
@@ -131,17 +131,17 @@
             </el-form-item>
 
             <el-form-item label="街道" prop="equipStreet">
-              <StreetSelect 
-                  v-model="queryParams.equipStreet" 
-                  :district-ids="queryParams.equipDistrict"
-                  placeholder="请选择街道" 
-                  class="!w-[240px]"
-                  multiple
-                  collapse-tags
-                  collapse-tags-tooltip
-                  :clearable="true"
-                  @clear="handleStreetClear"
-                  @change="handleStreetChange"
+              <StreetSelect
+                v-model="queryParams.equipStreet"
+                :district-ids="queryParams.equipDistrict"
+                placeholder="请选择街道"
+                class="!w-[240px]"
+                multiple
+                collapse-tags
+                collapse-tags-tooltip
+                :clearable="true"
+                @clear="handleStreetClear"
+                @change="handleStreetChange"
               />
             </el-form-item>
           </div>
@@ -150,10 +150,10 @@
           <div class="">
             <el-form-item label="管道归类" prop="typeList" class="mb-2">
               <div class="flex items-center flex-1">
-                <el-checkbox-group 
-                v-model="queryParams.typeList" 
-                class="flex flex-wrap gap-2"
-                @change="handleTypeListChange"
+                <el-checkbox-group
+                  v-model="queryParams.typeList"
+                  class="flex flex-wrap gap-2"
+                  @change="handleTypeListChange"
                 >
                   <el-checkbox
                     v-for="dict in containerTypeOptions"
@@ -168,24 +168,24 @@
 
           <!-- 操作按钮 -->
           <div class="flex justify-center">
-              <el-form-item class="!mb-0">
+            <el-form-item class="!mb-0">
               <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
               <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-              <el-button 
-                  type="primary" 
-                  @click="handleBatchSchedule" 
-                  :disabled="selectedRows.length === 0"
+              <el-button
+                type="primary"
+                @click="handleBatchSchedule"
+                :disabled="selectedRows.length === 0"
               >
-                  <Icon icon="ep:calendar" class="mr-5px" /> 批量排期
+                <Icon icon="ep:calendar" class="mr-5px" /> 批量排期
               </el-button>
-                <el-button
-                  type="primary"
-                  @click="handleBatchConcat"
-                  :disabled="selectedRows.length === 0"
-                >
-                  <Icon icon="ep:edit" class="mr-5px" /> 批量修改约检联系人
-                </el-button>
-              </el-form-item>
+              <el-button
+                type="primary"
+                @click="handleBatchConcat"
+                :disabled="selectedRows.length === 0"
+              >
+                <Icon icon="ep:edit" class="mr-5px" /> 批量修改约检联系人
+              </el-button>
+            </el-form-item>
           </div>
         </el-form>
       </ContentWrap>
@@ -214,6 +214,7 @@
 
                 >
                   <el-table-column type="selection" width="50" fixed="left"/>
+                  <el-table-column type="index" label="序号" min-width="60" align="center" :index="indexMethod1" />
                   <el-table-column label="注册代码" prop="equipCode" min-width="120" show-overflow-tooltip/>
                   <el-table-column label="管道名称" prop="pipeName" min-width="120" show-overflow-tooltip/>
                   <el-table-column label="管道编号" prop="pipeNo" min-width="120" show-overflow-tooltip/>
@@ -262,6 +263,7 @@
               </div>
             </template>
           </el-table-column>
+          <el-table-column type="index" label="序号" min-width="60" align="center" :index="indexMethod" />
           <el-table-column
             label="工程号"
             align="center"
@@ -280,13 +282,13 @@
               </div>
             </template>
           </el-table-column>
-<!--          <el-table-column-->
-<!--            label="使用证编号"-->
-<!--            align="center"-->
-<!--            prop="useNo"-->
-<!--            min-width="120"-->
-<!--            show-overflow-tooltip-->
-<!--          />-->
+          <!--          <el-table-column-->
+          <!--            label="使用证编号"-->
+          <!--            align="center"-->
+          <!--            prop="useNo"-->
+          <!--            min-width="120"-->
+          <!--            show-overflow-tooltip-->
+          <!--          />-->
           <el-table-column label="工程名称"
                            align="center"
                            prop="projectName"
@@ -496,6 +498,14 @@ const currentEquip = ref<BoilerPlanSchedulingEquipEditVO>()
 const currentCheckType = ref<'legal' | 'year' |''>('')
 const isBatchMode = ref(false)
 
+const indexMethod = (index: number) => {
+  return index + 1
+}
+
+const indexMethod1 = (index: number) => {
+  return index + 1
+}
+
 /** 打开弹窗 */
 const open = async (row: EquipBoilerSchedulingVO, indexQueryParams?: any) => {
   dialogVisible.value = true
@@ -544,7 +554,7 @@ const open = async (row: EquipBoilerSchedulingVO, indexQueryParams?: any) => {
 
     // 同步容器归类选中状态
     if (indexQueryParams.typeList?.length > 0) {
-      selectedTypeList.value = containerTypeOptions.filter(dict => 
+      selectedTypeList.value = containerTypeOptions.filter(dict =>
         indexQueryParams.typeList.includes(dict.value)
       )
     }
@@ -599,7 +609,7 @@ const handleQuery = async () => {
     const res = await EquipPipeSchedulingApi.getPlanSchedulingPipesList(params)
     list.value = res.list
     total.value = res.total
-      
+
   } finally {
     loading.value = false
   }
@@ -608,13 +618,13 @@ const handleQuery = async () => {
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value.resetFields()
-  
+
   // 重置页码
   queryParams.value.pageNo = 1
-  
+
   // 清空选中的容器归类对象
   selectedTypeList.value = []
-  
+
   // 重新查询
   handleQuery()
 }
@@ -724,7 +734,7 @@ const handleSortChange = ({ prop, order }) => {
   list.value.sort((a, b) => {
     const aValue = a[prop] || ''
     const bValue = b[prop] || ''
-    
+
     if (order === 'ascending') {
       return aValue > bValue ? 1 : -1
     } else {
@@ -738,7 +748,7 @@ const handleAreaChange = (areas: number[]) => {
   // 获取移除的区域（通过比较之前的区域列表和现在的区域列表）
   const prevAreas = Array.from(areaStreetMap.value.keys())
   const removedAreas = prevAreas.filter(area => !areas.includes(area))
-  
+
   // 移除取消选择的区域下的街道
   if (removedAreas.length > 0) {
     const currentStreets = queryParams.value.equipStreet || []
@@ -779,11 +789,11 @@ const handleStreetClear = () => {
 /** 处理日期变化 */
 const handleDateChange = (val: [string, string] | null) => {
   daterange.value = val || []
-  queryParams.value.nextDate = val 
+  queryParams.value.nextDate = val
     ? [
-        dayjs(val[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
-        dayjs(val[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
-      ] 
+      dayjs(val[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+      dayjs(val[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
+    ]
     : []
 }
 
@@ -793,7 +803,7 @@ const handleMonthChange = (val: string | null) => {
     queryParams.value.nextDate = []
     return
   }
-  
+
   const date = dayjs(val)
   queryParams.value.nextDate = [
     date.startOf('month').format('YYYY-MM-DD HH:mm:ss'),
@@ -829,7 +839,7 @@ defineExpose({
   padding: 16px;
   border: 1px solid #EBEEF5;
   border-radius: 4px;
-  
+
   .section-title {
     margin: -16px -16px 16px -16px;
     padding: 8px 16px;
@@ -843,7 +853,7 @@ defineExpose({
 
 .schedule-link {
   color: var(--el-color-primary);
-  
+
   &:hover {
     color: var(--el-color-primary-light-3);
   }