bcfz-ui/src/views/planAndDeduction/taskMage/index.vue

<template>
  <div>
    <DarkLayout :query-form="queryForm">
      <!-- 查询表单插槽 -->
      <template #query-form>
        <el-form-item label="总体方案名称">
          <el-input
              v-model="queryForm.name"
              placeholder="请输入总体方案名称"
              clearable
          />
        </el-form-item>
        <el-form-item label="任务类型">
          <vab-dict-select placeholder="请选择任务类型" v-model="queryForm.taskType" clearable dict-code="task_type" />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="queryForm.createTime"
            type="datetimerange"
            range-separator="至"
            placeholder="选择试验时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
      </template>

      <!-- Header右侧操作按钮 -->
      <template #header-actions>
        <el-button icon="el-icon-search" type="primary" @click="handleQuery">
          查询
        </el-button>
        <el-button
            @click="showParseMethodModal"
            icon="el-icon-plus" class="blue-btn"
        > 添加 </el-button>
      </template>

      <!-- 主要内容 -->
      <template #main>
        <TaskUserCard
            v-for="plan in planList"
            :key="plan.id"
            :plan="plan"
            v-if="planList.length > 0"
            @select="handleSelect"
            @edit="handleEdit"
            @delete="handleDelete"
            @view-detail="viewDetails"
            @view-childs-detail="viewChildsDetails"
        />
        <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>

    <!-- 任务详情弹窗 -->
    <el-drawer :before-close="handleClose"
               :visible.sync="dialogVisible"
               title="任务详情"
               size="50%">
      <el-form :model="currentPlan" disabled label-width="120px" size="small">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="任务名称">
              <el-input style="width: 100%" v-model="currentPlan.taskName" placeholder="请输入任务名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务代号">
              <el-input style="width: 100%" v-model="currentPlan.taskCode" placeholder="请输入任务代号"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="任务类型">
              <vab-dict-select ref="dict" style="width: 100%" placeholder="请选择任务类型" v-model="currentPlan.taskType" clearable dict-code="task_type" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="导弹总数">
              <el-input type="number" style="width: 100%" v-model="currentPlan.totalNumberOfMissiles" placeholder="请输入导弹总数" readonly/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <template v-for="(item,index) in currentPlan.missileDataJson">
            <el-col :span="6" >
              <el-form-item :label="`导弹类型${index+1}`">
                <el-input style="width: 100%" v-model="item['missile_type']" placeholder="请输入导弹类型"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="导弹数量">
                <el-input-number :controls="false" style="width: 100%" v-model="item['missile_count']" placeholder="请输入数量"/>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="试验时间">
              <el-input v-model="currentPlan.testTime" placeholder="请输入任务时间"/>
              <!--el-date-picker
                style="width: 100%"
                v-model="currentPlan.testTime"
                type="datetimerange"
                range-separator="至"
                placeholder="选择试验时间"
                format="yyyy-MM"
                value-format="yyyy-MM"
              />-->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发射平台">
              <el-input v-model="currentPlan.launchPlatform"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="试验航区">
              <el-input v-model="currentPlan.testArea" placeholder="请输入试验航区"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="靶区">
              <el-input v-model="currentPlan.targetArea" placeholder="请输入靶区"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="温度">
              <el-input v-model="currentPlan.temperature" placeholder="请输入温度"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="湿度">
              <el-input v-model="currentPlan.humidity" placeholder="请输入湿度"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="风速">
              <el-input v-model="currentPlan.windVelocity" placeholder="请输入风速"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="降雨强度">
              <el-input v-model="currentPlan.rainfallIntensity" placeholder="请输入降雨强度"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="打击维度">
              <el-input
                  v-model="currentPlan.fightAway"
                  placeholder="请输入打击维度"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="海况">
              <el-input v-model="currentPlan.sea" placeholder="请输入海况"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="任务依据">
          <el-input
              v-model="currentPlan.missionBasis"
              type="textarea"
              :rows="5"
              placeholder="请输入任务依据"
          />
        </el-form-item>

        <el-form-item label="试验目的">
          <el-input
              v-model="currentPlan.purposeOfTheTrial"
              type="textarea"
              :rows="5"
              placeholder="请输入试验目的"
          />
        </el-form-item>

        <el-form-item label="靶标要求">
          <el-input
              v-model="currentPlan.bbRequirements"
              type="textarea"
              :rows="6"
              placeholder="请输入靶标要求"
          />
        </el-form-item>

        <el-form-item label="测量要求">
          <el-input
              v-model="currentPlan.measurementRequirements"
              type="textarea"
              :rows="6"
              placeholder="请输入测量要求"
          />
        </el-form-item>

        <el-form-item label="干扰要求">
          <el-input
              v-model="currentPlan.interferenceRequirements"
              type="textarea"
              :rows="6"
              placeholder="请输入干扰要求"
          />
        </el-form-item>
      </el-form>
      <div class="drawer-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-drawer>

    <!-- 解析方式选择弹窗 -->
    <DarkDialog
        title="选择解析方式"
        :visible.sync="parseMethodVisible"
        width="400px"
        :before-close="() => { parseMethodVisible = false; }"
    >
      <el-form :model="parseForm" label-width="100px" class="mt-4">
        <el-form-item label="任务来源" required>
          <el-select
              v-model="parseForm.method"
              placeholder="请选择任务来源方式"
              style="width: 100%"
          >
            <el-option label="任务录入" value="manual"></el-option>
            <el-option label="任务解析" value="upload"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="parseMethodVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmParseMethod">确定</el-button>
      </span>
    </DarkDialog>

  </div>
</template>

<script>
import DarkLayout from '@/components/GlobalComponents/DarkLayout.vue'
import TaskUserCard from '@/components/Components/TaskUserCard.vue'
import DarkDialog from "@/components/Components/DarkDialog.vue";
import VabDictSelect from "@/components/VabDictSelect/VabDictSelect.vue";
import {deleteTask, findPageTask, getTask} from "@/api/taskMage/taskMage";

export default {
  components: {
    VabDictSelect,
    DarkDialog,
    DarkLayout,
    TaskUserCard
  },
  data() {
    return {
      tableData: [
        {
          date: '2023-06-01',
          name: '张三',
          address: '北京市海淀区'
        },
        {
          date: '2023-06-02',
          name: '李四',
          address: '上海市浦东新区'
        }
      ],
      dialogVisible: false,
      parseMethodVisible: false, // 解析方式选择弹窗
      currentPlan: {}, // 当前选中的任务数据
      queryForm: {
        name: '',
        taskType: '',
        createTime: [],
      },
      parseForm: {
        method: 'upload' // 默认选中文件上传
      },
      planList: [
        {
          id: '1',
          status: '已确认',
          taskCode: 'plan-001',
          taskTime: "2022年4月至2022年12月",
          taskName: '新型导弹打击试验',
          taskType: '性能鉴定试验',
          taskStartTime: '2023-06-15',
          taskEndTime: '2023-06-20',
          taskStatus: '定稿',
          secretLevel: '秘密',
          confidentialLevelYears: '10年',
          username:"张三",
          createTime:"2023-01-01",
        },
        {
          id: '2',
          status: '已确认',
          taskTime: "2022年4月至2022年11月",
          taskCode: 'plan-002',
          taskName: '电子对抗演练',
          taskType: '性能鉴定试验',
          taskStartTime: '2023-07-10',
          taskEndTime: '2023-07-15',
          taskStatus: '暂存',
          secretLevel: '机密',
          confidentialLevelYears: '5年',
          username:"张三",
          createTime:"2023-01-01",
        },
        {
          id: '3',
          status: '已确认',
          taskCode: 'plan-003',
          taskTime: "2024年4月至2024年12月",
          taskName: '电子对抗演练',
          taskType: '性能鉴定试验',
          taskStartTime: '2023-07-10',
          taskEndTime: '2023-07-15',
          taskStatus: '暂存',
          secretLevel: '机密',
          confidentialLevelYears: '5年',
          username:"张三",
          createTime:"2023-01-01",
        },
        {
          id: '4',
          status: '未确认',
          taskCode: 'plan-004',
          taskType: '性能鉴定试验',
          taskTime: "2022年2月至2022年6月",
          taskName: '电子对抗演练',
          taskStartTime: '2023-07-10',
          taskEndTime: '2023-07-15',
          taskStatus: '暂存',
          secretLevel: '机密',
          confidentialLevelYears: '5年',
          username:"张三",
          createTime:"2023-01-01",
        },
        {
          id: '5',
          status: '未确认',
          taskCode: 'plan-005',
          taskType: '性能鉴定试验',
          taskName: '新型导弹打击试验',
          taskTime: "2023年4月至2023年12月",
          taskStartTime: '2023-06-15',
          taskEndTime: '2023-06-20',
          taskStatus: '定稿',
          secretLevel: '秘密',
          confidentialLevelYears: '10年',
          username:"张三",
          createTime:"2023-01-01",
        },
        {
          id: '6',
          status: '未确认',
          taskTime:"2025年4月至2023年8月",
          taskCode: 'plan-006',
          taskType: '性能鉴定试验',
          taskName: '电子对抗演练',
          taskStartTime: '2023-07-10',
          taskEndTime: '2023-07-15',
          taskStatus: '暂存',
          secretLevel: '机密',
          confidentialLevelYears: '5年',
          username:"张三",
          createTime:"2023-01-01",
        },

      ],
      dict:{

      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      showAdvancedSearch: false
    }
  },
  created() {
    this.dict.task_type= this.$getDictList('task_type')
    this.handleQuery();
  },
  methods: {
    handleClose(done) {
      done()
    },
    handleSelect(plan) {
    },
    handleEdit(plan) {
      //跳转页面
      this.$router.push({ path: '/home/taskMage',query:{
          id:plan.id
          } })
      // this.$router.push({ path: '/home/taskCreate' })
    },

      async handleDelete(plan){
        await deleteTask({id:plan.id});
        this.$message.success("删除成功");
        await this.handleQuery();
      },

    // 显示解析方式选择弹窗
    showParseMethodModal() {
      this.parseMethodVisible = true;
    },
    // 确认解析方式并跳转
    confirmParseMethod() {
      this.parseMethodVisible = false;
      // 根据选择的解析方式跳转到不同路由
      if (this.parseForm.method == 'manual'){
        this.$router.push({ path: '/home/taskMage' })
      } else if (this.parseForm.method == 'upload'){
        // 如果需要区分不同方式，可以在这里添加判断
        this.$router.push({ path: '/home/taskCreate' });
      }

    },
    async viewDetails(plan) {
      await this.getCurrentPlan(plan.id)
      this.dialogVisible = true;
    },

    async getCurrentPlan(id){
      const res = await getTask({id:id})
      this.currentPlan = res.data;
      if (this.currentPlan.missileDataJson){
        const list = JSON.parse(this.currentPlan.missileDataJson);
        this.currentPlan.missileDataJson = []
        for (const item of list){
          this.currentPlan.missileDataJson.push({
            ...item
          })
        }
      }
    },
    //查看子任务
    viewChildsDetails(plan){
      this.$router.push({name: 'childsTask',query:{
        id:plan.id
        }})
    },
    async handleQuery() {
      const params = {
        taskName_LIKE:this.queryForm.name,
            taskType_EQ:this.queryForm.taskType,
          pageNo:this.pagination.currentPage,
          pageSize:this.pagination.pageSize
      }
      if (this.queryForm.createTime?.length == 2){
        params.createTime_BEGIN= this.queryForm.createTime[0];
        params.createTime_END =this.queryForm.createTime[1];
      }
      // 查询逻辑
     const res = await findPageTask(params)
        this.planList = res.data.rows
        this.pagination.total = res.data.total
    },
    resetQuery() {
      this.queryForm = {
        name: '',
        taskCode: ''
      }
      this.handleQuery()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.handleQuery()
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.handleQuery()
    },
  }
}
</script>

<style scoped>

</style>