simulation-front/src/views/multimodeSimulation/simulationEdit.vue

<template>
  <div
    style="
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 20px 50px;
    "
  >
    <p
      style="
        font-size: 18px;
        font-weight: bold;
        border-bottom: 1px solid #ccc;
        padding-bottom: 15px;
      "
    >
      基础信息
    </p>
    <search-layout :needBox="true">
      <template slot="searchItem1">
        <span class="label">项目名称</span>
        <el-input
          v-model="baseInfo.projectName"
          size="small"
          clearable
          placeholder="请输入"
          maxlength="60"
          :disabled="!isEdit"
        >
        </el-input>
      </template>
      <template slot="searchItem3">
        <span class="label">最大仿真时间(s)</span>
        <el-input
          v-model="baseInfo.projectMaxSeconds"
          size="small"
          clearable
          placeholder="请输入"
          maxlength="60"
          :disabled="!isEdit"
        >
        </el-input>
        <span style="color: red" class="label">（最小是5,最大4500）</span>
      </template>
      <template slot="searchItem8">
        <span class="label">项目描述</span>
        <el-input
          v-model="baseInfo.projectDescription"
          size="small"
          clearable
          placeholder="请输入"
          maxlength="60"
          :disabled="!isEdit"
        >
        </el-input>
      </template>
    </search-layout>
    <p
      style="
        font-size: 18px;
        font-weight: bold;
        border-bottom: 1px solid #ccc;
        padding-bottom: 15px;
        margin-top: 30px;
      "
    >
      场景详情
    </p>
    <div style="display: flex; justify-content: end; margin: 20px 50px">
      <el-button
        v-if="configBtnShow"
        class="addBtn"
        icon="el-icon-circle-plus-outline"
        @click="addConfig"
        type="primary"
        >添加</el-button
      >
      <el-button
        v-if="configBtnShow"
        class="addBtn"
        icon="el-icon-circle-plus-outline"
        @click="copyConfig"
        type="primary"
        >复制配置</el-button
      >
    </div>
    <tableList
      v-if="tableShow"
      ref="table"
      style="margin: 0 30px 30px"
      :columns="columns"
      :getDataWay="getDataWay"
      :pagination="pagination"
      selection
      index
      :needSelectedCallBack="true"
      :selectedCallBack="selectedCallBackB"
      :selectedAllCallBack="selectedAllCallBackB"
    >
      <el-table-column label="操作" slot="cgInfos" align="center" width="180">
        <template v-slot="scope">
          <span v-if="!isEdit && ![2,4,6,null].includes(scope.row.taskStatus)" @click="toEvaluate(scope.row)" class="elIcon">
            评价结果
          </span>
          <span v-else>-</span>
          <span
            v-if="isEdit"
            @click="navigatorEdit(scope.row.id)"
            class="elIcon"
          >
            编辑
          </span>
          <span v-if="isEdit" @click="deleteScene(scope.row.id)" class="elIcon">
            删除
          </span>
        </template>
      </el-table-column>
    </tableList>
    <div style="display: flex; justify-content: center; margin-top: 30px">
      <el-button type="primary" @click="createTask">保存</el-button>
      <el-button type="primary" @click="saveTask">提交</el-button>
      <el-button @click="cancelHandle">取消</el-button>
    </div>
  </div>
</template>

<script>
import searchLayout from '@/components/grid/searchLayout'
import tableList from '@/components/grid/TableList'
export default {
  name: 'simulationEdit',
  components: { searchLayout, tableList },

  data() {
    return {
      isEdit: true, // 模式， 默认编辑模式 false 预览
      tableShow: false, // 是否显示表格，新增默认不显示
      configBtnShow: false,
      projectId: '', // 仿真任务id
      baseInfo: {
        projectName: '', // 项目名称
        projectMaxSeconds: '', // 最大仿真时间
        projectDescription: '', // 项目描述
      },
      selectSceneIds: [], // 选中ids
      columns: [
        {
          label: '地图文件',
          prop: 'mapName',
        },
        {
          label: '车辆数量',
          prop: 'carNums',
        },
        {
          label: '创建时间',
          prop: 'createTime',
        },
        {
          label: '操作',
          prop: 'cgInfos',
          template: true,
        },
      ],
      pagination: {
        //分页使用
        currentPage: 1,
        pageSize: 10,
        position: 'right',
        pageSizes: [10, 30, 50, 100, 200],
        layout: 'sizes, total, prev, pager, next, jumper',
      },
      getDataWay: {
        //加载表格数据
        dataType: 'url',
        type: 'post',
        data: this.$api.multimode.queryMulationSceneList,
        param: {
          projectId: this.$route.query.id || '',
        },
      },
    }
  },
  mounted() {
    this.isEdit = ['edit', 'add'].includes(this.$route.query.mode)
      ? true
      : false
    this.configBtnShow = this.$route.query.mode == 'edit' ? true : false
    if (['edit', 'preview'].includes(this.$route.query.mode)) {
      this.tableShow = true
    }
    if (this.$route.query.id) {
      this.projectId = this.$route.query.id
      this.getTaskDetailById(this.$route.query.id)
    }
  },
  methods: {
    // 获取任务详情信息
    getTaskDetailById(id) {
      this.$axios({
        method: 'post',
        url: this.$api.multimode.queryMulationDetailById,
        data: {
          projectId: id,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.baseInfo = {
            projectName: res.info.projectName, // 项目名称
            projectMaxSeconds: res.info.projectMaxSeconds, // 最大仿真时间
            projectDescription: res.info.projectDescription, // 项目描述
          }
        } else {
          this.$message.error(res.message || '查询信息失败')
        }
      })
    },
    deleteScene(id) {
      this.$axios({
        method: 'post',
        url: this.$api.multimode.deleteMulationScene,
        data: {
          sceneId: id,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.refreshList({ projectId: this.projectId })
          this.$message.success('删除成功')
        } else {
          this.$message.error(res.message || '删除失败')
        }
      })
    },
    // 提交
    saveTask() {
      this.$axios({
        method: 'post',
        url: this.$api.multimode.saveMulationTask,
        data: {
          projectId: this.projectId,
          projectName: this.baseInfo.projectName,
          projectMaxSeconds: this.baseInfo.projectMaxSeconds,
          projectDescription: this.baseInfo.projectDescription,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success('提交成功')
          this.$router.push({
            path: '/multimodeSimulation',
          })
        } else {
          this.$message.error(res.message || '提交失败')
        }
      })
    },
    // 刷新场景列表
    refreshList(param) {
      param
        ? this.$refs['table'].loadData(param)
        : this.$refs['table'].loadData()
    },
    // 复制场景列表
    copyConfig() {
      if (this.selectSceneIds.length <= 0) {
        this.$message.warning('请选择要复制的列表')
        return
      } else {
        this.$axios({
          method: 'post',
          url: this.$api.multimode.copyMulationScene,
          data: {
            sceneIdList: this.selectSceneIds,
          },
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success('复制成功')
            this.refreshList({ projectId: this.projectId })
          } else {
            this.$message.error(res.message || '复制失败')
          }
        })
      }
    },
    // 新增场景列表
    addConfig() {
      this.$axios({
        method: 'post',
        url: this.$api.multimode.addMulationSceneList,
        data: {
          projectId: this.projectId,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.isEdit = true
          this.$message.success('添加成功')
          this.selectSceneIds = []
          this.refreshList({ projectId: this.projectId })
        } else {
          this.$message.error(res.message || '添加失败')
        }
      })
    },
    // 单列表选中
    selectedCallBackB(row, type) {
      // 选中
      if (type == 1) {
        const arr = this.selectSceneIds
        arr.push(row.id)
        this.selectSceneIds = arr
      } else {
        // 取消选中
        this.selectSceneIds = this.selectSceneIds.filter(
          (item) => item !== row.id
        )
      }
    },
    // 全选
    selectedAllCallBackB(row) {
      const arr = []
      row.forEach((item) => {
        arr.push(item.id)
      })
      this.selectSceneIds = arr
    },
    // 创建仿真任务
    createTask() {
      if (
        this.baseInfo.projectName &&
        this.baseInfo.projectMaxSeconds &&
        this.baseInfo.projectDescription
      ) {
        this.$axios({
          method: 'post',
          url: this.$api.multimode.createMulationTask,
          data: {
            projectName: this.baseInfo.projectName,
            projectMaxSeconds: this.baseInfo.projectMaxSeconds,
            projectDescription: this.baseInfo.projectDescription,
          },
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success('仿真任务创建成功')
            this.getDataWay.param.projectId = res.info.projectId
            this.projectId = res.info.projectId
            this.isEdit = false
            this.configBtnShow = true
            this.tableShow = true
          } else {
            this.$message.error(res.message || '查询信息失败')
          }
        })
      } else {
        this.$message.warning('请填写完整信息后再保存')
      }
    },
    cancelHandle() {
      this.$router.back()
    },
    // 跳转场景评价
    toEvaluate(row) {
      this.$router.push({
        path: '/evaluationResults',
        query: { id: row.id },
      })
    },
    navigatorEdit(id) {
      this.$router.push({
        name: 'multimodeSimulationEdit',
        query: {
          sceneId: id,
        },
      })
    },
  },
}
</script>