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

<template>
  <router-view v-if="$route.path.includes('multimodeSimulationEdit')"></router-view>
  <div
      v-else 
      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>
	  
	  <template slot="searchItem10">
	    <span class="label">仿真镜像组</span>
		
		<el-select v-model="baseInfo.simulationMageGroupId">
			<el-option v-for="item in simulationMageGroup" :label="item.groupName" :value="item.id"
				:key="item.id"></el-option>
		</el-select>
	  </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">
          <i v-if="isEdit" @click="navigatorEdit(scope.row.id)" class="elIcon el-icon-edit-outline" title="编辑">
          </i>
          <i v-if="isEdit" @click="deleteScene(scope.row.id)" class="elIcon el-icon-delete" title="删除">
          </i>
        </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 {
	  simulationMageGroup: [],
      isEdit: true, // 模式， 默认编辑模式 false 预览
      isUpdate: false, //  更新模式
      tableShow: false, // 是否显示表格，新增默认不显示
      configBtnShow: false,
      projectId: '', // 仿真任务id
      baseInfo: {
        projectName: '', // 项目名称
        projectMaxSeconds: '', // 最大仿真时间
        projectDescription: '', // 项目描述
		simulationMageGroupId: '',//仿真镜像组id
      },
      selectSceneIds: [], // 选中ids
      columns: [
        {
          label: '地图文件',
          prop: 'mapName',
        },
        {
          label: '车辆数量',
          prop: 'carNums',
        },
        {
          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.isUpdate = ['edit', 'preview'].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)
    }else{
      this.$store.commit("getEvaluateTabname", '多仿真任务详情');
      localStorage.setItem("evaluateTabname", '多仿真任务详情');
    }
	this.getSimulationMageGroup();
  },
  methods: {
	  getSimulationMageGroup() {
	  	this.$axios({
	  		method: 'post',
	  		url: this.$api.workManagement.selectAllSimulationMageGroupList,
	  		data: {},
	  	}).then((res) => {
	  		if (res.code == 200) {
	  			this.simulationMageGroup = res.info
	  		} else {
	  			this.$message.error(res.message || '获取信息失败')
	  		}
	  	})
	  },
    // 获取任务详情信息
    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, // 项目描述
			simulationMageGroupId: res.info.simulationMageGroupId,//仿真镜像组id
          }
          this.$store.commit("getEvaluateTabname", res.info.projectName);
          localStorage.setItem("evaluateTabname", res.info.projectName);
        } 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,
		  simulationMageGroupId: this.baseInfo.simulationMageGroupId
        },
      }).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.isUpdate) {
        this.$axios({
          method: 'post',
          url: this.$api.multimode.updateMulationSceneList,
          data: {
            projectId: this.projectId,
            projectName: this.baseInfo.projectName,
            projectMaxSeconds: this.baseInfo.projectMaxSeconds,
            projectDescription: this.baseInfo.projectDescription,
			simulationMageGroupId: this.baseInfo.simulationMageGroupId
          },
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success('仿真任务更新成功')
          } else {
            this.$message.error(res.message || '任务更新失败')
          }
        })
      } else {
        // 创建
        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,
			  simulationMageGroupId: this.baseInfo.simulationMageGroupId
            },
          }).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
              this.isUpdate = true
            } else {
              this.$message.error(res.message || '查询信息失败')
            }
          })
        } else {
          this.$message.warning('请填写完整信息后再保存')
        }
      }
    },
    cancelHandle () {
      this.$router.back()
    },
    // 跳转场景评价
    toEvaluate (row) {
      this.$router.push({
        path: '/multimodeSimulation/simulationEvaluate/evaluationResults',
        query: { id: row.id },
      })
    },
    navigatorEdit (id) {
      this.$store.commit("getEvaluateTabname", this.baseInfo.projectName);
      localStorage.setItem("evaluateTabname", this.baseInfo.projectName);
      this.$router.push({
        name: 'multimodeSimulationEdit',
        query: {
          sceneId: id,
          projectId: this.projectId
        },
      })
    },
  },
}
</script>