Forráskód Böngészése

批量校核样式调整

xzc 4 napja
szülő
commit
bb69ac12d7

+ 157 - 13
yudao-ui-admin-vue3/src/views/pressure2/boilerchecker/components/StatusOperationPanel.vue

@@ -390,24 +390,51 @@
       <!-- 批量提交校核 -->
       <Dialog
         v-model="showBatchSubmitToRecheckDialog"
-        width="400"
+        width="600"
         title="批量提交校核"
       >
         <el-form ref="batchRecheckFormRef" :model="batchRecheckForm" :rules="batchRecheckFormRules" label-width="80px">
           <el-form-item label="提交记录" prop="reportIds">
-            <el-select
-              v-model="batchRecheckForm.reportIds"
-              multiple
-              clearable
-              placeholder="请选择报告"
-            >
-              <el-option
-                v-for="item in getCanSubmitRecheckReport"
-                :key="item.id"
-                :value="item.id"
-                :label="item.reportName"
+            <div class="batch-recheck-report-list">
+              <!-- 查询框 -->
+              <el-input
+                v-model="batchRecheckSearchKey"
+                placeholder="请输入检验项目名称查询"
+                clearable
+                size="small"
+                class="batch-recheck-search"
               />
-            </el-select>
+              <!-- 全选 + 当前数量 -->
+              <div class="batch-recheck-header">
+                <el-checkbox
+                  :model-value="batchRecheckCheckAll"
+                  :indeterminate="batchRecheckIndeterminate"
+                  @change="handleBatchRecheckCheckAll"
+                >
+                  全选
+                </el-checkbox>
+                <span class="batch-recheck-count">
+                  已选 {{ batchRecheckForm.reportIds.length }} / {{ getCanSubmitRecheckReport.length }} 项
+                </span>
+              </div>
+              <!-- 检验项目勾选列表 -->
+              <div class="batch-recheck-checkbox-group">
+                <el-checkbox
+                  v-for="item in filteredBatchRecheckReports"
+                  :key="item.id"
+                  :model-value="batchRecheckForm.reportIds.includes(item.id)"
+                  @change="(val) => handleBatchRecheckItemCheck(item.id, val)"
+                  class="batch-recheck-checkbox-item"
+                >
+                  {{ getBatchRecheckReportDisplayName(item) }}
+                </el-checkbox>
+                <el-empty
+                  v-if="filteredBatchRecheckReports.length === 0"
+                  description="暂无匹配的检验项目"
+                  :image-size="60"
+                />
+              </div>
+            </div>
           </el-form-item>
           <el-form-item label="校核人" prop="recheckUser">
             <CustomLargeListSelect
@@ -878,6 +905,7 @@ interface Props {
   taskId: string
   teleportBtnRef: Ref<HTMLDivElement | null>
   isFullscreen?: boolean
+  partList?: any[]
 }
 
 interface Emits {
@@ -914,6 +942,69 @@ const batchRecheckFormRules = {
   recheckUser: [{required: true, message: '请选择校核人', trigger: 'change'}]
 }
 const batchRecheckFormRef = ref()
+
+// 批量提交校核弹窗的查询和全选逻辑
+const batchRecheckSearchKey = ref('')
+// 过滤后的可提交校核报告(根据查询关键字,同时匹配部件名)
+const filteredBatchRecheckReports = computed(() => {
+  const keyword = (batchRecheckSearchKey.value || '').trim().toLowerCase()
+  if (!keyword) return getCanSubmitRecheckReport.value
+  return getCanSubmitRecheckReport.value.filter((item: any) => {
+    const name = (item.reportName || '').toLowerCase()
+    const partName = (getPartNameById(item.itemPartId) || '').toLowerCase()
+    return name.includes(keyword) || partName.includes(keyword)
+  })
+})
+// 当前过滤列表是否全部选中
+const batchRecheckCheckAll = computed(() => {
+  const list = filteredBatchRecheckReports.value
+  if (!list.length) return false
+  return list.every((item: any) => batchRecheckForm.value.reportIds.includes(item.id))
+})
+// 当前过滤列表是否部分选中(用于 indeterminate 状态)
+const batchRecheckIndeterminate = computed(() => {
+  const list = filteredBatchRecheckReports.value
+  if (!list.length) return false
+  const checkedCount = list.filter((item: any) => batchRecheckForm.value.reportIds.includes(item.id)).length
+  return checkedCount > 0 && checkedCount < list.length
+})
+// 全选/取消全选当前过滤列表
+const handleBatchRecheckCheckAll = (val: any) => {
+  const checked = !!val
+  const list = filteredBatchRecheckReports.value
+  const listIds = list.map((item: any) => item.id)
+  if (checked) {
+    // 合并去重
+    const set = new Set([...batchRecheckForm.value.reportIds, ...listIds])
+    batchRecheckForm.value.reportIds = Array.from(set)
+  } else {
+    batchRecheckForm.value.reportIds = batchRecheckForm.value.reportIds.filter((id: any) => !listIds.includes(id))
+  }
+}
+// 单个检验项目勾选/取消勾选
+const handleBatchRecheckItemCheck = (id: string, val: any) => {
+  const checked = !!val
+  const ids = batchRecheckForm.value.reportIds
+  if (checked) {
+    if (!ids.includes(id)) ids.push(id)
+  } else {
+    batchRecheckForm.value.reportIds = ids.filter((x: string) => x !== id)
+  }
+}
+// 根据部件ID获取部件名称
+const getPartNameById = (partId: string): string => {
+  if (!partId || partId === '0') return ''
+  const part = (props.partList || []).find((item: any) => item.id === partId)
+  return part?.partName || ''
+}
+// 获取批量提交校核弹窗中检验项目的显示名称(电站锅炉内检有部件的,项目名前加"部件名-")
+const getBatchRecheckReportDisplayName = (item: any): string => {
+  const partName = getPartNameById(item.itemPartId)
+  if (partName) {
+    return `${partName}-${item.reportName || ''}`
+  }
+  return item.reportName || ''
+}
 // const isShowReportPdf = ref([PressureCheckerMyTaskStatus.REPORT_INPUT,PressureCheckerMyTaskStatus.REPORT_AUDIT,PressureCheckerMyTaskStatus.REPORT_APPROVE,PressureCheckerMyTaskStatus.REPORT_END].includes(props.selectedItem.taskStatus)
 //   && ![400,500,600,700].includes(props.selectedItem.reportType))
 const showReportPdfType = ref('record')
@@ -1093,6 +1184,7 @@ const handleSelectVerfiyer = async () => {
       }
     }
     batchRecheckForm.value.reportIds = getCanSubmitRecheckReport.value.map(x => x?.id)
+    batchRecheckSearchKey.value = ''
     showBatchSubmitToRecheckDialog.value = true
     return
   }
@@ -2689,6 +2781,58 @@ watch(() => props.isFullscreen, () => {
 </script>
 
 <style lang="scss" scoped>
+// 批量提交校核弹窗样式
+.batch-recheck-report-list {
+  width: 100%;
+
+  .batch-recheck-search {
+    margin-bottom: 8px;
+  }
+
+  .batch-recheck-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 8px;
+    margin-bottom: 6px;
+    background: #f5f7fa;
+    border-radius: 4px;
+
+    .batch-recheck-count {
+      font-size: 12px;
+      color: #909399;
+    }
+  }
+
+  .batch-recheck-checkbox-group {
+    max-height: 260px;
+    overflow-y: auto;
+    padding: 4px 8px;
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+
+    .batch-recheck-checkbox-item {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      margin-right: 0;
+      padding: 6px 4px;
+      border-bottom: 1px dashed #ebeef5;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      :deep(.el-checkbox__label) {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
 .capsule-tabs {
   display: inline-flex;
   align-items: center;

+ 1 - 0
yudao-ui-admin-vue3/src/views/pressure2/boilerchecker/taskDetail.vue

@@ -79,6 +79,7 @@
           :task-info="taskInfo"
           :task-order-item="taskOrderItem"
           :report-list="reportList"
+          :part-list="partList"
           :history-list="historyList"
           :taskId="taskId"
           :teleportBtnRef="teleportBtnRef"

+ 140 - 13
yudao-ui-admin-vue3/src/views/pressure2/pipechecker/components/StatusOperationPanel.vue

@@ -390,24 +390,51 @@
       <!-- 批量提交校核 -->
       <Dialog
         v-model="showBatchSubmitToRecheckDialog"
-        width="400"
+        width="600"
         title="批量提交校核"
       >
         <el-form ref="batchRecheckFormRef" :model="batchRecheckForm" :rules="batchRecheckFormRules" label-width="80px">
           <el-form-item label="提交记录" prop="reportIds">
-            <el-select
-              v-model="batchRecheckForm.reportIds"
-              multiple
-              clearable
-              placeholder="请选择报告"
-            >
-              <el-option
-                v-for="item in getCanSubmitRecheckReport"
-                :key="item.id"
-                :value="item.id"
-                :label="item.reportName"
+            <div class="batch-recheck-report-list">
+              <!-- 查询框 -->
+              <el-input
+                v-model="batchRecheckSearchKey"
+                placeholder="请输入检验项目名称查询"
+                clearable
+                size="small"
+                class="batch-recheck-search"
               />
-            </el-select>
+              <!-- 全选 + 当前数量 -->
+              <div class="batch-recheck-header">
+                <el-checkbox
+                  :model-value="batchRecheckCheckAll"
+                  :indeterminate="batchRecheckIndeterminate"
+                  @change="handleBatchRecheckCheckAll"
+                >
+                  全选
+                </el-checkbox>
+                <span class="batch-recheck-count">
+                  已选 {{ batchRecheckForm.reportIds.length }} / {{ getCanSubmitRecheckReport.length }} 项
+                </span>
+              </div>
+              <!-- 检验项目勾选列表 -->
+              <div class="batch-recheck-checkbox-group">
+                <el-checkbox
+                  v-for="item in filteredBatchRecheckReports"
+                  :key="item.id"
+                  :model-value="batchRecheckForm.reportIds.includes(item.id)"
+                  @change="(val) => handleBatchRecheckItemCheck(item.id, val)"
+                  class="batch-recheck-checkbox-item"
+                >
+                  {{ item.reportName }}
+                </el-checkbox>
+                <el-empty
+                  v-if="filteredBatchRecheckReports.length === 0"
+                  description="暂无匹配的检验项目"
+                  :image-size="60"
+                />
+              </div>
+            </div>
           </el-form-item>
           <el-form-item label="校核人" prop="recheckUser">
             <CustomLargeListSelect
@@ -911,6 +938,53 @@ const batchRecheckFormRules = {
   recheckUser: [{required: true, message: '请选择校核人', trigger: 'change'}]
 }
 
+// 批量提交校核弹窗的查询和全选逻辑
+const batchRecheckSearchKey = ref('')
+// 过滤后的可提交校核报告(根据查询关键字)
+const filteredBatchRecheckReports = computed(() => {
+  const keyword = (batchRecheckSearchKey.value || '').trim().toLowerCase()
+  if (!keyword) return getCanSubmitRecheckReport.value
+  return getCanSubmitRecheckReport.value.filter((item: any) =>
+    (item.reportName || '').toLowerCase().includes(keyword)
+  )
+})
+// 当前过滤列表是否全部选中
+const batchRecheckCheckAll = computed(() => {
+  const list = filteredBatchRecheckReports.value
+  if (!list.length) return false
+  return list.every((item: any) => batchRecheckForm.value.reportIds.includes(item.id))
+})
+// 当前过滤列表是否部分选中(用于 indeterminate 状态)
+const batchRecheckIndeterminate = computed(() => {
+  const list = filteredBatchRecheckReports.value
+  if (!list.length) return false
+  const checkedCount = list.filter((item: any) => batchRecheckForm.value.reportIds.includes(item.id)).length
+  return checkedCount > 0 && checkedCount < list.length
+})
+// 全选/取消全选当前过滤列表
+const handleBatchRecheckCheckAll = (val: any) => {
+  const checked = !!val
+  const list = filteredBatchRecheckReports.value
+  const listIds = list.map((item: any) => item.id)
+  if (checked) {
+    // 合并去重
+    const set = new Set([...batchRecheckForm.value.reportIds, ...listIds])
+    batchRecheckForm.value.reportIds = Array.from(set)
+  } else {
+    batchRecheckForm.value.reportIds = batchRecheckForm.value.reportIds.filter((id: any) => !listIds.includes(id))
+  }
+}
+// 单个检验项目勾选/取消勾选
+const handleBatchRecheckItemCheck = (id: string, val: any) => {
+  const checked = !!val
+  const ids = batchRecheckForm.value.reportIds
+  if (checked) {
+    if (!ids.includes(id)) ids.push(id)
+  } else {
+    batchRecheckForm.value.reportIds = ids.filter((x: string) => x !== id)
+  }
+}
+
 // 格式化记录结果状态显示
 const formatRecordResult = (record) => {
   const resultMap = {
@@ -1077,6 +1151,7 @@ const handleSelectVerfiyer = async () => {
       }
     }
     batchRecheckForm.value.reportIds = getCanSubmitRecheckReport.value.map(x => x?.id)
+    batchRecheckSearchKey.value = ''
     showBatchSubmitToRecheckDialog.value = true
     return
   }
@@ -2579,6 +2654,58 @@ watch(() => props.isFullscreen, () => {
 </script>
 
 <style lang="scss" scoped>
+// 批量提交校核弹窗样式
+.batch-recheck-report-list {
+  width: 100%;
+
+  .batch-recheck-search {
+    margin-bottom: 8px;
+  }
+
+  .batch-recheck-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 8px;
+    margin-bottom: 6px;
+    background: #f5f7fa;
+    border-radius: 4px;
+
+    .batch-recheck-count {
+      font-size: 12px;
+      color: #909399;
+    }
+  }
+
+  .batch-recheck-checkbox-group {
+    max-height: 260px;
+    overflow-y: auto;
+    padding: 4px 8px;
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+
+    .batch-recheck-checkbox-item {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      margin-right: 0;
+      padding: 6px 4px;
+      border-bottom: 1px dashed #ebeef5;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      :deep(.el-checkbox__label) {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
 .capsule-tabs {
   display: inline-flex;
   align-items: center;