feat: 再次更新

2025-12-11 00:23:23 +08:00
parent cd3ee654c1
commit b9b327c16a
3 changed files with 164 additions and 131 deletions
--- a/src/views/backOfficeSystem/JudgmentHome/judgmentCommand/components/FeedbackDialog.vue
+++ b/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
--- a/src/views/backOfficeSystem/JudgmentHome/judgmentCommand/components/ReportSelectInput.vue
+++ b/src/views/backOfficeSystem/JudgmentHome/judgmentCommand/components/ReportSelectInput.vue
@ -1,41 +1,20 @@
 <template>
  <div class="report-select-input">
-    <el-input
-      v-model="inputValue"
-      placeholder="请选择研判报告"
-      readonly
-      @click="showDialog = true"
-    >
-      <template #suffix>
-        <el-icon class="cursor-pointer" @click="showDialog = true">
-          <ArrowDown />
-        </el-icon>
+    <el-input v-model="inputValue" placeholder="请选择研判报告" readonly @click="showDialog = true">
+      <template #append>
+        <span class="cursor-pointer" @click.stop="showDialog = true">选择</span>
      </template>
    </el-input>
-    
+
    <!-- 选择报告弹框 -->
    <el-dialog v-model="showDialog" title="选择研判报告" width="80%">
-      <div 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 style="height:calc(70vh - 100px)" class="dialog-content">
        <!-- 表格区域 -->
        <div class="table-section">
-          <ReportSelectTable
-            :tableData="tableData"
-            :loading="loading"
-            :selectedId="selectedId"
-            @select="handleSelect"
-          />
+          <ReportSelectTable :bglx="reportType" :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>
--- a/src/views/backOfficeSystem/JudgmentHome/judgmentCommand/components/ReportSelectTable.vue
+++ b/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">
-      <el-table-column type="selection" width="55" :reserve-selection="false" />
-      <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 class="filter-section">
+      <el-radio-group v-model="internalReportType" @change="onTypeChange">
+        <el-radio label="01">战术报告</el-radio>
+        <el-radio label="02">战略报告</el-radio>
+      </el-radio-group>
+    </div>
+
+    <!-- 表格区域 -->
+    <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: {
-    type: Array,
-    default: () => []
-  },
-  loading: {
-    type: Boolean,
-    default: false
+  bglx: {
+    type: String,
+    default: '01'
  },
  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) {
-    // 清空当前选择
-    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)
+  if (newId) {
+    selectedRowId.value = newId
  } 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>