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

<template>
  <Flex 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="menu"></a-button>
        <a-button type="text-primary" icon="plus" @click="handleOpenAddActionModal"></a-button>
        <a-button type="text-primary" icon="edit" @click="handleOpenEditActionModal"></a-button>
        <a-button type="text-primary" icon="delete" @click="handleDeleteAction"></a-button>
      </div>
      <a-modal
        v-model="actionModal.visible"
        :title="actionModal.title"
        :maskClosable="false"
        :destroyOnClose="true"
        @ok="handleSubmilAction"
      >
        <a-form-model
          :model="actionModal.formData"
          layout="horizontal"
          :labelCol="{ span: 6 }"
          :wrapperCol="{ span: 15 }"
        >
          <a-form-model-item v-for="item in actionModal.formItems" :key="item.prop" v-bind="item">
            <component
              :is="item.component || 'a-input'"
              v-model="actionModal.formData[item.prop]"
              v-bind="item.options"
            />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </Flex>
    <div class="flex-1 scroller-y">
      <div v-for="item in actionList" :key="item.id" class="action-item flex" @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">{{ item.typeName || '- -' }}</div>
          <div class="action-time">开始时间：{{ item.beginDateTime }}</div>
          <div class="action-time">结束时间：{{ item.endDateTime }}</div>
        </div>
      </div>
    </div>
  </Flex>
</template>

<script>
export default {
  props: {
    actionList: { type: Array, default: () => [] },
  },
  data() {
    return {
      checkedAction: null,
      actionModal: {
        visible: false,
        formItems: [
          { label: '事件名称', prop: 'typeName' },
          {
            label: '事件类型',
            prop: 'typeType',
            component: 'AntOriginSelect',
            options: {
              dataSource: () => ({
                data: [
                  { id: '1', title: '机动任务' },
                  { id: '2', title: '战斗任务' },
                  { id: '3', title: '整备任务' },
                  { id: '4', title: '弹药保障' },
                  { id: '5', title: '水保障' },
                  { id: '6', title: '油保障' },
                  { id: '7', title: '食品保障' }
                ],
              }),
            },
          },
          { label: '开始时间', prop: 'beginDateTime', component: 'a-date-picker', options: { showTime: true } },
          { label: '结束时间', prop: 'endDateTime', component: 'a-date-picker', options: { showTime: true } },
          { label: '目标经度', prop: 'lon', component: 'a-input-number' },
          { label: '目标纬度', prop: 'lat', component: 'a-input-number' },
        ],
        formData: {},
      },
    }
  },
  methods: {
    handleOpenAddActionModal() {
      this.actionModal.title = '添加事件信息'
      this.actionModal.formData = {}
      this.actionModal.visible = true
    },
    handleOpenEditActionModal() {
      this.actionModal.title = '修改事件信息'
      this.actionModal.formData = { ...this.checkedAction }
      this.actionModal.visible = true
    },
    async handleSubmilAction() {
      try {
        await this.$http({
          url: '/save',
          method: 'post',
          data: this.actionModal.formData,
        })
        this.$message.success(`${this.actionModal.title}成功`)
      } catch (error) {
        console.log(error)
      }
    },
    async handleDeleteAction() {
      try {
        await this.$confirm('确认删除所选事件吗？')
        await this.$http({
          url: '/delete',
          method: 'delete',
          params: { id: this.checkedAction.id },
        })
        this.$message.success(`删除事件成功`)
      } catch (error) {
        this.$message.success(`删除事件失败`)
        console.log(error)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.zzxd-wrapper {
  height: 100%;
  .zzxd-header {
    padding: 5px 0;
    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:hover {
  background-color: #bae7ff44;
}
</style>