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

<template>
  <page-header-wrapper>
    <Grid>
      <a-card class="my-card">
        <AntQueryTable
          height="100%"
          ref="xd-table"
          :queryConfig="xdTable.queryConfig"
          :tableConfig="xdTable.tableConfig"
          :pageConfig="xdTable.pageConfig"
          :showTool="xdTable.showTool"
        >
          <template #toolbar-left>
            <a-button type="primary" icon="plus" @click="handleOpenAddModal">新增</a-button>
          </template>
          <template #tablecell-action="{ record }">
            <a-button type="text-primary" icon="form" @click="handleOpenEditModal(record)"></a-button>
            <a-divider type="vertical" />
            <a-popconfirm
              title="确定要删除该想定吗？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="handleDelete(record)"
            >
              <a-button type="text-primary" icon="delete"></a-button>
            </a-popconfirm>
          </template>
        </AntQueryTable>
      </a-card>
    </Grid>
    <AntFormModal
      :visible.sync="AEModal.visible"
      :title="AEModal.title"
      :formItems="AEModal.formItems"
      :formRules="AEModal.formRules"
      :formData="AEModal.formData"
      :onSubmit="handleSubmitAE"
      @success="handleSubmitAESuccess"
    ></AntFormModal>
  </page-header-wrapper>
</template>

<script>
export default {
  name: 'Xdsjk',
  data() {
    return {
      xdTable: {
        queryConfig: {
          items: [{ label: '想定名称', prop: 'name' }],
        },
        tableConfig: {
          query: (params) =>
            this.$http({
              url: '/baseData/scenario/list',
              method: 'get',
              params: params,
            }),
          columns: [
            { dataIndex: 'serial' },
            { title: '想定名称', align: 'left', dataIndex: 'name', ellipsis: true, width: 'auto' },
            { title: '作者', dataIndex: 'author', align: 'left', width: 'auto' },
            {
              title: '创建时间',
              dataIndex: 'createTime',
              customRender: (t) => t?.replace('T', ' '),
              align: 'left',
              width: 'auto',
            },
            { dataIndex: 'action' },
          ],
        },
        pageConfig: true,
        showTool: true,
      },
      AEModal: {
        visible: false,
        title: '新增想定',
        formItems: [{ label: '想定名称', prop: 'name' }],
        formRules: {
          name: [{ required: true, message: '请输入想定名称！', trigger: 'blur' }],
        },
        formData: {},
      },
    }
  },
  methods: {
    handleOpenAddModal() {
      this.AEModal.formData = {}
      this.AEModal.title = '新增想定'
      this.AEModal.visible = true
    },
    async handleOpenEditModal(record) {
      try {
        const res = await this.$http({
          url: `/baseData/scenario/${record.id}`,
          method: 'get',
        })
        this.AEModal.formData = res.data
        this.AEModal.title = '编辑想定'
        this.AEModal.visible = true
      } catch (error) {
        console.log(error)
      }
    },
    handleSubmitAE(formData) {
      return this.$http({
        url: `/baseData/scenario/save`,
        method: 'post',
        data: formData,
      })
    },
    handleSubmitAESuccess() {
      this.$refs['xd-table'].commitAction('query')
    },
    async handleDelete(record) {
      try {
        await this.$http({
          url: `/baseData/scenario/remove/${record.id}`,
          method: 'get',
        })
        this.$message.success('删除想定成功')
        this.$refs['xd-table'].commitAction('query')
      } catch (error) {
        console.log(error)
        this.$message.error('删除想定失败')
      }
    },
  },
}
</script>

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