方案数据库

src/views/simulationScene/database/fasjk.vue

@@ -1,86 +1,60 @@
 <template>
   <page-header-wrapper>
-    <Grid :columns="['400px', 1]">
+    <Grid :columns="[1, 1, 1]">
-      <a-card :bordered="false">
+      <a-card title="想定列表" class="my-card my-card-has-title" :bordered="false" v-loading="xd.loading">
-        <a-list :loading="listLoading" item-layout="horizontal" :data-source="scenarioList">
+        <template #extra>
-          <a-list-item slot="renderItem" slot-scope="item" @click="handleClickScenario(item)">
+          <a-icon type="sync" style="font-size: 30px" @click="getXdListData()" />
-            <a-list-item-meta :description="item.author">
+        </template>
-              <span slot="title">{{ item.name }}</span>
+        <a-tree
-              <a-checkbox slot="avatar" :checked="item.id === queryParam.id"></a-checkbox>
+          :treeData="xd.listData"
-            </a-list-item-meta>
+          :replaceFields="{ title: 'name', key: 'id' }"
-          </a-list-item>
+          :selectedKeys.sync="xd.selectedKeys"
-        </a-list>
+          @select="handleChangeXdSelected"
+        >
+        </a-tree>
       </a-card>
-      <a-card :bordered="false">
+      <a-card title="作战/保障力量" class="my-card my-card-has-title" :bordered="false" v-loading="zzbzll.loading">
-        <div class="table-page-search-wrapper">
+        <template #extra>
-          <a-form layout="inline">
+          <a-icon type="sync" style="font-size: 30px" @click="getZzbzllTreeData()" />
-            <a-row :gutter="48">
+        </template>
-              <!-- <a-col :xl="8" :lg="8">
+        <a-tree
-                <a-form-item label="想定名称">
+          :treeData="zzbzll.treeData"
-                  <a-input placeholder="请输入" v-model="queryParam.name" />
+          :replaceFields="{ title: 'name', key: 'id' }"
-                </a-form-item>
+          :selectedKeys.sync="zzbzll.selectedKeys"
-              </a-col> -->
+          :expandedKeys.sync="zzbzll.expandedKeys"
-              <a-col :xl="8" :lg="8">
+          @select="handleChangeZzbzllSelected"
-                <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-tree>
-            <a @click="handleEdit(record)"> <a-icon type="form" /></a>
+      </a-card>
-            <a-divider type="vertical" />
+      <a-card title="兵力编组信息" class="my-card my-card-has-title" :bordered="false" v-loading="blbz.loading">
-
+        <template #extra>
-            <a-popconfirm
+          <a-icon type="sync" style="font-size: 30px" @click="getBlbzTreeData()" />
-              title="确定要删除该想定吗？"
+        </template>
-              ok-text="确定"
+        <a-tree
-              cancel-text="取消"
+          :treeData="blbz.treeData"
-              @confirm="handleDelete(record)"
+          :selectedKeys.sync="blbz.selectedKeys"
+          :expandedKeys.sync="blbz.expandedKeys"
+          @select="handleChangeBlbzSelected"
         >
-              <a href="javascript:;"><a-icon type="delete" /></a>
+        </a-tree>
-            </a-popconfirm>
-          </span> -->
-        </a-table>
       </a-card>
     </Grid>
-    <h-modal
+    <a-modal v-model="blbzModal.visible" :width="920" :maskClosable="false" :destroyOnClose="true" :footer="null">
-      :title="AEModal.title"
+      <template #title>
-      :width="640"
+        <a-radio-group v-model="blbzModal.type" button-style="solid" @change="handleChangeBlbzModalType">
-      :visible="AEModal.visible"
+          <a-radio-button value="staff">人员</a-radio-button>
-      :destroyOnClose="true"
+          <a-radio-button value="weapon">装备</a-radio-button>
-      @cancel="() => this.handleClose()"
+        </a-radio-group>
-      @ok="() => this.handleOk()"
+      </template>
-      switch-fullscreen
+      <AntQueryTable
-      :fullscreen.sync="AEModal.fullscreen"
+        height="600px"
-    >
+        ref="blbz-table"
-      <a-spin :spinning="AEModal.spinning">
+        :queryConfig="blbzModal.queryConfig"
-        <a-form-model
+        :tableConfig="tableConfig"
-          ref="form"
+        :pageConfig="blbzModal.pageConfig"
-          :model="AEModal.form"
+        :showTool="blbzModal.showTool"
-          :rules="AEModal.rules"
+      ></AntQueryTable>
-          :label-col="AEModal.labelCol"
+    </a-modal>
-          :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>
 
@@ -89,173 +63,142 @@ export default {
   name: 'Fasjk',
   data() {
     return {
-      listLoading: false,
+      xd: {
-      scenarioList: [],
+        loading: false,
-
+        listData: [],
-      queryParam: { id: '' },
+        selectedKeys: [],
-      columns: [
-        {
-          title: '#',
-          dataIndex: 'index',
-          customRender: (_, record, $index) => $index + 1,
-          align: 'center',
-          width: 80,
       },
-        {
+      zzbzll: {
-          title: '分队名称',
+        loading: false,
-          dataIndex: '0',
+        treeData: [],
-          align: 'left',
+        selectedKeys: [],
+        expandedKeys: [],
       },
-        {
+      blbz: {
-          title: '方案名称',
+        loading: false,
-          dataIndex: '1',
+        treeData: [],
-          align: 'left',
+        selectedKeys: [],
+        expandedKeys: [],
       },
-        {
+      blbzModal: {
-          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,
+        type: 'staff',
-        fullscreen: false,
+        queryConfig: false,
-        spinning: false,
+        pageConfig: false,
-        form: {},
+        showTool: false,
-        rules: {
-          name: [{ required: true, message: '请输入想定名称！', trigger: 'blur' }],
-        },
-        labelCol: { xs: { span: 24 }, sm: { span: 7 } },
-        wrapperCol: { xs: { span: 24 }, sm: { span: 13 } },
       },
     }
   },
+  computed: {
+    tableConfig() {
+      return {
+        query: () =>
+          this.$http({
+            url: `/baseData/fightPowerHierarchy/${this.blbzModal.type}/${this.blbz.selectedKeys[0]}`,
+            method: 'get',
+          }),
+        immediate: false,
+        table: {},
+        columns: {
+          staff: [
+            { dataIndex: 'serial' },
+            { title: '岗位', dataIndex: 'name', width: 'auto', minWidth: 150 },
+            { title: '岗位数量', dataIndex: 'number', type: 'number', width: 'auto', minWidth: 150 },
+            { dataIndex: 'action' },
+          ],
+          weapon: [
+            { dataIndex: 'serial' },
+            { title: '装备名称', dataIndex: 'name', width: 'auto', minWidth: 150 },
+            { title: '装备数量', dataIndex: 'number', type: 'number', width: 'auto', minWidth: 150 },
+            { dataIndex: 'action' },
+          ],
+        }[this.blbzModal.type],
+      }
+    },
+  },
   created() {
-    this.getScenarioList()
+    this.getXdListData()
   },
   methods: {
-    async getScenarioList() {
+    async getXdListData() {
       try {
-        this.listLoading = true
+        this.xd.loading = true
         const res = await this.$http({
           url: `/baseData/scenario/all`,
           method: 'get',
         })
-        this.scenarioList = res.data
+        this.xd.listData = res.data
-        this.queryParam.id = this.scenarioList[0].id
-        this.getList()
       } catch (error) {
         console.log(error)
       } finally {
-        this.listLoading = false
+        this.xd.loading = false
       }
     },
-    handleClickScenario(item) {
+    handleChangeXdSelected() {
-      this.queryParam.id = item.id
+      this.getZzbzllTreeData()
-      this.getList()
     },
-    resetList() {
+    async getZzbzllTreeData() {
-      this.getList()
-    },
-    async getList(parameter = {}) {
       try {
-        this.loadingTable = true
+        this.zzbzll.loading = true
         const res = await this.$http({
-          url: '/baseData/scenario/schemeList',
+          url: `/scenario/power/${this.xd.selectedKeys[0]}`,
           method: 'get',
-          params: { ...parameter, ...this.queryParam },
         })
-        this.loadData = res.data
+        this.zzbzll.treeData = [
+          {
+            id: '1',
+            name: '红方',
+            selectable: false,
+            children: [
+              { id: '1-1', name: '作战力量', selectable: false, children: res.data.red.fight },
+              { id: '1-2', name: '保障力量', selectable: false, children: res.data.red.guarantee },
+              { id: '1-3', name: '指挥力量', selectable: false, children: res.data.red.command },
+            ],
+          },
+          {
+            id: '2',
+            name: '蓝方',
+            selectable: false,
+            children: [
+              { id: '2-1', name: '作战力量', selectable: false, children: res.data.blue.fight },
+              { id: '2-2', name: '保障力量', selectable: false, children: res.data.blue.guarantee },
+              { id: '2-3', name: '指挥力量', selectable: false, children: res.data.blue.command },
+            ],
+          },
+        ]
+        this.zzbzll.expandedKeys = ['1', '1-1', '1-2', '1-3', '2', '2-1', '2-2', '2-3']
       } catch (error) {
         console.log(error)
       } finally {
-        this.loadingTable = false
+        this.zzbzll.loading = false
       }
     },
-    handleAdd() {
+    handleChangeZzbzllSelected() {
-      this.AEModal.title = '添加想定'
+      this.getBlbzTreeData()
-      this.AEModal.editStatus = false
-      this.AEModal.visible = true
     },
-    async handleEdit(record) {
+    async getBlbzTreeData() {
       try {
+        this.blbz.loading = true
         const res = await this.$http({
-          url: `/baseData/scenario/${record.id}`,
+          url: `/blbz/${this.zzbzll.selectedKeys[0]}`,
           method: 'get',
         })
-        this.AEModal.form = res.data.data
+        this.blbz.treeData = res.data
-        this.AEModal.title = '编辑想定'
-        this.AEModal.editStatus = true
-        this.AEModal.visible = true
       } catch (error) {
         console.log(error)
-        this.$message.error('未知错误，请重试')
+        this.blbz.treeData = [{ title: '123', key: '123' }]
+      } finally {
+        this.blbz.loading = false
       }
     },
-    handleClose() {
+    handleChangeBlbzSelected() {
-      this.AEModal.visible = false
+      this.blbzModal.visible = true
-      this.AEModal.form = {}
+      this.$nextTick(() => {
-    },
+        this.$refs['blbz-table'].commitAction('query')
-    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) {
+    handleChangeBlbzModalType() {
-      try {
+      this.$refs['blbz-table'].commitAction('query')
-        await this.$http({
-          url: `/baseData/scenario/remove/${record.id}`,
-          method: 'get',
-        })
-        this.$message.success('删除角色成功')
-        this.getList()
-      } catch (error) {
-        console.log(error)
-        this.$message.error('删除角色失败')
-      }
     },
   },
 }