feat: 再次更新

src/views/backOfficeSystem/JudgmentHome/judgmentCommand/components/FeedbackDialog.vue

@@ -79,6 +79,7 @@ watch(visible, (newVal) => {
 
 // 报告选择变化处理
 const handleReportChange = (report) => {
+  console.log('report: ', report);
   selectedReport.value = report
   if (report && report.id) {
     formData.ypid = report.id

src/views/backOfficeSystem/JudgmentHome/judgmentCommand/components/ReportSelectInput.vue

@@ -1,41 +1,20 @@
 <template>
   <div class="report-select-input">
-    <el-input
+    <el-input v-model="inputValue" placeholder="请选择研判报告" readonly @click="showDialog = true">
-      v-model="inputValue"
+      <template #append>
-      placeholder="请选择研判报告"
+        <span class="cursor-pointer" @click.stop="showDialog = true">选择</span>
-      readonly
-      @click="showDialog = true"
-    >
-      <template #suffix>
-        <el-icon class="cursor-pointer" @click="showDialog = true">
-          <ArrowDown />
-        </el-icon>
       </template>
     </el-input>
-    
+
     <!-- 选择报告弹框 -->
     <el-dialog v-model="showDialog" title="选择研判报告" width="80%">
-      <div class="dialog-content">
+      <div style="height:calc(70vh - 100px)" class="dialog-content">
-        <!-- 顶部筛选区域 -->
-        <div class="filter-section">
-          <el-radio-group v-model="reportType" @change="onTypeChange">
-            <el-radio label="01">战术报告</el-radio>
-            <el-radio label="02">战略报告</el-radio>
-          </el-radio-group>
-          <el-button type="primary" @click="handleQuery" :loading="loading">查询</el-button>
-        </div>
-
         <!-- 表格区域 -->
         <div class="table-section">
-          <ReportSelectTable
+          <ReportSelectTable :bglx="reportType" :selectedId="selectedId" @select="handleSelect" />
-            :tableData="tableData"
-            :loading="loading"
-            :selectedId="selectedId"
-            @select="handleSelect"
-          />
         </div>
       </div>
-      
+
       <template #footer>
         <el-button @click="showDialog = false">关闭</el-button>
         <el-button type="primary" @click="handleConfirm">确定</el-button>
@@ -46,9 +25,7 @@
 
 <script setup>
 import { ref, watch } from 'vue'
-import { ArrowDown } from '@element-plus/icons-vue'
 import ReportSelectTable from './ReportSelectTable.vue'
-import { tacticalGet } from '@/api/huiShangyp/tacticalApi.js'
 
 const props = defineProps({
   modelValue: {
@@ -66,8 +43,6 @@ const emit = defineEmits(['update:modelValue', 'change'])
 const inputValue = ref('')
 const showDialog = ref(false)
 const reportType = ref('01')
-const loading = ref(false)
-const tableData = ref([])
 const selectedId = ref('')
 const selectedReport = ref(null)
 
@@ -81,40 +56,9 @@ watch(() => props.bglx, (newVal) => {
   reportType.value = newVal || '01'
 })
 
-// 监听报告类型变化，自动查询
-watch(reportType, () => {
-  handleQuery()
-})
-
-// 报告类型变化处理
-const onTypeChange = () => {
-  selectedId.value = ''
-  selectedReport.value = null
-}
-
-// 查询报告列表
-const handleQuery = async () => {
-  try {
-    loading.value = true
-    const params = {
-      bglx: reportType.value,
-      pageSize: 20,
-      pageCurrent: 1
-    }
-    
-    const res = await tacticalGet(params)
-    tableData.value = res.records || []
-  } catch (error) {
-    console.error('查询报告列表失败:', error)
-    tableData.value = []
-  } finally {
-    loading.value = false
-  }
-}
-
 // 选择报告
 const handleSelect = (row) => {
-  selectedId.value = row.id
+  selectedId.value = row?.id
   selectedReport.value = row
 }
 
@@ -123,15 +67,12 @@ const handleConfirm = () => {
   if (!selectedReport.value) {
     return
   }
-  
+
   inputValue.value = selectedReport.value.ypyt || selectedReport.value.zlbt || ''
   emit('update:modelValue', inputValue.value)
   emit('change', selectedReport.value)
   showDialog.value = false
 }
-
-// 初始化时加载默认数据
-handleQuery()
 </script>
 
 <style lang="scss" scoped>
@@ -141,18 +82,8 @@ handleQuery()
   }
 }
 
-.filter-section {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  margin-bottom: 20px;
-  padding: 16px;
-  background: #f5f7fa;
-  border-radius: 4px;
-}
-
 .table-section {
-  max-height: 400px;
+  max-height: calc(100% - 2px);
   overflow-y: auto;
 }
-</style>
+</style>

src/views/backOfficeSystem/JudgmentHome/judgmentCommand/components/ReportSelectTable.vue

@@ -1,27 +1,48 @@
 <template>
   <div class="report-select-table">
-    <el-table :data="tableData" :loading="loading" height="600px"
+    <!-- 顶部筛选区域 -->
-      @selection-change="handleSelectionChange">
+    <div class="filter-section">
-      <el-table-column type="selection" width="55" :reserve-selection="false" />
+      <el-radio-group v-model="internalReportType" @change="onTypeChange">
-      <el-table-column label="研判议题" prop="ypyt" />
+        <el-radio label="01">战术报告</el-radio>
-      <el-table-column label="研判要求" prop="ypyq" />
+        <el-radio label="02">战略报告</el-radio>
-      <el-table-column label="研判时间" prop="ypsj" />
+      </el-radio-group>
-      <el-table-column label="发起部门" prop="ssbm" />
+    </div>
-    </el-table>
+
+    <!-- 表格区域 -->
+    <div class="table-section" v-loading="loading">
+      <el-table ref="tableRef" :data="tableData" height="calc(70vh - 250px)" highlight-current-row
+        @current-change="handleCurrentChange" @row-click="handleRowClick" border>
+        <el-table-column type="index" width="55" label="选择">
+          <template #default="{ $index }">
+            <el-radio v-model="selectedRowId" :label="tableData[$index]?.id" @change="handleRadioChange">
+              &nbsp;
+            </el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column label="研判议题" prop="ypyt" />
+        <el-table-column label="研判要求" prop="ypyq" />
+        <el-table-column label="研判时间" prop="ypsj" />
+        <el-table-column label="发起部门" prop="ssbm" />
+      </el-table>
+    </div>
+
+    <!-- 分页 -->
+    <div class="pagination-wrapper">
+      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
+        :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentPageChange" />
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted } from 'vue'
+import { tacticalGet } from '@/api/huiShangyp/tacticalApi.js'
 
 const props = defineProps({
-  tableData: {
+  bglx: {
-    type: Array,
+    type: String,
-    default: () => []
+    default: '01'
-  },
-  loading: {
-    type: Boolean,
-    default: false
   },
   selectedId: {
     type: [String, Number],
@@ -31,52 +52,126 @@ const props = defineProps({
 
 const emit = defineEmits(['select'])
 
-const selectedRows = ref([])
+const tableRef = ref()
+const loading = ref(false)
+const tableData = ref([])
+const selectedRowId = ref('')
+const currentPage = ref(1)
+const pageSize = ref(20)
+const total = ref(0)
+const internalReportType = ref(props.bglx)
 
 // 监听选中ID变化，用于回显
 watch(() => props.selectedId, (newId) => {
-  if (newId && props.tableData.length > 0) {
+  if (newId) {
-    // 清空当前选择
+    selectedRowId.value = newId
-    selectedRows.value = []
-
-    // 找到对应的行并选中
-    const targetRow = props.tableData.find(row => row.id === newId)
-    if (targetRow) {
-      selectedRows.value = [targetRow]
-    }
-  }
-}, { immediate: true })
-
-// 监听表格数据变化，回显选中状态
-watch(() => props.tableData, () => {
-  if (props.selectedId) {
-    const targetRow = props.tableData.find(row => row.id === props.selectedId)
-    if (targetRow) {
-      selectedRows.value = [targetRow]
-    }
-  }
-}, { immediate: true })
-
-// 选择变化处理
-const handleSelectionChange = (selection) => {
-  // 由于是单选，只取第一个
-  if (selection.length > 0) {
-    // 清空之前的选择
-    selectedRows.value = []
-    // 设置新的选择
-    setTimeout(() => {
-      selectedRows.value = [selection[selection.length - 1]]
-      emit('select', selection[selection.length - 1])
-    }, 0)
   } else {
-    selectedRows.value = []
+    selectedRowId.value = ''
+  }
+}, { immediate: true })
+
+// 监听外部报告类型变化，更新内部状态
+watch(() => props.bglx, (newVal) => {
+  internalReportType.value = newVal || '01'
+  currentPage.value = 1
+  selectedRowId.value = ''
+  loadData()
+})
+
+// 加载数据
+const loadData = async () => {
+  try {
+    loading.value = true
+    const params = {
+      bglx: internalReportType.value,
+      pageSize: pageSize.value,
+      pageCurrent: currentPage.value
+    }
+
+    const res = await tacticalGet(params)
+    tableData.value = res.records || []
+    total.value = res.total || 0
+  } catch (error) {
+    tableData.value = []
+    total.value = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+// 当前行变化处理
+const handleCurrentChange = (currentRow) => {
+  if (currentRow && currentRow.id) {
+    selectedRowId.value = currentRow.id
+    emit('select', currentRow)
+  } else {
+    selectedRowId.value = ''
     emit('select', null)
   }
 }
+
+// 行点击处理
+const handleRowClick = (row) => {
+  if (!row || !row.id) return
+
+  // 直接设置当前行
+  tableRef.value?.setCurrentRow(row)
+  selectedRowId.value = row.id
+  emit('select', row)
+}
+
+// radio变化处理
+const handleRadioChange = (selectedId) => {
+  const selectedRow = tableData.value.find(row => row.id === selectedId)
+  if (selectedRow) {
+    tableRef.value?.setCurrentRow(selectedRow)
+    emit('select', selectedRow)
+  }
+}
+
+// 页面大小变化
+const handleSizeChange = (size) => {
+  pageSize.value = size
+  currentPage.value = 1
+  loadData()
+}
+
+// 当前页变化
+const handleCurrentPageChange = (page) => {
+  currentPage.value = page
+  loadData()
+}
+
+// 报告类型变化处理
+const onTypeChange = () => {
+  currentPage.value = 1
+  selectedRowId.value = ''
+  emit('select', null)
+  loadData()
+}
+
+// 初始化加载数据
+onMounted(() => {
+  loadData()
+})
 </script>
 
 <style lang="scss" scoped>
 .report-select-table {
+  .filter-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 20px;
+    padding: 16px;
+    background: #f5f7fa;
+    border-radius: 4px;
+  }
+
+  .table-section {
+    margin-bottom: 20px;
+  }
 
   // 表格样式
   :deep(.el-table) {
@@ -86,5 +181,11 @@ const handleSelectionChange = (selection) => {
   :deep(.el-table__header-wrapper) {
     background: #f5f7fa;
   }
+
+  .pagination-wrapper {
+    display: flex;
+    justify-content: center;
+    // padding: 20px 0;
+  }
 }
 </style>