bcfz-ui/src/views/planningSchem/comprehensive/index.vue

<template>
  <div>
    <DarkLayout :query-form="queryForm">
      <!-- 查询表单插槽 -->
      <template #query-form>
        <el-form-item label="任务名称">
          <el-input
            v-model="queryForm.taskName"
            placeholder="请输入任务名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="任务代号">
          <el-input
            v-model="queryForm.taskCode"
            placeholder="请输入任务代号"
            clearable
          />
        </el-form-item>
      </template>

      <!-- Header右侧操作按钮 -->
      <template #header-actions>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button class="blue-btn" @click="resetQuery">重置</el-button>
        <el-button class="blue-btn" @click="handleAdd">新增</el-button>
      </template>

      <!-- 主要内容 -->
      <template #main>
        <OverallCard
          v-if="plans.length > 0"
          v-for="plan in plans"
          :key="plan.id"
          :plan="plan"
          @view-detail="handleViewDetail"
          @export-plan="handleExportPlan"
        />
        <el-empty v-else description="暂无方案数据" />
      </template>

      <!-- 底部右侧分页 -->
      <template #footer-actions>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        />
      </template>

    </DarkLayout>
    <!-- 任务详情弹窗 -->
    <DarkDialog title="任务详情"
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="方案名称">{{ currentPlan.planName }}</el-descriptions-item>
        <el-descriptions-item label="任务名称">{{ currentPlan.taskName }}</el-descriptions-item>
        <el-descriptions-item label="任务代号">{{ currentPlan.taskCode }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ currentPlan.startTime }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ currentPlan.endTime }}</el-descriptions-item>
        <el-descriptions-item label="编制状态">{{ currentPlan.compileStatus }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ currentPlan.status }}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </DarkDialog>

  </div>
</template>

<script>
import DarkLayout from '@/components/GlobalComponents/DarkLayout.vue'
import InterferenceCard from '@/components/Components/InterferenceCard.vue'
import DarkDialog from "@/components/Components/DarkDialog.vue";
import {planningSchemePage} from "@/api/planningScheme";
import {exportSolutionToWord} from "@/views/planningSchem/comprehensive/wordExporter";

export default {
  components: {
    DarkDialog,
    DarkLayout,
    InterferenceCard
  },
  data() {
    return {
      tableData: [
        {
          date: '2023-06-01',
          name: '张三',
          address: '北京市海淀区'
        },
        {
          date: '2023-06-02',
          name: '李四',
          address: '上海市浦东新区'
        }
      ],
      dialogVisible: false,
      currentPlan: {}, // 当前选中的任务数据
      queryForm: {
        taskName: '',
        taskCode: ''
      },
      plans: [
        {
          id: '1',
          planName: '新型导弹打击试验',
          taskName: '新型导弹打击试验',
          taskCode: 'TASK-2023-001',
          startTime: '2023-01-01',
          endTime: '2023-12-31',
          status: '有效',
          interferenceSchemeStatus: '已编制',
          measurementSchemeStatus: '已编制',
          targetSchemeStatus: '已编制',
          version: 'V1.0.0'
        },
        {
          id: '2',
          planName: '电子对抗演练',
          taskName: '电子对抗演练',
          taskCode: 'TASK-2023-002',
          startTime: '2023-02-01',
          endTime: '2023-11-30',
          status: '待审核',
          interferenceSchemeStatus: '已编制',
          measurementSchemeStatus: '已编制',
          targetSchemeStatus: '编制中',
          version: 'V1.1.0'
        },
        {
          id: '3',
          planName: '电子对抗演练',
          taskName: '电子对抗演练',
          taskCode: 'TASK-2023-003',
          startTime: '2023-03-01',
          endTime: '2023-10-31',
          status: '草稿',
          interferenceSchemeStatus: '未编制',
          measurementSchemeStatus: '已编制',
          targetSchemeStatus: '未编制',
          version: 'V0.9.0'
        },

        {
          id: '3',
          planName: '新型导弹打击试验',
          taskName: '新型导弹打击试验',
          taskCode: 'TASK-2023-003',
          startTime: '2023-03-01',
          endTime: '2023-10-31',
          status: '草稿',
          interferenceSchemeStatus: '未编制',
          measurementSchemeStatus: '已编制',
          targetSchemeStatus: '未编制',
          version: 'V0.9.0'
        },
        {
          id: '1',
          planName: '电子对抗演练',
          taskName: '电子对抗演练',
          taskCode: 'TASK-2023-001',
          startTime: '2023-01-01',
          endTime: '2023-12-31',
          status: '有效',
          interferenceSchemeStatus: '已编制',
          measurementSchemeStatus: '已编制',
          targetSchemeStatus: '已编制',
          version: 'V1.0.0'
        },
      ],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      showAdvancedSearch: false
    }
  },
  mounted() {
    this.handleQuery();
  },
  methods: {
    handleClose(done) {
      // 可以在这里添加关闭前的确认逻辑
      done()
    },
    handleViewDetail(plan) {
      this.$router.push({ path: '/planningSchem/overallPlanDesign',query:{batchId:plan.batchId} })
    },
    //导出
    async handleExportPlan(plan) {
      try {
        await exportSolutionToWord(plan.batchId);
        this.$message.success('导出Word成功');
      } catch (error) {
        this.$message.error(error.message || '导出Word失败');
      }
      // this.$message.success("导出成功！")
    },

    async handleQuery() {
      // 查询逻辑
      const res = await planningSchemePage({
        ...this.queryForm,
        pageNo:this.pagination.currentPage,
        pageSize:this.pagination.pageSize,
      })
      this.plans = res.data.records
      this.pagination.total = res.data.total
    },
    resetQuery() {
      this.queryForm = {
        taskName: '',
        taskCode: ''
      }
      this.handleQuery()
    },
    handleAdd() {
      this.$router.push({ path: '/home/planCreate' })
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // 获取数据逻辑
    }
  }
}
</script>

<style scoped>

</style>