作战、保障力量数据库增加组织维护功能

package.json

@@ -39,6 +39,7 @@
     "vue-cropper": "0.4.9",
     "vue-i18n": "^8.27.1",
     "vue-quill-editor": "^3.0.6",
+    "vue-resize-directive": "^1.2.0",
     "vue-router": "^3.5.3",
     "vue-svg-component-runtime": "^1.0.1",
     "vuex": "^3.6.2",

src/components/Common/Layout/AntFormModal.vue

@@ -0,0 +1,86 @@
+<template>
+  <a-modal v-model="_visible" v-bind="_modalConfig" @ok="handleOk()">
+    <a-spin :spinning="loading">
+      <a-form-model ref="form" :model="formData" :rules="formRules" v-bind="_formConfig">
+        <a-form-model-item v-for="item in formItems" :key="item.prop" v-bind="item">
+          <span v-if="item.customRender">{{ item.customRender(formData[item.prop], formData) }}</span>
+          <component
+            v-else
+            :is="item.component || 'a-input'"
+            v-model="formData[item.prop]"
+            v-bind="item.options"
+            v-on="item.listeners"
+          />
+        </a-form-model-item>
+      </a-form-model>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    visible: { type: Boolean, required: true },
+    formConfig: { type: Object, default: () => ({}) },
+    formItems: { type: Array, default: () => [] },
+    formRules: { type: Object, default: () => ({}) },
+    formData: { type: Object, default: () => ({}) },
+    onSubmit: { type: Function, default: () => Promise.reject('没有onSubmit参数') },
+  },
+  data() {
+    return {
+      loading: false,
+    }
+  },
+  computed: {
+    _visible: {
+      get() {
+        return this.visible
+      },
+      set(v) {
+        this.$emit('update:visible', v)
+      },
+    },
+    _modalConfig() {
+      return {
+        maskClosable: false,
+        destroyOnClose: true,
+        ...this.$attrs,
+      }
+    },
+    _formConfig() {
+      return {
+        labelCol: { span: 6 },
+        wrapperCol: { span: 15 },
+        layout: 'horizontal',
+        ...this.formConfig,
+      }
+    },
+  },
+  methods: {
+    async handleOk() {
+      try {
+        await this.$refs.form.validate()
+        this.loading = true
+        await this.onSubmit(this.formData)
+          .then((res) => {
+            this.$emit('success', this.formData, res)
+            return Promise.resolve(true)
+          })
+          .catch((error) => {
+            this.$emit('fail', this.formData, error)
+            return Promise.reject(false)
+          })
+        this._visible = false
+        this.$message.success(`${this._modalConfig.title}成功`)
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.loading = false
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped></style>

src/components/Common/Layout/AntQueryTable.vue

@@ -0,0 +1,516 @@
+<template>
+  <div class="ant-query-table" :style="{ height }">
+    <slot name="qt-top-query" :queryParams="queryParams" :tableData="tableData"></slot>
+    <div v-if="queryConfig !== false" class="qt-query">
+      <a-form-model layout="inline" :model="queryTemp">
+        <a-form-model-item v-for="item in queryConfig.items" :key="item.prop" :label="item.label">
+          <slot :name="`query-${item.prop}`" :prop="item.prop" :queryParams="queryTemp">
+            <component
+              :is="item.component || 'a-input'"
+              v-model="queryTemp[item.prop]"
+              v-bind="item.options"
+              v-on="item.listeners"
+            />
+          </slot>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-space :size="16">
+            <a-button type="primary" @click="handleQueryBtnClick">查询</a-button>
+            <a-button @click="handleResetBtnClick">重置</a-button>
+            <slot name="querybar-action"></slot>
+          </a-space>
+        </a-form-model-item>
+      </a-form-model>
+    </div>
+    <slot name="qt-query-toolbar" :queryParams="queryParams" :tableData="tableData"></slot>
+    <div v-if="showTool" class="qt-toolbar">
+      <slot name="toolbar">
+        <a-space :size="16">
+          <slot
+            name="toolbar-left"
+            :tableData="tableData"
+            :selectedRows="selectedRows"
+            :selectedRowKeys="selectedRowKeys"
+            :queryParams="queryParams"
+            :queryParamsWithoutPage="queryTemp"
+          />
+        </a-space>
+        <a-space :size="16">
+          <slot name="toolbar-right" />
+        </a-space>
+      </slot>
+    </div>
+    <div ref="qt-table" class="qt-table" v-resize="handleTableResize">
+      <a-table
+        ref="table"
+        :columns="tableColumns"
+        :loading="tableLoading"
+        :data-source="tableData"
+        :pagination="false"
+        v-bind="tableConf"
+        :scroll="tableScrollConfig"
+        :style="{ height: '100%' }"
+        :rowSelection="rowSelection"
+      >
+        <template v-for="(_, name) in tabletitleSlots" :slot="name">
+          <slot :name="name" />
+        </template>
+        <template v-for="(config, name) in titleRender" :slot="name">
+          <div :key="name" :style="{ display: 'flex', alignItems: 'center' }">
+            <span>{{ config.title }}</span>
+            <a-popover title="注释">
+              <template slot="content">
+                {{ config.explain }}
+              </template>
+              <a-icon type="exclamation-circle" style="width: 14px; height: 14px; margin-left: 5px; cursor: pointer" />
+            </a-popover>
+          </div>
+        </template>
+        <template v-for="(_, name) in tablecellSlots" :slot="name" slot-scope="text, record, index">
+          <slot :name="tablecellSlotPrefix + name" v-bind="{ text, record, index }" :data-index="name" />
+        </template>
+      </a-table>
+      <div v-if="tableScrollY" class="qt-table-border__bottom"></div>
+    </div>
+    <div v-if="isPageMode" class="qt-page">
+      <a-pagination v-bind="pageConf" @change="handlePageChange" @showSizeChange="handlePageChange"></a-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import cloneDeep from 'lodash.clonedeep'
+import {
+  defaultUserColumns,
+  tabletitleSlotPrefix,
+  tablecellSlotPrefix,
+  defaultTableCellWidth,
+  defaultTableScrollSize,
+  defaultTableConfig,
+  actionSlotName,
+  defaultPageSize,
+  defaultPageConfig,
+} from './defaultSettings'
+
+export default {
+  props: {
+    height: { type: [String, Boolean], default: 'auto' },
+    queryConfig: { type: [Object, Boolean], default: () => ({}) },
+    tableConfig: { type: Object, default: () => ({}) },
+    pageConfig: { type: [Object, Boolean], default: () => ({}) },
+    showTool: { type: Boolean, default: true },
+  },
+  data() {
+    return {
+      queryTemp: {},
+      tableLoading: false,
+      tableData: [],
+      selectedRows: [],
+      selectedRowKeys: [],
+      widthMap: {
+        date: 168,
+      },
+      titleRender: {},
+      tableScrollX: false,
+      tableScrollY: false,
+      tabletitleSlotPrefix,
+      tablecellSlotPrefix,
+      actionSlotName,
+      total: 0,
+      pageParams: { pageNum: 1, pageSize: defaultPageSize },
+    }
+  },
+  computed: {
+    isPageMode() {
+      return this.pageConfig !== false
+    },
+    queryParams() {
+      if (this.isPageMode) {
+        return { ...this.queryTemp, ...this.pageParams }
+      }
+      return this.queryTemp
+    },
+    tableColumns() {
+      const { columns, userColumns = false } = this.tableConfig
+      const originColumns = cloneDeep(columns)
+      // 暂存序号列
+      let serialCol = null
+      const serialColIndex = originColumns.findIndex((col) => col.dataIndex === 'serial')
+      if (serialColIndex > -1) {
+        serialCol = originColumns[serialColIndex]
+        originColumns.splice(serialColIndex, 1)
+      }
+      // 暂存操作列
+      let actionCol = null
+      const actionColIndex = originColumns.findIndex((col) => col.dataIndex === actionSlotName)
+      if (actionColIndex > -1) {
+        actionCol = originColumns[actionColIndex]
+        originColumns.splice(actionColIndex, 1)
+      }
+      // 先处理其他列
+      if (userColumns) {
+        originColumns.push(...defaultUserColumns)
+      }
+      this.handleColumns(originColumns)
+      // 补充序号列到第一列
+      if (serialCol) {
+        originColumns.unshift({
+          title: '序号',
+          align: 'center',
+          width: 80,
+          ...serialCol,
+          customRender: this.renderSerial.bind(this, serialCol.followPage === true),
+          fixed: 'left',
+        })
+      }
+      // 补充操作列到最后一列
+      if (actionCol) {
+        originColumns.push({
+          title: '操作',
+          width: 150,
+          align: 'center',
+          ...actionCol,
+          slots: { title: 'action-title' },
+          scopedSlots: { customRender: 'action' },
+          fixed: 'right',
+        })
+      }
+      return originColumns
+    },
+    tableMaxWidth() {
+      return this.calculateWidthByColumns(this.tableColumns)
+    },
+    tableScrollConfig() {
+      return {
+        ...(this.tableScrollX === false ? {} : { x: '100%' }),
+        ...(this.tableScrollY === false ? {} : { y: this.tableScrollY }),
+      }
+    },
+    tableConf() {
+      return {
+        ...defaultTableConfig,
+        ...this.tableConfig.table,
+      }
+    },
+    defaultRowSelection() {
+      return {
+        selectedRowKeys: this.selectedRowKeys,
+        onChange: this.handleSelectChange.bind(this),
+        fixed: true,
+        getCheckboxProps: (record) => ({
+          props: { disabled: record.selectable === false },
+          style: { display: record.selectable === false ? 'none' : '' },
+        }),
+      }
+    },
+    rowSelection() {
+      if (!this.tableConfig.select) return null
+      if (this.tableConfig.select instanceof Object) {
+        return {
+          ...this.tableConfig.select,
+          ...this.defaultRowSelection,
+        }
+      }
+      return this.defaultRowSelection
+    },
+    tabletitleSlots() {
+      const tabletitleSlots = {}
+      for (const slotName in this.$scopedSlots) {
+        if (!slotName.startsWith(this.tabletitleSlotPrefix)) continue
+        const slotFunc = this.$scopedSlots[slotName]
+        tabletitleSlots[slotName] = slotFunc
+      }
+      return tabletitleSlots
+    },
+    tablecellSlots() {
+      const tablecellSlots = {}
+      for (const slotName in this.$scopedSlots) {
+        if (!slotName.startsWith(this.tablecellSlotPrefix)) continue
+        const translotName = slotName.replace(this.tablecellSlotPrefix, '')
+        const slotFunc = this.$scopedSlots[slotName]
+        tablecellSlots[translotName] = slotFunc
+      }
+      return tablecellSlots
+    },
+    pageConf() {
+      if (!this.isPageMode) return false
+      return {
+        ...defaultPageConfig,
+        current: this.pageParams.pageNum,
+        pageSize: this.pageParams.pageSize,
+        total: this.total,
+        onChange: this.handlePageChange.bind(this),
+        onShowSizeChange: this.handlePageChange.bind(this),
+      }
+    },
+  },
+  mounted() {
+    if (this.queryConfig && this.queryConfig.initQueryParams) {
+      this.initQueryTemp()
+    }
+    const immediate = this.tableConfig.immediate
+    if (immediate !== false) this.queryTable()
+  },
+  methods: {
+    initQueryTemp() {
+      const { initQueryParams = {} } = this.queryConfig
+      this.queryTemp = cloneDeep(initQueryParams)
+    },
+    handleTableResize(target) {
+      if (!target) return
+      this.tableScrollX = target.offsetWidth < this.tableMaxWidth
+      const tableBody = target.querySelector('.ant-table-scroll>.ant-table-body>table>.ant-table-tbody') || {
+        offsetHeight: 0,
+      }
+      const innerHeight =
+        this.getTableHeadDom(target, this.tableScrollY).offsetHeight +
+        tableBody.offsetHeight +
+        (this.tableScrollX ? defaultTableScrollSize : 0)
+      if (target.offsetHeight > innerHeight) {
+        this.tableScrollY = false
+      } else {
+        this.tableScrollY = true
+        this.$nextTick(() => {
+          this.tableScrollY = target.offsetHeight - this.getTableHeadDom(target, true).offsetHeight
+        })
+      }
+    },
+    getTableHeadDom(target, tableScrollY) {
+      let tableHead = null
+      if (tableScrollY === false) {
+        tableHead = target.querySelector('.ant-table-scroll>.ant-table-body>table>.ant-table-thead')
+      } else {
+        tableHead = target.querySelector('.ant-table-scroll>.ant-table-header>table')
+      }
+      return tableHead || { offsetHeight: 0 }
+    },
+    handleColumns(originColumns) {
+      for (let i = 0; i < originColumns.length; i++) {
+        const {
+          title,
+          titleConfig,
+          dataIndex,
+          style,
+          width,
+          minWidth,
+          align,
+          type,
+          format,
+          dictName,
+          digits,
+          unit = '',
+        } = originColumns[i]
+        if (!title) {
+          originColumns[i].slots = { title: tabletitleSlotPrefix + dataIndex }
+        }
+        if (!title && titleConfig) {
+          this.$set(this.titleRender, tabletitleSlotPrefix + dataIndex, titleConfig)
+          originColumns[i].align = align || 'right'
+        }
+        originColumns[i].scopedSlots = { customRender: dataIndex }
+        if (!width) {
+          originColumns[i].width = this.widthMap[type] || defaultTableCellWidth
+        }
+        if (width === 'auto' && this.tableScrollX !== false) {
+          originColumns[i].width = minWidth || defaultTableCellWidth
+        }
+        if (type === 'number') {
+          originColumns[i].align = align || 'right'
+          originColumns[i].customRender = (text) => {
+            if (isNaN(text)) {
+              return text || ''
+            } else {
+              let num = text
+              if (typeof digits === 'number') {
+                num = Number(text).toLocaleString('en', { minimumFractionDigits: digits })
+              }
+              return unit ? `${num} ${unit}` : num
+            }
+          }
+        }
+        if (type === 'date') {
+          originColumns[i].align = align || 'center'
+          originColumns[i].customRender = (text) => (text && format ? moment(text).format(format) : text)
+        }
+        if (originColumns[i].children) {
+          this.handleColumns(originColumns[i].children)
+          continue
+        }
+      }
+    },
+    calculateWidthByColumns(columns) {
+      let baseWidth = 0
+      if (this.rowSelection) {
+        baseWidth = this.rowSelection.columnWidth || 60
+      }
+      return columns.reduce((cur, col) => {
+        if (col.children && col.children.length > 0) {
+          return cur + this.calculateWidthByColumns(col.children)
+        }
+        return cur + (col.width === 'auto' ? col.minWidth || defaultTableCellWidth : col.width)
+      }, baseWidth)
+    },
+    async queryTable() {
+      this.tableLoading = true
+      try {
+        let res = []
+        if (this.tableConfig.query && typeof this.tableConfig.query === 'function') {
+          res = await this.tableConfig.query(this.queryParams)
+        }
+        // console.log('----res----', res)
+        if (!this.isPageMode) {
+          // ---- 不分页 ----
+          this.tableData = res?.data || []
+          this.tableLoading = false
+          this.$nextTick(() => {
+            this.handleTableResize(this.$refs['qt-table'])
+          })
+          return
+        }
+        // ---- 分页模式 ----
+        this.tableData = res.data || []
+        this.total = res.totalCount || 0
+        if (this.tableData.length === 0 && this.total > 0) {
+          this.pageParams.pageNum = Math.ceil(this.total / this.pageParams.pageSize)
+          this.queryTable()
+        } else {
+          this.tableLoading = false
+          this.$nextTick(() => {
+            this.handleTableResize(this.$refs['qt-table'])
+          })
+        }
+      } catch {
+        this.tableLoading = false
+        this.tableData = []
+        this.total = 0
+        this.$nextTick(() => {
+          this.handleTableResize(this.$refs['qt-table'])
+        })
+      }
+      this.handleSelectChange(
+        this.selectedRowKeys.filter((key) => this.tableData.some((d) => d[this.tableConf.rowKey] === key)),
+        this.selectedRows.filter((r) =>
+          this.tableData.some((d) => d[this.tableConf.rowKey] === r[this.tableConf.rowKey])
+        )
+      )
+    },
+    handleQueryBtnClick() {
+      this.pageParams.pageNum = 1
+      this.commitAction('query')
+    },
+    handleResetBtnClick() {
+      this.initQueryTemp()
+      this.pageParams.pageNum = 1
+      this.commitAction('query')
+    },
+    handleSelectChange(selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    renderSerial(followPage, text, record, index) {
+      if (text) return text
+      const { pageNum, pageSize } = this.pageParams
+      const base = followPage ? pageSize * (pageNum - 1) + 1 : 1
+      return base + index
+    },
+    handlePageChange(page, size) {
+      if (this.pageParams.pageSize === size) {
+        this.pageParams.pageNum = page
+      } else {
+        this.pageParams.pageNum = 1
+        this.pageParams.pageSize = size
+      }
+      this.queryTable()
+    },
+    commitAction(action) {
+      switch (action) {
+        case 'query':
+          this.queryTable()
+          break
+        case 'reload':
+          this.queryTemp = {}
+          this.pageParams.pageNum = 1
+          this.pageParams.pageSize = defaultPageSize
+          this.queryTable()
+          break
+
+        case 'gofirst':
+          this.pageParams.pageNum = 1
+          this.queryTable()
+      }
+    },
+    getQueryParams(withPage = false) {
+      if (withPage) {
+        return cloneDeep(this.queryParams)
+      } else {
+        return cloneDeep(this.queryTemp)
+      }
+    },
+    setQueryParamsValue(key, value) {
+      this.$set(this.queryTemp, key, value)
+    },
+  },
+}
+</script>
+
+<style lang="less">
+.ant-query-table {
+  display: flex;
+  flex-direction: column;
+}
+.qt-query {
+  .ant-form-item {
+    margin-bottom: 16px;
+  }
+  .ant-input-affix-wrapper .ant-input {
+    width: 190px;
+  }
+  .ant-select {
+    width: 190px;
+  }
+  .ant-select-dropdown {
+    max-height: 246px !important;
+    top: 28px !important;
+  }
+  .ant-select-dropdown-menu {
+    max-height: 246px;
+  }
+}
+
+.qt-toolbar {
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.qt-table {
+  min-height: 122px;
+  flex: 1;
+  overflow-y: auto;
+  .ant-table-row-indent {
+    padding-left: 0 !important;
+  }
+  .ant-table-thead .ant-table-row-cell-break-word {
+    text-align: center !important;
+    font-weight: bold;
+  }
+  .qt-table-border__bottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background-color: #e8e8e8;
+  }
+}
+.qt-table::-webkit-scrollbar {
+  display: none;
+}
+
+.qt-page {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/components/Common/Layout/defaultSettings.js

@@ -0,0 +1,25 @@
+export const defaultUserColumns = [
+  { title: '创建时间', dataIndex: 'createTime', type: 'date', format: 'YYYY-MM-DD HH:mm:ss' },
+  { title: '创建人', dataIndex: 'createUserName', width: 130, align: 'center' },
+  { title: '更新时间', dataIndex: 'updateTime', type: 'date', format: 'YYYY-MM-DD HH:mm:ss' },
+  { title: '更新人', dataIndex: 'updateUserName', width: 130, align: 'center' },
+]
+export const tabletitleSlotPrefix = 'tabletitle-'
+export const tablecellSlotPrefix = 'tablecell-'
+export const defaultTableCellWidth = 168
+// 滚动条的大小需要与样式表中保持一致
+// 当前样式详见@/style/antd.less#@table-scroll-size
+export const defaultTableScrollSize = 8
+export const defaultTableConfig = {
+  bordered: true,
+  rowKey: 'id',
+}
+
+export const actionSlotName = 'action'
+
+export const defaultPageSize = 10
+export const defaultPageConfig = {
+  showTotal: total => `共 ${total} 条`,
+  showSizeChanger: true,
+  pageSizeOptions: ['5', '10', '20', '50'],
+}

src/components/Common/register.js

@@ -1,6 +1,8 @@
 import ModuleWrapper from './Layout/ModuleWrapper.vue'
 import Flex from './Layout/Flex.vue'
 import Grid from './Layout/Grid.vue'
+import AntFormModal from './Layout/AntFormModal.vue'
+import AntQueryTable from './Layout/AntQueryTable.vue'
 
 import AntOriginSelect from './Form/AntOriginSelect.vue'
 import AntOriginTreeSelect from './Form/AntOriginTreeSelect.vue'
@@ -9,6 +11,7 @@ import DurationPicker from './Form/DurationPicker.vue'
 import WangEditor from './WangEditor/Index.vue'
 
 import Loading from './Directives/Loading'
+import resize from 'vue-resize-directive'
 
 import Bus from './Bus/index'
 import MyCesium from './Cesium/index'
@@ -19,6 +22,8 @@ export default {
     Vue.component('ModuleWrapper', ModuleWrapper)
     Vue.component('Flex', Flex)
     Vue.component('Grid', Grid)
+    Vue.component('AntFormModal', AntFormModal)
+    Vue.component('AntQueryTable', AntQueryTable)
 
     Vue.component('AntOriginSelect', AntOriginSelect)
     Vue.component('AntOriginTreeSelect', AntOriginTreeSelect)
@@ -27,6 +32,7 @@ export default {
     Vue.component('WangEditor', WangEditor)
 
     Vue.directive('loading', Loading)
+    Vue.directive('resize', resize)
 
     window.$bus = Bus
     window.MyCesium = MyCesium

src/components/GlobalHeader/RightContent.vue

@@ -1,19 +1,19 @@
 <template>
   <div :class="wrpCls">
     <avatar-dropdown :menu="showMenu" :current-user="currentUser" :class="prefixCls" />
-    <select-lang :class="prefixCls" />
+    <!-- <select-lang :class="prefixCls" /> -->
   </div>
 </template>
 
 <script>
 import AvatarDropdown from './AvatarDropdown'
-import SelectLang from '@/components/SelectLang'
+// import SelectLang from '@/components/SelectLang'
 
 export default {
   name: 'RightContent',
   components: {
     AvatarDropdown,
-    SelectLang
+    // SelectLang
   },
   props: {
     prefixCls: {

src/layouts/BasicLayout.less

@@ -48,3 +48,46 @@
 .ant-layout-footer {
   display: none;
 }
+.ant-pro-basicLayout-content {
+  margin: 0;
+  > .ant-pro-basicLayout-children-content-wrap {
+    height: 100%;
+    > .ant-pro-grid-content {
+      height: 100%;
+      > .ant-pro-page-header-wrap {
+        height: 100%;
+        margin: 0;
+        > .ant-pro-grid-content {
+          height: calc(100% - 89px);
+          min-height: 0;
+          > .ant-pro-page-header-wrap-children-content {
+            height: 100%;
+            margin: 0;
+            padding: 24px;
+            > div {
+              height: calc(100vh - 201px);
+              overflow: overlay;
+            }
+            .my-card {
+              overflow: hidden;
+              .ant-card-extra {
+                display: flex;
+                align-items: center;
+                padding: 0;
+              }
+              .ant-card-body {
+                height: 100%;
+                overflow-y: auto;
+              }
+            }
+            .my-card-has-title {
+              .ant-card-body {
+                height: calc(100% - 64px);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/views/simulationScene/database/bzllsjk.vue

@@ -1,87 +1,121 @@
 <template>
   <page-header-wrapper>
-    <Grid :columns="['400px', 1]">
+    <Grid :columns="['400px', 1]" :rows="gridRows">
-      <a-card :bordered="false">
+      <a-card title="组织架构-作战力量" class="my-card my-card-has-title" :bordered="false" style="grid-row: 1 / 3">
-        <a-tree :treeData="zzTree" :selectedKeys.sync="selectedKeys" @select="getList()"> </a-tree>
+        <template #extra>
+          <a-button type="primary" icon="plus" shape="circle" title="新增" @click="handleOpenAddZzjgModal()"></a-button>
+        </template>
+        <a-tree
+          :treeData="zzjg.treeData"
+          :selectedKeys.sync="zzjg.selectedKeys"
+          :expandedKeys.sync="zzjg.expandedKeys"
+          @select="handleChangeZzjgSelected"
+        >
+          <template #title="{ key: id, title }">
+            <a-dropdown :trigger="['contextmenu']">
+              <span>{{ title }}</span>
+              <template #overlay>
+                <Flex class="contextmenu-zz">
+                  <a-button
+                    type="text-primary"
+                    icon="edit"
+                    title="编辑"
+                    @click="handleOpenEditZzjgModal(id)"
+                  ></a-button>
+                  <a-button
+                    type="text-primary"
+                    icon="plus"
+                    title="新增子项"
+                    @click="handleOpenAddZzjgModal(id)"
+                  ></a-button>
+                  <a-button
+                    type="text-danger"
+                    icon="delete"
+                    title="删除"
+                    @click="handleDeleteZzjg(id, title)"
+                  ></a-button>
+                </Flex>
+              </template>
+            </a-dropdown>
+          </template>
+        </a-tree>
       </a-card>
-      <a-card :bordered="false">
+      <a-card title="组织人员" class="my-card my-card-has-title" :bordered="false">
-        <div class="table-page-search-wrapper">
+        <template #extra>
-          <a-form layout="inline">
+          <a-button type="primary" style="margin-right: 20px" @click="handleOpenAddZzryModal">新增</a-button>
-            <a-row :gutter="48">
+          <a-icon
-              <a-col :xl="8" :lg="8">
+            v-if="layoutRight === 'zzry'"
-                <a-radio-group v-model="queryParam.type" button-style="solid" @change="getList()">
+            type="fullscreen-exit"
-                  <a-radio-button value="staff"> 人员 </a-radio-button>
+            style="font-size: 32px"
-                  <a-radio-button value="weapon"> 装备 </a-radio-button>
+            @click="layoutRight = 'auto'"
-                </a-radio-group>
+          />
-              </a-col>
+          <a-icon v-else type="fullscreen" style="font-size: 32px" @click="layoutRight = 'zzry'" />
-              <a-col :xl="8" :lg="8">
+        </template>
-                <span class="table-page-search-submitButtons" style="float: right">
+        <AntQueryTable
-                  <a-button type="primary" @click="getList">查询</a-button>
+          ref="zzry-table"
-                  <a-button style="margin-left: 8px" @click="resetList">重置</a-button>
+          height="100%"
-                </span>
+          :queryConfig="zzry.queryConfig"
-              </a-col>
+          :tableConfig="zzry.tableConfig"
-              <a-col :xl="8" :lg="8">
+          :pageConfig="zzry.pageConfig"
-                <a-button type="primary" icon="plus" style="float: right" @click="handleAdd">新建</a-button>
+          :showTool="zzry.showTool"
-              </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">
+          <template #tablecell-action="{ record }">
-            <a @click="handleEdit(record)"> <a-icon type="form" /></a>
+            <a-button type="text-primary" icon="edit" @click="handleOpenEditZzryModal(record)"></a-button>
-            <!-- <a-divider type="vertical" />
+          </template>
-
+        </AntQueryTable>
-            <a-popconfirm
+      </a-card>
-              title="确定要删除该岗位吗？"
+      <a-card title="组织装备" class="my-card my-card-has-title" :bordered="false">
-              ok-text="确定"
+        <template #extra>
-              cancel-text="取消"
+          <a-button type="primary" style="margin-right: 20px" @click="handleOpenAddZzzbModal">新增</a-button>
-              @confirm="handleDelete(record)"
+          <a-icon
+            v-if="layoutRight === 'zzzb'"
+            type="fullscreen-exit"
+            style="font-size: 32px"
+            @click="layoutRight = 'auto'"
+          />
+          <a-icon v-else type="fullscreen" style="font-size: 32px" @click="layoutRight = 'zzzb'" />
+        </template>
+        <AntQueryTable
+          ref="zzzb-table"
+          height="100%"
+          :queryConfig="zzzb.queryConfig"
+          :tableConfig="zzzb.tableConfig"
+          :pageConfig="zzzb.pageConfig"
+          :showTool="zzzb.showTool"
         >
-              <a href="javascript:;"><a-icon type="delete" /></a>
+          <template #tablecell-action="{ record }">
-            </a-popconfirm> -->
+            <a-button type="text-primary" icon="edit" @click="handleOpenEditZzzbModal(record)"></a-button>
-          </span>
+          </template>
-        </a-table>
+        </AntQueryTable>
       </a-card>
     </Grid>
-    <h-modal
+    <AntFormModal
-      :title="AEModal.title"
+      :visible.sync="zzjgModal.visible"
-      :width="640"
+      :title="zzjgModal.title"
-      :visible="AEModal.visible"
+      :formItems="zzjgModal.formItems"
-      :destroyOnClose="true"
+      :formRules="zzjgModal.formRules"
-      @cancel="() => this.handleClose()"
+      :formData="zzjgModal.formData"
-      @ok="() => this.handleOk()"
+      :onSubmit="handleSubmitZzjg"
-      switch-fullscreen
+      @success="handleSubmitZzjgSuccess"
-      :fullscreen.sync="AEModal.fullscreen"
+    ></AntFormModal>
-    >
+    <AntFormModal
-      <a-spin :spinning="AEModal.spinning">
+      :visible.sync="zzryModal.visible"
-        <a-form-model
+      :title="zzryModal.title"
-          ref="form"
+      :formItems="zzryModal.formItems"
-          :model="AEModal.form"
+      :formRules="zzryModal.formRules"
-          :rules="AEModal[`${queryParam.type}Rules`]"
+      :formData="zzryModal.formData"
-          :label-col="AEModal.labelCol"
+      :onSubmit="handleSubmitZzry"
-          :wrapper-col="AEModal.wrapperCol"
+      @success="handleSubmitZzrySuccess"
-        >
+    ></AntFormModal>
-          <a-form-model-item v-for="item in formItems" :key="item.prop" v-bind="item">
+    <AntFormModal
-            <span v-if="item.customRender">{{ item.customRender(AEModal.form[item.prop]) }}</span>
+      :visible.sync="zzzbModal.visible"
-            <component
+      :title="zzzbModal.title"
-              v-else
+      :formItems="zzzbFormItems"
-              :is="item.component || 'a-input'"
+      :formRules="zzzbModal.formRules"
-              v-model="AEModal.form[item.prop]"
+      :formData="zzzbModal.formData"
-              v-bind="item.options"
+      :onSubmit="handleSubmitZzzb"
-              v-on="item.listeners"
+      @success="handleSubmitZzzbSuccess"
-            />
+    ></AntFormModal>
-          </a-form-model-item>
-        </a-form-model>
-      </a-spin>
-    </h-modal>
   </page-header-wrapper>
 </template>
 
@@ -90,97 +124,73 @@ export default {
   name: 'Bzllsjk',
   data() {
     return {
-      zzTree: [],
+      layoutRight: 'auto',
+      zzjg: {
+        treeData: [],
         selectedKeys: [],
-
+        expandedKeys: [],
-      queryParam: { id: '', type: 'staff' },
-      staffColumns: [
-        {
-          title: '#',
-          dataIndex: 'index',
-          customRender: (_, record, $index) => $index + 1,
-          align: 'center',
-          width: 80,
       },
-        {
+      zzjgModal: {
-          title: '岗位',
-          dataIndex: 'name',
-        },
-        {
-          title: '岗位数量',
-          dataIndex: 'number',
-        },
-        // {
-        //   title: '物资器材',
-        //   dataIndex: 'material',
-        // },
-        {
-          title: '操作',
-          width: 140,
-          dataIndex: 'action',
-          align: 'center',
-          scopedSlots: { customRender: 'action' },
-        },
-      ],
-      weaponColumns: [
-        {
-          title: '#',
-          dataIndex: 'index',
-          customRender: (_, record, $index) => $index + 1,
-          align: 'center',
-          width: 80,
-        },
-        {
-          title: '装备名称',
-          dataIndex: 'name',
-        },
-        {
-          title: '装备数量',
-          dataIndex: 'number',
-        },
-        {
-          title: '操作',
-          width: 140,
-          dataIndex: 'action',
-          align: 'center',
-          scopedSlots: { customRender: 'action' },
-        },
-      ],
-      loadData: [], // 加载数据方法 必须为 Promise 对象
-      loadingTable: false,
-
-      AEModal: {
-        title: '',
         visible: false,
-        editStatus: false,
+        title: '',
-        fullscreen: false,
+        mode: '',
-        spinning: false,
+        formItems: [
-        form: {},
+          {
-        staffRules: {
+            label: '上级组织',
-          typeId: [{ required: true, message: '请选择岗位！', trigger: 'change' }],
+            prop: 'parentId',
-          number: [{ required: true, message: '请输入岗位数量！', trigger: 'blur' }],
+            component: 'AntOriginTreeSelect',
+            options: {
+              dataSource: () =>
+                this.$http({
+                  url: '/tree/organization',
+                  method: 'get',
+                  params: { unittype: 2 },
+                }).then((res) => ({ data: [{ key: 0, title: '根组织' }].concat(res.data) })),
+              valueKey: 'key',
             },
-        weaponRules: {
-          weaponId: [{ required: true, message: '请选择装备！', trigger: 'change' }],
-          number: [{ required: true, message: '请输入装备数量！', trigger: 'blur' }],
           },
-        labelCol: { xs: { span: 24 }, sm: { span: 7 } },
+          {
-        wrapperCol: { xs: { span: 24 }, sm: { span: 13 } },
+            label: '标识编码',
+            prop: 'codeName',
           },
-    }
+          {
+            label: '组织名称',
+            prop: 'name',
           },
-  computed: {
+        ],
-    columns() {
+        formRules: {
-      return this[`${this.queryParam.type}Columns`]
+          codeName: [{ required: true, message: '请输入标识编码！', trigger: 'blur' }],
+          name: [{ required: true, message: '请输入组织名称！', trigger: 'blur' }],
+          unittype: [{ required: true, message: '请选择组织类型！', trigger: 'blur' }],
         },
-    typeMapLabel() {
+        formData: {},
-      return { staff: '人员', weapon: '装备' }[this.queryParam.type]
       },
-    formItems() {
+
-      const result = []
+      zzry: {
-      switch (this.queryParam.type) {
+        queryConfig: false,
-        case 'staff':
+        tableConfig: {
-          result.push(
+          table: {},
+          immediate: false,
+          query: () =>
+            this.$http({
+              url: `/baseData/fightPowerHierarchy/staff/${this.zzjg.selectedKeys[0]}`,
+              method: 'get',
+            }),
+          columns: [
+            { dataIndex: 'serial' },
+            { title: '岗位', dataIndex: 'name', width: 'auto', minWidth: 150 },
+            { title: '岗位数量', dataIndex: 'number', type: 'number', width: 'auto', minWidth: 150 },
+            { dataIndex: 'action' },
+          ],
+        },
+        pageConfig: false,
+        showTool: false,
+      },
+      zzryModal: {
+        visible: false,
+        title: '',
+        mode: '',
+        formItems: [
           {
             label: '岗位名称',
             prop: 'typeId',
@@ -192,22 +202,44 @@ export default {
                   method: 'get',
                 }),
               labelKey: 'name',
-                readonly: this.AEModal.editStatus,
+              readonly: false,
             },
           },
-            { label: '岗位数量', prop: 'number' }
+          { label: '岗位数量', prop: 'number' },
-            // { label: '物资器材', prop: 'material' }
+        ],
-          )
+        formRules: {
-          break
+          typeId: [{ required: true, message: '请选择岗位！', trigger: 'change' }],
-        case 'weapon':
+          number: [{ required: true, message: '请输入岗位数量！', trigger: 'blur' }],
-          result.push(
+        },
-            this.AEModal.editStatus
+        formData: {},
-              ? {
+      },
-                  label: '装备名称',
+
-                  prop: 'name',
+      zzzb: {
-                  customRender: (v) => v,
+        queryConfig: false,
-                }
+        tableConfig: {
-              : {
+          table: {},
+          immediate: false,
+          query: () =>
+            this.$http({
+              url: `/baseData/fightPowerHierarchy/weapon/${this.zzjg.selectedKeys[0]}`,
+              method: 'get',
+            }),
+          columns: [
+            { dataIndex: 'serial' },
+            { title: '装备名称', dataIndex: 'name', width: 'auto', minWidth: 150 },
+            { title: '装备数量', dataIndex: 'number', type: 'number', width: 'auto', minWidth: 150 },
+            { dataIndex: 'action' },
+          ],
+        },
+        pageConfig: false,
+        showTool: false,
+      },
+      zzzbModal: {
+        visible: false,
+        title: '',
+        mode: '',
+        formItems: [
+          {
             label: '装备名称',
             prop: 'weaponId',
             component: 'AntOriginTreeSelect',
@@ -217,16 +249,46 @@ export default {
                   url: '/tree/armament',
                   method: 'get',
                 }),
-                    readonly: this.AEModal.editStatus,
+              readonly: false,
             },
           },
-            { label: '装备数量', prop: 'number' }
+          { label: '装备数量', prop: 'number' },
-          )
+        ],
-          break
+        formRules: {
-        default:
+          weaponId: [{ required: true, message: '请选择装备！', trigger: 'change' }],
-          break
+          number: [{ required: true, message: '请输入装备数量！', trigger: 'blur' }],
+        },
+        formData: {},
+      },
     }
-      return result
+  },
+  computed: {
+    gridRows() {
+      return {
+        auto: [1, 1],
+        zzry: [1, '56px'],
+        zzzb: ['56px', 1],
+      }[this.layoutRight]
+    },
+    zzzbFormItems() {
+      return [
+        this.zzzbModal.mode === 'add'
+          ? {
+              label: '装备名称',
+              prop: 'weaponId',
+              component: 'AntOriginTreeSelect',
+              options: {
+                dataSource: () =>
+                  this.$http({
+                    url: '/tree/armament',
+                    method: 'get',
+                  }),
+                readonly: false,
+              },
+            }
+          : { label: '装备名称', prop: 'name', customRender: (v) => v },
+        { label: '装备数量', prop: 'number' },
+      ]
     },
   },
   created() {
@@ -240,82 +302,116 @@ export default {
           method: 'get',
           params: { unittype: 2 },
         })
-        this.zzTree = res.data
+        this.zzjg.treeData = res.data
-        this.selectedKeys = [this.zzTree[0].key]
+        this.zzjg.selectedKeys = [this.zzjg.treeData[0].key]
-        this.getList()
+        this.handleChangeZzjgSelected()
       } catch (error) {
         console.log(error)
       }
     },
-    resetList() {
+    handleChangeZzjgSelected() {
-      this.getList()
+      this.$refs['zzry-table'].commitAction('reload')
+      this.$refs['zzzb-table'].commitAction('reload')
     },
-    async getList(parameter = {}) {
+    handleOpenAddZzjgModal(parentId) {
+      this.zzjgModal.title = '新建作战力量'
+      this.zzjgModal.mode = 'add'
+      this.zzjgModal.formData = { unittype: 2, parentId }
+      this.zzjgModal.visible = true
+    },
+    async handleOpenEditZzjgModal(id) {
       try {
-        this.loadingTable = true
         const res = await this.$http({
-          url: `/baseData/fightPowerHierarchy/${this.queryParam.type}/${this.selectedKeys[0]}`,
+          url: `/baseData/fightPowerHierarchy/${id}`,
           method: 'get',
         })
-        this.loadData = res.data
+        this.zzjgModal.title = '编辑作战力量'
-      } catch (error) {
+        this.zzjgModal.mode = 'edit'
-        console.log(error)
+        this.zzjgModal.formData = res.data
-      } finally {
+        this.zzjgModal.visible = true
-        this.loadingTable = false
-      }
-    },
-    handleAdd() {
-      this.AEModal.form = { parentId: this.selectedKeys[0] }
-      this.AEModal.title = `添加${this.typeMapLabel}`
-      this.AEModal.editStatus = false
-      this.AEModal.visible = true
-    },
-    async handleEdit(record) {
-      try {
-        this.AEModal.form = { ...record }
-        this.AEModal.title = `编辑${this.typeMapLabel}`
-        this.AEModal.editStatus = true
-        this.AEModal.visible = true
       } catch (error) {
         console.log(error)
         this.$message.error('未知错误，请重试')
       }
     },
-    handleClose() {
+    handleSubmitZzjg(formData) {
-      this.AEModal.visible = false
+      return this.$http({
-      this.AEModal.form = {}
+        url: `/baseData/fightPowerHierarchy/save`,
-    },
-    async handleOk() {
-      try {
-        await this.$refs.form.validate()
-        const params = { ...this.AEModal.form }
-        await this.$http({
-          url: `/baseData/fightPowerHierarchy/${this.queryParam.type}/save`,
         method: 'post',
-          data: params,
+        data: formData,
       })
-        this.$message.success(`${this.AEModal.title}成功!`)
-        this.getList()
-        this.handleClose()
-      } catch (error) {
-        console.log(error)
-      }
     },
-    async handleDelete(record) {
+    handleSubmitZzjgSuccess() {
+      this.getZzTree()
+    },
+    async handleDeleteZzjg(id, title) {
       try {
+        await this.$confirm({ content: `确定删除作战力量-${title}？` })
         await this.$http({
-          url: `/baseData/scenario/remove/${record.id}`,
+          url: `/baseData/fightPowerHierarchy/remove/${id}`,
           method: 'get',
         })
-        this.$message.success('删除角色成功')
+        this.$message.success('删除成功')
-        this.getList()
+        this.getZzTree()
-      } catch (error) {
+      } catch (error) {}
-        console.log(error)
+    },
-        this.$message.error('删除角色失败')
+
-      }
+    handleOpenAddZzryModal() {
+      this.zzryModal.title = '新建组织人员'
+      this.zzryModal.mode = 'add'
+      this.zzryModal.formData = { parentId: this.zzjg.selectedKeys[0] }
+      this.zzryModal.formItems[0].options.readonly = false
+      this.zzryModal.visible = true
+    },
+    handleOpenEditZzryModal(record) {
+      this.zzryModal.title = `编辑组织人员`
+      this.zzryModal.mode = 'edit'
+      this.zzryModal.formData = { ...record }
+      this.zzryModal.formItems[0].options.readonly = true
+      this.zzryModal.visible = true
+    },
+    handleSubmitZzry(formData) {
+      return this.$http({
+        url: `/baseData/fightPowerHierarchy/staff/save`,
+        method: 'post',
+        data: formData,
+      })
+    },
+    handleSubmitZzrySuccess() {
+      this.$refs['zzry-table'].commitAction('query')
+    },
+
+    handleOpenAddZzzbModal() {
+      this.zzzbModal.title = '新建组织装备'
+      this.zzzbModal.mode = 'add'
+      this.zzzbModal.formData = { parentId: this.zzjg.selectedKeys[0] }
+      this.zzzbModal.visible = true
+    },
+    handleOpenEditZzzbModal(record) {
+      this.zzzbModal.title = `编辑组织装备`
+      this.zzzbModal.mode = 'edit'
+      this.zzzbModal.formData = { ...record }
+      this.zzzbModal.visible = true
+    },
+    handleSubmitZzzb(formData) {
+      return this.$http({
+        url: `/baseData/fightPowerHierarchy/weapon/save`,
+        method: 'post',
+        data: formData,
+      })
+    },
+    handleSubmitZzzbSuccess() {
+      this.$refs['zzzb-table'].commitAction('query')
     },
   },
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.contextmenu-zz {
+  padding: 5px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 0 5px #aaaaaa;
+}
+</style>

src/views/simulationScene/database/zzllsjk.vue

@@ -1,87 +1,121 @@
 <template>
   <page-header-wrapper>
-    <Grid :columns="['400px', 1]">
+    <Grid :columns="['400px', 1]" :rows="gridRows">
-      <a-card :bordered="false">
+      <a-card title="组织架构-作战力量" class="my-card my-card-has-title" :bordered="false" style="grid-row: 1 / 3">
-        <a-tree :treeData="zzTree" :selectedKeys.sync="selectedKeys" @select="getList()"> </a-tree>
+        <template #extra>
+          <a-button type="primary" icon="plus" shape="circle" title="新增" @click="handleOpenAddZzjgModal()"></a-button>
+        </template>
+        <a-tree
+          :treeData="zzjg.treeData"
+          :selectedKeys.sync="zzjg.selectedKeys"
+          :expandedKeys.sync="zzjg.expandedKeys"
+          @select="handleChangeZzjgSelected"
+        >
+          <template #title="{ key: id, title }">
+            <a-dropdown :trigger="['contextmenu']">
+              <span>{{ title }}</span>
+              <template #overlay>
+                <Flex class="contextmenu-zz">
+                  <a-button
+                    type="text-primary"
+                    icon="edit"
+                    title="编辑"
+                    @click="handleOpenEditZzjgModal(id)"
+                  ></a-button>
+                  <a-button
+                    type="text-primary"
+                    icon="plus"
+                    title="新增子项"
+                    @click="handleOpenAddZzjgModal(id)"
+                  ></a-button>
+                  <a-button
+                    type="text-danger"
+                    icon="delete"
+                    title="删除"
+                    @click="handleDeleteZzjg(id, title)"
+                  ></a-button>
+                </Flex>
+              </template>
+            </a-dropdown>
+          </template>
+        </a-tree>
       </a-card>
-      <a-card :bordered="false">
+      <a-card title="组织人员" class="my-card my-card-has-title" :bordered="false">
-        <div class="table-page-search-wrapper">
+        <template #extra>
-          <a-form layout="inline">
+          <a-button type="primary" style="margin-right: 20px" @click="handleOpenAddZzryModal">新增</a-button>
-            <a-row :gutter="48">
+          <a-icon
-              <a-col :xl="8" :lg="8">
+            v-if="layoutRight === 'zzry'"
-                <a-radio-group v-model="queryParam.type" button-style="solid" @change="getList()">
+            type="fullscreen-exit"
-                  <a-radio-button value="staff"> 人员 </a-radio-button>
+            style="font-size: 32px"
-                  <a-radio-button value="weapon"> 装备 </a-radio-button>
+            @click="layoutRight = 'auto'"
-                </a-radio-group>
+          />
-              </a-col>
+          <a-icon v-else type="fullscreen" style="font-size: 32px" @click="layoutRight = 'zzry'" />
-              <a-col :xl="8" :lg="8">
+        </template>
-                <span class="table-page-search-submitButtons" style="float: right">
+        <AntQueryTable
-                  <a-button type="primary" @click="getList">查询</a-button>
+          ref="zzry-table"
-                  <a-button style="margin-left: 8px" @click="resetList">重置</a-button>
+          height="100%"
-                </span>
+          :queryConfig="zzry.queryConfig"
-              </a-col>
+          :tableConfig="zzry.tableConfig"
-              <a-col :xl="8" :lg="8">
+          :pageConfig="zzry.pageConfig"
-                <a-button type="primary" icon="plus" style="float: right" @click="handleAdd">新建</a-button>
+          :showTool="zzry.showTool"
-              </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">
+          <template #tablecell-action="{ record }">
-            <a @click="handleEdit(record)"> <a-icon type="form" /></a>
+            <a-button type="text-primary" icon="edit" @click="handleOpenEditZzryModal(record)"></a-button>
-            <!-- <a-divider type="vertical" />
+          </template>
-
+        </AntQueryTable>
-            <a-popconfirm
+      </a-card>
-              title="确定要删除该岗位吗？"
+      <a-card title="组织装备" class="my-card my-card-has-title" :bordered="false">
-              ok-text="确定"
+        <template #extra>
-              cancel-text="取消"
+          <a-button type="primary" style="margin-right: 20px" @click="handleOpenAddZzzbModal">新增</a-button>
-              @confirm="handleDelete(record)"
+          <a-icon
+            v-if="layoutRight === 'zzzb'"
+            type="fullscreen-exit"
+            style="font-size: 32px"
+            @click="layoutRight = 'auto'"
+          />
+          <a-icon v-else type="fullscreen" style="font-size: 32px" @click="layoutRight = 'zzzb'" />
+        </template>
+        <AntQueryTable
+          ref="zzzb-table"
+          height="100%"
+          :queryConfig="zzzb.queryConfig"
+          :tableConfig="zzzb.tableConfig"
+          :pageConfig="zzzb.pageConfig"
+          :showTool="zzzb.showTool"
         >
-              <a href="javascript:;"><a-icon type="delete" /></a>
+          <template #tablecell-action="{ record }">
-            </a-popconfirm> -->
+            <a-button type="text-primary" icon="edit" @click="handleOpenEditZzzbModal(record)"></a-button>
-          </span>
+          </template>
-        </a-table>
+        </AntQueryTable>
       </a-card>
     </Grid>
-    <h-modal
+    <AntFormModal
-      :title="AEModal.title"
+      :visible.sync="zzjgModal.visible"
-      :width="640"
+      :title="zzjgModal.title"
-      :visible="AEModal.visible"
+      :formItems="zzjgModal.formItems"
-      :destroyOnClose="true"
+      :formRules="zzjgModal.formRules"
-      @cancel="() => this.handleClose()"
+      :formData="zzjgModal.formData"
-      @ok="() => this.handleOk()"
+      :onSubmit="handleSubmitZzjg"
-      switch-fullscreen
+      @success="handleSubmitZzjgSuccess"
-      :fullscreen.sync="AEModal.fullscreen"
+    ></AntFormModal>
-    >
+    <AntFormModal
-      <a-spin :spinning="AEModal.spinning">
+      :visible.sync="zzryModal.visible"
-        <a-form-model
+      :title="zzryModal.title"
-          ref="form"
+      :formItems="zzryModal.formItems"
-          :model="AEModal.form"
+      :formRules="zzryModal.formRules"
-          :rules="AEModal[`${queryParam.type}Rules`]"
+      :formData="zzryModal.formData"
-          :label-col="AEModal.labelCol"
+      :onSubmit="handleSubmitZzry"
-          :wrapper-col="AEModal.wrapperCol"
+      @success="handleSubmitZzrySuccess"
-        >
+    ></AntFormModal>
-          <a-form-model-item v-for="item in formItems" :key="item.prop" v-bind="item">
+    <AntFormModal
-            <span v-if="item.customRender">{{ item.customRender(AEModal.form[item.prop]) }}</span>
+      :visible.sync="zzzbModal.visible"
-            <component
+      :title="zzzbModal.title"
-              v-else
+      :formItems="zzzbFormItems"
-              :is="item.component || 'a-input'"
+      :formRules="zzzbModal.formRules"
-              v-model="AEModal.form[item.prop]"
+      :formData="zzzbModal.formData"
-              v-bind="item.options"
+      :onSubmit="handleSubmitZzzb"
-              v-on="item.listeners"
+      @success="handleSubmitZzzbSuccess"
-            />
+    ></AntFormModal>
-          </a-form-model-item>
-        </a-form-model>
-      </a-spin>
-    </h-modal>
   </page-header-wrapper>
 </template>
 
@@ -90,97 +124,73 @@ export default {
   name: 'Zzllsjk',
   data() {
     return {
-      zzTree: [],
+      layoutRight: 'auto',
+      zzjg: {
+        treeData: [],
         selectedKeys: [],
-
+        expandedKeys: [],
-      queryParam: { id: '', type: 'staff' },
-      staffColumns: [
-        {
-          title: '#',
-          dataIndex: 'index',
-          customRender: (_, record, $index) => $index + 1,
-          align: 'center',
-          width: 80,
       },
-        {
+      zzjgModal: {
-          title: '岗位',
-          dataIndex: 'name',
-        },
-        {
-          title: '岗位数量',
-          dataIndex: 'number',
-        },
-        // {
-        //   title: '物资器材',
-        //   dataIndex: 'material',
-        // },
-        {
-          title: '操作',
-          width: 140,
-          dataIndex: 'action',
-          align: 'center',
-          scopedSlots: { customRender: 'action' },
-        },
-      ],
-      weaponColumns: [
-        {
-          title: '#',
-          dataIndex: 'index',
-          customRender: (_, record, $index) => $index + 1,
-          align: 'center',
-          width: 80,
-        },
-        {
-          title: '装备名称',
-          dataIndex: 'name',
-        },
-        {
-          title: '装备数量',
-          dataIndex: 'number',
-        },
-        {
-          title: '操作',
-          width: 140,
-          dataIndex: 'action',
-          align: 'center',
-          scopedSlots: { customRender: 'action' },
-        },
-      ],
-      loadData: [], // 加载数据方法 必须为 Promise 对象
-      loadingTable: false,
-
-      AEModal: {
-        title: '',
         visible: false,
-        editStatus: false,
+        title: '',
-        fullscreen: false,
+        mode: '',
-        spinning: false,
+        formItems: [
-        form: {},
+          {
-        staffRules: {
+            label: '上级组织',
-          typeId: [{ required: true, message: '请选择岗位！', trigger: 'change' }],
+            prop: 'parentId',
-          number: [{ required: true, message: '请输入岗位数量！', trigger: 'blur' }],
+            component: 'AntOriginTreeSelect',
+            options: {
+              dataSource: () =>
+                this.$http({
+                  url: '/tree/organization',
+                  method: 'get',
+                  params: { unittype: 1 },
+                }).then((res) => ({ data: [{ key: 0, title: '根组织' }].concat(res.data) })),
+              valueKey: 'key',
             },
-        weaponRules: {
-          weaponId: [{ required: true, message: '请选择装备！', trigger: 'change' }],
-          number: [{ required: true, message: '请输入装备数量！', trigger: 'blur' }],
           },
-        labelCol: { xs: { span: 24 }, sm: { span: 7 } },
+          {
-        wrapperCol: { xs: { span: 24 }, sm: { span: 13 } },
+            label: '标识编码',
+            prop: 'codeName',
           },
-    }
+          {
+            label: '组织名称',
+            prop: 'name',
           },
-  computed: {
+        ],
-    columns() {
+        formRules: {
-      return this[`${this.queryParam.type}Columns`]
+          codeName: [{ required: true, message: '请输入标识编码！', trigger: 'blur' }],
+          name: [{ required: true, message: '请输入组织名称！', trigger: 'blur' }],
+          unittype: [{ required: true, message: '请选择组织类型！', trigger: 'blur' }],
         },
-    typeMapLabel() {
+        formData: {},
-      return { staff: '人员', weapon: '装备' }[this.queryParam.type]
       },
-    formItems() {
+
-      const result = []
+      zzry: {
-      switch (this.queryParam.type) {
+        queryConfig: false,
-        case 'staff':
+        tableConfig: {
-          result.push(
+          table: {},
+          immediate: false,
+          query: () =>
+            this.$http({
+              url: `/baseData/fightPowerHierarchy/staff/${this.zzjg.selectedKeys[0]}`,
+              method: 'get',
+            }),
+          columns: [
+            { dataIndex: 'serial' },
+            { title: '岗位', dataIndex: 'name', width: 'auto', minWidth: 150 },
+            { title: '岗位数量', dataIndex: 'number', type: 'number', width: 'auto', minWidth: 150 },
+            { dataIndex: 'action' },
+          ],
+        },
+        pageConfig: false,
+        showTool: false,
+      },
+      zzryModal: {
+        visible: false,
+        title: '',
+        mode: '',
+        formItems: [
           {
             label: '岗位名称',
             prop: 'typeId',
@@ -192,22 +202,44 @@ export default {
                   method: 'get',
                 }),
               labelKey: 'name',
-                readonly: this.AEModal.editStatus,
+              readonly: false,
             },
           },
-            { label: '岗位数量', prop: 'number' }
+          { label: '岗位数量', prop: 'number' },
-            // { label: '物资器材', prop: 'material' }
+        ],
-          )
+        formRules: {
-          break
+          typeId: [{ required: true, message: '请选择岗位！', trigger: 'change' }],
-        case 'weapon':
+          number: [{ required: true, message: '请输入岗位数量！', trigger: 'blur' }],
-          result.push(
+        },
-            this.AEModal.editStatus
+        formData: {},
-              ? {
+      },
-                  label: '装备名称',
+
-                  prop: 'name',
+      zzzb: {
-                  customRender: (v) => v,
+        queryConfig: false,
-                }
+        tableConfig: {
-              : {
+          table: {},
+          immediate: false,
+          query: () =>
+            this.$http({
+              url: `/baseData/fightPowerHierarchy/weapon/${this.zzjg.selectedKeys[0]}`,
+              method: 'get',
+            }),
+          columns: [
+            { dataIndex: 'serial' },
+            { title: '装备名称', dataIndex: 'name', width: 'auto', minWidth: 150 },
+            { title: '装备数量', dataIndex: 'number', type: 'number', width: 'auto', minWidth: 150 },
+            { dataIndex: 'action' },
+          ],
+        },
+        pageConfig: false,
+        showTool: false,
+      },
+      zzzbModal: {
+        visible: false,
+        title: '',
+        mode: '',
+        formItems: [
+          {
             label: '装备名称',
             prop: 'weaponId',
             component: 'AntOriginTreeSelect',
@@ -217,16 +249,46 @@ export default {
                   url: '/tree/armament',
                   method: 'get',
                 }),
-                    readonly: this.AEModal.editStatus,
+              readonly: false,
             },
           },
-            { label: '装备数量', prop: 'number' }
+          { label: '装备数量', prop: 'number' },
-          )
+        ],
-          break
+        formRules: {
-        default:
+          weaponId: [{ required: true, message: '请选择装备！', trigger: 'change' }],
-          break
+          number: [{ required: true, message: '请输入装备数量！', trigger: 'blur' }],
+        },
+        formData: {},
+      },
     }
-      return result
+  },
+  computed: {
+    gridRows() {
+      return {
+        auto: [1, 1],
+        zzry: [1, '56px'],
+        zzzb: ['56px', 1],
+      }[this.layoutRight]
+    },
+    zzzbFormItems() {
+      return [
+        this.zzzbModal.mode === 'add'
+          ? {
+              label: '装备名称',
+              prop: 'weaponId',
+              component: 'AntOriginTreeSelect',
+              options: {
+                dataSource: () =>
+                  this.$http({
+                    url: '/tree/armament',
+                    method: 'get',
+                  }),
+                readonly: false,
+              },
+            }
+          : { label: '装备名称', prop: 'name', customRender: (v) => v },
+        { label: '装备数量', prop: 'number' },
+      ]
     },
   },
   created() {
@@ -240,82 +302,116 @@ export default {
           method: 'get',
           params: { unittype: 1 },
         })
-        this.zzTree = res.data
+        this.zzjg.treeData = res.data
-        this.selectedKeys = [this.zzTree[0].key]
+        this.zzjg.selectedKeys = [this.zzjg.treeData[0].key]
-        this.getList()
+        this.handleChangeZzjgSelected()
       } catch (error) {
         console.log(error)
       }
     },
-    resetList() {
+    handleChangeZzjgSelected() {
-      this.getList()
+      this.$refs['zzry-table'].commitAction('reload')
+      this.$refs['zzzb-table'].commitAction('reload')
     },
-    async getList(parameter = {}) {
+    handleOpenAddZzjgModal(parentId) {
+      this.zzjgModal.title = '新建作战力量'
+      this.zzjgModal.mode = 'add'
+      this.zzjgModal.formData = { unittype: 1, parentId }
+      this.zzjgModal.visible = true
+    },
+    async handleOpenEditZzjgModal(id) {
       try {
-        this.loadingTable = true
         const res = await this.$http({
-          url: `/baseData/fightPowerHierarchy/${this.queryParam.type}/${this.selectedKeys[0]}`,
+          url: `/baseData/fightPowerHierarchy/${id}`,
           method: 'get',
         })
-        this.loadData = res.data
+        this.zzjgModal.title = '编辑作战力量'
-      } catch (error) {
+        this.zzjgModal.mode = 'edit'
-        console.log(error)
+        this.zzjgModal.formData = res.data
-      } finally {
+        this.zzjgModal.visible = true
-        this.loadingTable = false
-      }
-    },
-    handleAdd() {
-      this.AEModal.form = { parentId: this.selectedKeys[0] }
-      this.AEModal.title = `添加${this.typeMapLabel}`
-      this.AEModal.editStatus = false
-      this.AEModal.visible = true
-    },
-    async handleEdit(record) {
-      try {
-        this.AEModal.form = { ...record }
-        this.AEModal.title = `编辑${this.typeMapLabel}`
-        this.AEModal.editStatus = true
-        this.AEModal.visible = true
       } catch (error) {
         console.log(error)
         this.$message.error('未知错误，请重试')
       }
     },
-    handleClose() {
+    handleSubmitZzjg(formData) {
-      this.AEModal.visible = false
+      return this.$http({
-      this.AEModal.form = {}
+        url: `/baseData/fightPowerHierarchy/save`,
-    },
-    async handleOk() {
-      try {
-        await this.$refs.form.validate()
-        const params = { ...this.AEModal.form }
-        await this.$http({
-          url: `/baseData/fightPowerHierarchy/${this.queryParam.type}/save`,
         method: 'post',
-          data: params,
+        data: formData,
       })
-        this.$message.success(`${this.AEModal.title}成功!`)
-        this.getList()
-        this.handleClose()
-      } catch (error) {
-        console.log(error)
-      }
     },
-    async handleDelete(record) {
+    handleSubmitZzjgSuccess() {
+      this.getZzTree()
+    },
+    async handleDeleteZzjg(id, title) {
       try {
+        await this.$confirm({ content: `确定删除作战力量-${title}？` })
         await this.$http({
-          url: `/baseData/scenario/remove/${record.id}`,
+          url: `/baseData/fightPowerHierarchy/remove/${id}`,
           method: 'get',
         })
-        this.$message.success('删除角色成功')
+        this.$message.success('删除成功')
-        this.getList()
+        this.getZzTree()
-      } catch (error) {
+      } catch (error) {}
-        console.log(error)
+    },
-        this.$message.error('删除角色失败')
+
-      }
+    handleOpenAddZzryModal() {
+      this.zzryModal.title = '新建组织人员'
+      this.zzryModal.mode = 'add'
+      this.zzryModal.formData = { parentId: this.zzjg.selectedKeys[0] }
+      this.zzryModal.formItems[0].options.readonly = false
+      this.zzryModal.visible = true
+    },
+    handleOpenEditZzryModal(record) {
+      this.zzryModal.title = `编辑组织人员`
+      this.zzryModal.mode = 'edit'
+      this.zzryModal.formData = { ...record }
+      this.zzryModal.formItems[0].options.readonly = true
+      this.zzryModal.visible = true
+    },
+    handleSubmitZzry(formData) {
+      return this.$http({
+        url: `/baseData/fightPowerHierarchy/staff/save`,
+        method: 'post',
+        data: formData,
+      })
+    },
+    handleSubmitZzrySuccess() {
+      this.$refs['zzry-table'].commitAction('query')
+    },
+
+    handleOpenAddZzzbModal() {
+      this.zzzbModal.title = '新建组织装备'
+      this.zzzbModal.mode = 'add'
+      this.zzzbModal.formData = { parentId: this.zzjg.selectedKeys[0] }
+      this.zzzbModal.visible = true
+    },
+    handleOpenEditZzzbModal(record) {
+      this.zzzbModal.title = `编辑组织装备`
+      this.zzzbModal.mode = 'edit'
+      this.zzzbModal.formData = { ...record }
+      this.zzzbModal.visible = true
+    },
+    handleSubmitZzzb(formData) {
+      return this.$http({
+        url: `/baseData/fightPowerHierarchy/weapon/save`,
+        method: 'post',
+        data: formData,
+      })
+    },
+    handleSubmitZzzbSuccess() {
+      this.$refs['zzzb-table'].commitAction('query')
     },
   },
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.contextmenu-zz {
+  padding: 5px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 0 5px #aaaaaa;
+}
+</style>