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

<template>
  <page-header-wrapper>
    <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="paginationProps"
        :loading="loadingTable"
        @change="handleTableChange"
      >
        <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>

    <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: 'Xdsjk',
  data() {
    return {
      queryParam: {}, // 查询参数
      columns: [
        {
          title: '#',
          dataIndex: 'id',
          align: 'center',
          width: 80,
        },
        {
          title: '想定名称',
          align: 'left',
          dataIndex: 'name',
          ellipsis: true,
        },
        {
          title: '作者',
          dataIndex: 'author',
          align: 'left',
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          customRender: (t) => t?.replace('T', ' '),
          align: 'left',
        },
        {
          title: '操作',
          width: 140,
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      loadData: [], // 加载数据方法 必须为 Promise 对象
      loadingTable: false,

      selectedRowKeys: [],
      selectedRows: [],

      paginationProps: {
        defaultPageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: (total) => {
          return `共 ${total} 条`
        },
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize),
      },

      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 } },
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    resetList() {
      this.queryParam = {}
      this.getList()
    },
    async getList(parameter = {}) {
      try {
        this.loadingTable = true
        const res = await this.$http({
          url: '/baseData/scenario/list',
          method: 'get',
          params: { ...parameter, ...this.queryParam },
        })
        this.loadData = res.data.data
      } catch (error) {
        console.log(error)
      } finally {
        this.loadingTable = false
      }
    },
    handleTableChange(pagination) {
      const parameter = {}
      parameter.pageSize = pagination.pageSize
      parameter.pageNum = pagination.current
      this.getList(parameter)
    },
    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.title}成功`)
        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>