LSSE-front/src/views/simulationScene/database/txsjk.vue

<template>
  <page-header-wrapper>
    <div v-grid-box="{ columns: ['400px', 1] }">
      <a-card :bordered="false">
        <a-list :loading="listLoading" item-layout="horizontal" :data-source="scenarioList">
          <a-list-item slot="renderItem" slot-scope="item" @click="handleClickScenario(item)">
            <a-list-item-meta :description="item.author">
              <span slot="title">{{ item.name }}</span>
              <a-checkbox slot="avatar" :checked="item.id === queryParam.id"></a-checkbox>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </a-card>
      <a-card :bordered="false">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <!-- <a-col :xl="8" :lg="8">
                <a-form-item label="想定名称">
                  <a-input placeholder="请输入" v-model="queryParam.name" />
                </a-form-item>
              </a-col> -->
              <a-col :xl="8" :lg="8">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" @click="getList">查询</a-button>
                  <a-button style="margin-left: 8px" @click="resetList">重置</a-button>
                </span>
              </a-col>
              <a-col :xl="8" :lg="8">
                <!-- <a-button type="primary" icon="plus" style="float: right" @click="handleAdd">新建</a-button> -->
              </a-col>
            </a-row>
          </a-form>
        </div>
        <a-table
          bordered
          rowKey="id"
          size="small"
          :columns="columns"
          :dataSource="loadData"
          :pagination="false"
          :loading="loadingTable"
        >
          <!-- <span slot="action" slot-scope="text, record">
            <a @click="handleEdit(record)"> <a-icon type="form" /></a>
            <a-divider type="vertical" />

            <a-popconfirm
              title="确定要删除该想定吗？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="handleDelete(record)"
            >
              <a href="javascript:;"><a-icon type="delete" /></a>
            </a-popconfirm>
          </span> -->
        </a-table>
      </a-card>
    </div>
    <h-modal
      :title="AEModal.title"
      :width="640"
      :visible="AEModal.visible"
      :destroyOnClose="true"
      @cancel="() => this.handleClose()"
      @ok="() => this.handleOk()"
      switch-fullscreen
      :fullscreen.sync="AEModal.fullscreen"
    >
      <a-spin :spinning="AEModal.spinning">
        <a-form-model
          ref="form"
          :model="AEModal.form"
          :rules="AEModal.rules"
          :label-col="AEModal.labelCol"
          :wrapper-col="AEModal.wrapperCol"
        >
          <a-form-model-item label="想定名称" prop="name">
            <a-input v-model="AEModal.form.name" />
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </h-modal>
  </page-header-wrapper>
</template>

<script>
export default {
  name: 'Txsjk',
  data() {
    return {
      listLoading: false,
      scenarioList: [],

      queryParam: { id: '' },
      columns: [
        {
          title: '#',
          dataIndex: 'index',
          customRender: (_, record, $index) => $index + 1,
          align: 'center',
          width: 80,
        },
        {
          title: '分队',
          dataIndex: '0',
          align: 'left',
        },
        {
          title: '方案类型',
          dataIndex: '1',
          align: 'left',
        },
        {
          title: '方案目标',
          dataIndex: '2',
          align: 'left',
          ellipsis: true,
        },
        {
          title: '开始时间',
          width: 160,
          dataIndex: '3',
          align: 'center',
        },
        {
          title: '结束时间',
          width: 160,
          dataIndex: '4',
          align: 'center',
        },
        {
          title: '经度',
          width: 120,
          dataIndex: 'lat',
          customRender: (_, record, $index) => record[5].split(',')[0],
          align: 'center',
        },
        {
          title: '纬度',
          width: 120,
          dataIndex: 'lon',
          customRender: (_, record, $index) => record[5].split(',')[0],
          align: 'center',
        },
      ],
      loadData: [], // 加载数据方法 必须为 Promise 对象
      loadingTable: false,

      AEModal: {
        title: '',
        visible: false,
        editStatus: false,
        fullscreen: false,
        spinning: false,
        form: {},
        rules: {
          name: [{ required: true, message: '请输入想定名称！', trigger: 'blur' }],
        },
        labelCol: { xs: { span: 24 }, sm: { span: 7 } },
        wrapperCol: { xs: { span: 24 }, sm: { span: 13 } },
      },
    }
  },
  mounted() {
    this.getScenarioList()
  },
  methods: {
    async getScenarioList() {
      try {
        this.listLoading = true
        const res = await this.$http({
          url: `/baseData/scenario/all`,
          method: 'get',
        })
        this.scenarioList = res.data
        this.queryParam.id = this.scenarioList[0].id
        this.getList()
      } catch (error) {
        console.log(error)
      } finally {
        this.listLoading = false
      }
    },
    handleClickScenario(item) {
      this.queryParam.id = item.id
      this.getList()
    },
    resetList() {
      this.queryParam = {}
      this.getList()
    },
    async getList(parameter = {}) {
      try {
        this.loadingTable = true
        const res = await this.$http({
          url: '/baseData/scenario/schemeList',
          method: 'get',
          params: { ...parameter, ...this.queryParam },
        })
        this.loadData = res.data
      } catch (error) {
        console.log(error)
      } finally {
        this.loadingTable = false
      }
    },
    handleAdd() {
      this.AEModal.title = '添加想定'
      this.AEModal.editStatus = false
      this.AEModal.visible = true
    },
    async handleEdit(record) {
      try {
        const res = await this.$http({
          url: `/baseData/scenario/${record.id}`,
          method: 'get',
        })
        this.AEModal.form = res.data.data
        this.AEModal.title = '编辑想定'
        this.AEModal.editStatus = true
        this.AEModal.visible = true
      } catch (error) {
        console.log(error)
        this.$message.error('未知错误，请重试')
      }
    },
    handleClose() {
      this.AEModal.visible = false
      this.AEModal.form = {}
    },
    async handleOk() {
      try {
        await this.$refs.form.validate()
        const params = { ...this.AEModal.form }
        await this.$http({
          url: `/baseData/scenario/save`,
          method: 'post',
          data: params,
        })
        this.$message.success(this.AEModal.editStatus ? '编辑想定成功!' : '添加想定成功!')
        this.getList()
        this.handleClose()
      } catch (error) {
        console.log(error)
      }
    },
    async handleDelete(record) {
      try {
        await this.$http({
          url: `/baseData/scenario/remove/${record.id}`,
          method: 'get',
        })
        this.$message.success('删除角色成功')
        this.getList()
      } catch (error) {
        console.log(error)
        this.$message.error('删除角色失败')
      }
    },
  },
}
</script>

<style lang="less" scoped></style>