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

<template>
  <page-header-wrapper>
    <Grid>
      <a-card class="my-card">
        <AntQueryTable
          height="100%"
          ref="tx-table"
          :queryConfig="txTable.queryConfig"
          :tableConfig="txTable.tableConfig"
          :pageConfig="txTable.pageConfig"
          :showTool="txTable.showTool"
        >
          <template #toolbar-left>
            <a-button type="primary" icon="plus" @click="handleOpenAddModal">新增</a-button>
          </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: 'Txsjk',
  data() {
    return {
      txTable: {
        queryConfig: false,
        tableConfig: {
          query: () => ({ data: [] }),
          columns: [
            { dataIndex: 'serial' },
            { dataIndex: 'jbmc', title: '军标名称', width: 'auto' },
            { dataIndex: 'jblj', title: '军标路径', width: 'auto' },
            { dataIndex: 'tyf', title: '推演方', width: 'auto' },
          ],
        },
        pageConfig: false,
        showTool: true,
      },
      AEModal: {
        visible: false,
        title: '新增图形',
        formItems: [
          { label: '军标名称', prop: 'jbmc' },
          { label: '军标路径', prop: 'jblj' },
          {
            label: '推演方',
            prop: 'tyf',
            component: 'AntOriginSelect',
            options: {
              dataSource: () => ({
                data: [
                  { title: '红方', id: '1' },
                  { title: '蓝方', id: '2' },
                ],
              }),
            },
          },
        ],
        formRules: {},
        formData: {},
      },
    }
  },
  methods: {
    handleOpenAddModal() {
      this.AEModal.formData = {}
      this.AEModal.visible = true
    },
    handleSubmitAE(formData) {
      return this.$http({
        url: '/tx/save',
        method: 'post',
        data: formData,
      })
    },
    handleSubmitAESuccess() {
      this.$refs['tx-table'].commitAction('query')
    },
  },
}
</script>

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