LSSE-front/src/views/subsystem/scene/components/Zzxd.vue

<template>
  <Flex v-loading.dark="loading" fd="co" class="zzxd-wrapper">
    <Flex class="zzxd-header" ai="c" jc="sb">
      <div class="zzxd-title"></div>
      <div>
        <a-button type="text-primary" icon="edit" v-if="checkedAction" @click="handleOpenEditModal"></a-button>
        <a-button type="text-danger" icon="delete" v-if="checkedAction" @click="handleDelete"></a-button>
        <a-dropdown :trigger="['click']">
          <a-button type="text-primary" icon="plus"></a-button>
          <a-menu slot="overlay" @click="handleOpenAddModal">
            <a-menu-item v-for="(text, key) in actionTypeMapText" :key="key">
              <a-button type="text-primary">{{ text }}</a-button>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
        <AntFormModal
          :visible.sync="AEModal.visible"
          :title="AEModal.title"
          width="900px"
          :formItems="AEModal.formItems"
          :formRules="AEModal.formRules"
          :formData="AEModal.formData"
          :onSubmit="submitAE"
          @success="submitAESuccess"
        ></AntFormModal>
      </div>
    </Flex>
    <div class="flex-1 scroller-y">
      <Flex
        v-for="item in actionList"
        :key="item.id"
        :class="{
          'action-item': true,
          checked: checkedAction && checkedAction.id === item.id,
        }"
        @click="checkedAction = item"
      >
        <div class="action-icon">
          <div class="action-line"></div>
          <a-radio :checked="checkedAction && checkedAction.id === item.id" style="margin-right: 0"></a-radio>
        </div>
        <div class="flex-1">
          <div class="action-title">【{{ actionTypeMapText[item.type] }}】{{ item.name || '- -' }}</div>
          <div class="action-destination">目的地：{{ item.toLng }}, {{ item.toLat }}</div>
          <div class="action-time">{{ item.startTime }} ~ {{ item.endTime }}</div>
        </div>
      </Flex>
    </div>
  </Flex>
</template>

<script>
import { getAction, postAction } from '@/api/manage'

export default {
  props: {
    scenarioId: { type: [Number, String], required: true },
    resourceId: { type: [Number, String], required: true },
    resourceType: { type: [Number, String], required: true },
  },
  data() {
    return {
      loading: false,
      actionList: [],
      checkedAction: null,
      actionTypeMapText: {
        1: '移动任务',
        2: '作战任务',
        // 3: '整备任务',
      },
      allFormItems: [
        { label: '分队id', prop: 'resourceId' },
        { label: '任务类型', prop: 'type' },
        { label: '任务内容', prop: 'name' },
        {
          label: '开始时间',
          prop: 'startTime',
          component: 'a-date-picker',
          options: {
            showTime: true,
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
          },
        },
        {
          label: '结束时间',
          prop: 'endTime',
          component: 'a-date-picker',
          options: {
            showTime: true,
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
          },
        },
        { label: '持续时间', prop: 'duringTime', component: 'DurationInput' },
        { label: '目的地经度', prop: 'toLng', component: 'LongitudeInput' },
        { label: '目的地纬度', prop: 'toLat', component: 'LatitudeInput' },
      ],
      actionTypeMapFormItemProps: {
        1: ['resourceId', 'type', 'name', 'startTime', 'endTime', 'toLng', 'toLat'],
        2: ['resourceId', 'type', 'name', 'startTime', 'duringTime', 'toLng', 'toLat'],
        3: ['resourceId', 'type', 'name', 'startTime', 'duringTime', 'toLng', 'toLat'],
      },
      AEModal: {
        title: '',
        visible: false,
        formItems: [],
        formRules: {},
        formData: {},
      },
    }
  },
  watch: {
    resourceId: {
      handler() {
        this.getActionList()
      },
      immediate: true,
    },
  },
  methods: {
    async getActionList() {
      try {
        this.loading = true
        const res = await postAction('/scenarioTask/taskList', {
          scenarioId: this.scenarioId,
          resourceId: this.resourceId,
        })
        this.actionList = res.data
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    handleOpenAddModal({ key: taskType }) {
      this.AEModal.formItems = this.actionTypeMapFormItemProps[taskType].map((p) =>
        this.allFormItems.find((i) => i.prop === p)
      )
      this.AEModal.formData = { taskType, resourceId: this.resourceId, scenarioId: this.scenarioId }
      this.AEModal.title = `新增${this.actionTypeMapText[taskType]}`
      this.AEModal.visible = true
    },
    async handleOpenEditModal() {
      try {
        const taskType = this.checkedAction.taskType
        const id = this.checkedAction.id
        const res = await getAction(`/scenarioTask/${id}`)
        this.AEModal.formItems = this.actionTypeMapFormItemProps[taskType].map((p) =>
          this.allFormItems.find((i) => i.prop === p)
        )
        this.AEModal.formData = res.data
        this.AEModal.title = `修改${this.actionTypeMapText[taskType]}`
        this.AEModal.visible = true
      } catch (error) {
        console.log(error)
      }
    },
    submitAE(formData) {
      return postAction('/scenarioTask/save', formData)
    },
    submitAESuccess() {
      this.getActionList()
    },
    async handleDelete() {
      try {
        await this.$confirm('确认删除所选任务吗？')
        const id = this.checkedAction.id
        await getAction(`/scenarioTask/remove/${id}`)
        this.$message.success(`删除任务成功`)
        this.getActionList()
      } catch (error) {
        this.$message.success(`删除任务失败`)
        console.log(error)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.zzxd-wrapper {
  height: 100%;
  padding: 0 0 15px;
  .zzxd-header {
    padding: 5px 0;
    margin: 0 15px;
    border-bottom: 1px solid #00baff22;
    .zzxd-title {
      color: #00baff;
    }
  }
}
.action-item {
  cursor: pointer;
  padding: 5px 0;
  .action-icon {
    padding: 5px 16px;
    position: relative;
    flex-shrink: 0;
    .action-line {
      position: absolute;
      right: 50%;
      top: 21px;
      width: 1px;
      height: 100%;
      background-color: #00baff;
    }
  }
}
.action-item:last-of-type {
  .action-line {
    display: none;
  }
}
.action-item.checked {
  background-color: #bae7ff22;
}
.action-item.checked:hover,
.action-item:hover {
  background-color: #bae7ff44;
}
.action-title {
  font-size: 18px;
  color: #00baff;
}
.action-destination {
  font-size: 14px;
}
.action-time {
  font-size: 12px;
  color: #cccccc;
}
</style>