组织数据库，作战力量数据库，保障力量数据库，进程数据库

src/components/Common/Form/AntOriginSelect.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <span v-if="readonly">{{ getText }}</span>
+    <a-select
+      v-else
+      v-model="_value"
+      :options="options"
+      :mode="selectMode"
+      :filter-option="filterOption"
+      :style="{ width, minWidth: '100px' }"
+      v-bind="selectConf"
+      v-on="getListeners"
+      @change="handleChange"
+      @dropdownVisibleChange="getOptions"
+    />
+  </div>
+</template>
+
+<script>
+import { defaultSelectConfig } from './defaultSettings'
+
+export default {
+  props: {
+    value: { validator: () => true, required: true },
+    dataSource: { type: Function, required: true },
+    valueKey: { type: String, default: 'id' },
+    labelKey: { type: String, default: 'title' },
+    readonly: { type: Boolean, default: false },
+    width: { validator: () => true, default: '100%' },
+    multiple: { type: Boolean, default: false },
+    immediate: { type: Boolean, default: true },
+    allowEmpty: { type: [Boolean, Array], default: true },
+  },
+  data () {
+    return {
+      originData: [],
+    }
+  },
+  computed: {
+    _value: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      },
+    },
+    getListeners () {
+      const listeners = {}
+      for (const key in this.$listeners) {
+        if (key === 'change') continue
+        listeners[key] = this.$listeners[key]
+      }
+      return listeners
+    },
+    selectMode () {
+      return this.multiple ? 'multiple' : ''
+    },
+    options () {
+      return this.originData.map((o) => ({
+        value: o[this.valueKey],
+        label: o[this.labelKey],
+        disabled: o.disabled,
+      }))
+    },
+    getText () {
+      if (this.multiple) {
+        return (this._value || []).map((v) => this.options.find((o) => o.value === v)?.label).join(',')
+      } else {
+        return this.options.find((o) => o.value === this._value)?.label
+      }
+    },
+    getOriginItem () {
+      return (this._value || []).map((v) => this.originData.find((d) => d[this.valueKey] === v))
+    },
+    selectConf () {
+      return {
+        ...defaultSelectConfig,
+        ...this.$attrs,
+      }
+    },
+  },
+  created () {
+    if (this.immediate) {
+      this.getOptions(true)
+    }
+  },
+  methods: {
+    async getOptions (visible) {
+      if (!visible) return
+      try {
+        const res = await this.dataSource()
+        this.originData = (res.data || []).filter((d) => {
+          if (typeof this.allowEmpty === 'boolean') {
+            return this.allowEmpty || Boolean(d[this.labelKey])
+          }
+          return Boolean(d[this.labelKey]) || this.allowEmpty.includes(d[this.labelKey])
+        })
+      } catch (error) {
+        this.originData = []
+      }
+    },
+    filterOption (input, selectVm) {
+      return selectVm.componentOptions.children[0]?.text.toLowerCase().includes(input.toLowerCase()) || false
+    },
+    handleChange (v) {
+      this.$nextTick(() => {
+        this.$emit(
+          'change',
+          v,
+          this.multiple
+            ? (v || []).map((vi) => this.options.find((o) => o.value === vi)?.label)
+            : this.options.find((o) => o.value === v)?.label,
+          this.multiple
+            ? (v || []).map((vi) => this.originData.find((o) => o[this.valueKey] === vi))
+            : this.originData.find((d) => d[this.valueKey] === v)
+        )
+      })
+    },
+    commitAction (action, payload = true) {
+      switch (action) {
+        case 'get':
+          this.getOptions(payload)
+          break
+        case 'refresh':
+          this.originData = []
+          this.getOptions(payload)
+          break
+        case 'clear':
+          this.originData = []
+          break
+      }
+    },
+  },
+}
+</script>
+
+<style></style>

src/components/Common/Form/AntOriginTreeSelect.vue

@@ -0,0 +1,183 @@
+<template>
+  <div>
+    <span v-if="readonly">{{ getText }}</span>
+    <a-tree-select
+      v-else
+      v-model="_value"
+      :tree-data="treeData"
+      :replaceFields="{ value: valueKey, title: labelKey }"
+      :filterTreeNode="filterTreeConfig"
+      :style="{ width, minWidth: '100px' }"
+      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+      treeDefaultExpandAll
+      v-bind="selectConf"
+      v-on="getListeners"
+      @change="handleChange"
+      @focus="getTreeData"
+    >
+    </a-tree-select>
+  </div>
+</template>
+
+<script>
+import { defaultSelectConfig } from './defaultSettings'
+
+export default {
+  props: {
+    value: { validator: () => true, required: true },
+    dataSource: { type: Function, required: true },
+    valueKey: { type: String, default: 'value' },
+    labelKey: { type: String, default: 'title' },
+    childrenKey: { type: String, default: 'children' },
+    readonly: { type: Boolean, default: false },
+    width: { type: String, default: '' },
+    immediate: { type: Boolean, default: true },
+  },
+  data() {
+    return {
+      treeData: [],
+    }
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      },
+    },
+    getItem() {
+      console.log('----', this.treeData, this._value)
+      return this.findInTree(this.treeData, this._value)
+    },
+    getText() {
+      console.log('----', this.getItem)
+      return this.getItem && this.getItem[this.labelKey]
+    },
+    getListeners() {
+      const listeners = {}
+      for (const key in this.$listeners) {
+        if (key === 'change') continue
+        listeners[key] = this.$listeners[key]
+      }
+      return listeners
+    },
+    selectConf() {
+      return {
+        ...defaultSelectConfig,
+        treeDefaultExpandAll: true,
+        ...this.$attrs,
+      }
+    },
+  },
+  created() {
+    if (this.immediate) {
+      this.getTreeData(true)
+    }
+  },
+  methods: {
+    async getTreeData(visible) {
+      if (!visible) return
+      try {
+        const res = await this.dataSource()
+        this.treeData = res.data
+      } catch (error) {
+        this.treeData = []
+      }
+    },
+    filterTreeConfig(input, treeNode) {
+      return treeNode.data.props.title.includes(input)
+    },
+    findInTree(list, value) {
+      let res = null
+      for (let index = 0; index < list.length; index++) {
+        const item = list[index]
+        if (item[this.valueKey] === value) {
+          res = item
+          break
+        }
+        if (item[this.childrenKey]) {
+          res = this.findInTree(item[this.childrenKey], value)
+        }
+        if (res !== null) {
+          break
+        }
+      }
+      return res
+    },
+    getFullPathInTree(list, target, path = [], res = [], level = 0) {
+      for (let index = 0; index < list.length; index++) {
+        const item = list[index]
+        path[level] = item[this.valueKey]
+        if (item[this.valueKey] === target) {
+          res[0] = item
+        } else if (item[this.childrenKey]) {
+          this.getFullPathInTree(item[this.childrenKey], target, path, res, level + 1)
+          if (!res[0]) {
+            path.length = level + 1
+          }
+        }
+        if (res[0]) {
+          break
+        }
+        path[level] = ''
+      }
+      if (!res[0]) {
+        path.length = 0
+      }
+      return path
+    },
+    getFullDataInTree(list, target, path = [], res = [], level = 0) {
+      for (let index = 0; index < list.length; index++) {
+        const item = list[index]
+        path[level] = item
+        if (item[this.valueKey] === target) {
+          res[0] = item
+        } else if (item[this.childrenKey]) {
+          this.getFullDataInTree(item[this.childrenKey], target, path, res, level + 1)
+          if (!res[0]) {
+            path.length = level + 1
+          }
+        }
+        if (res[0]) {
+          break
+        }
+        path[level] = null
+      }
+      if (!res[0]) {
+        path.length = 0
+      }
+      return path
+    },
+    handleChange(v, [t]) {
+      this.$nextTick(() => {
+        this.$emit(
+          'change',
+          v,
+          t,
+          this.findInTree(this.treeData, v),
+          this.getFullPathInTree(this.treeData, v),
+          this.getFullDataInTree(this.treeData, v)
+        )
+      })
+    },
+    commitAction(action, payload = true) {
+      switch (action) {
+        case 'get':
+          this.getTreeData(payload)
+          break
+        case 'refresh':
+          this.treeData = []
+          this.getTreeData(payload)
+          break
+        case 'clear':
+          this.treeData = []
+          break
+      }
+    },
+  },
+}
+</script>
+
+<style></style>

src/components/Common/Form/defaultSettings.js

@@ -0,0 +1,10 @@
+export const defaultSelectConfig = {
+  allowClear: true,
+  showSearch: true,
+}
+
+export const defaultConfig = {
+  modal: { width: 900 },
+  layout: { span: 24, label: 6, input: 15 },
+  form: { layout: 'horizontal', labelAlign: 'right', colon: true },
+}

src/components/Common/register.js

@@ -1,5 +1,8 @@
 import ModuleWrapper from './Layout/ModuleWrapper.vue'
 
+import AntOriginSelect from './Form/AntOriginSelect.vue'
+import AntOriginTreeSelect from './Form/AntOriginTreeSelect.vue'
+
 import GridBox from './Directives/GridBox'
 import Flex from './Directives/Flex'
 import Loading from './Directives/Loading'
@@ -10,6 +13,9 @@ export default {
   install(Vue) {
     Vue.component('ModuleWrapper', ModuleWrapper)
 
+    Vue.component('AntOriginSelect', AntOriginSelect)
+    Vue.component('AntOriginTreeSelect', AntOriginTreeSelect)
+
     Vue.directive('grid-box', GridBox)
     Vue.directive('flex', Flex)
     Vue.directive('loading', Loading)

src/views/simulationScene/database/bzllsjk.vue

@@ -1,9 +1,322 @@
 <template>
-  <div>bzllsjk</div>
+  <page-header-wrapper>
+    <div v-grid-box="{ columns: ['400px', 1] }">
+      <a-card :bordered="false">
+        <a-tree :treeData="zzTree" :selectedKeys.sync="selectedKeys" @select="getList()"> </a-tree>
+      </a-card>
+      <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-radio-group v-model="queryParam.type" button-style="solid" @change="getList()">
+                  <a-radio-button value="staff"> 人员 </a-radio-button>
+                  <a-radio-button value="weapon"> 装备 </a-radio-button>
+                </a-radio-group>
+              </a-col>
+              <a-col :xl="8" :lg="8">
+                <span class="table-page-search-submitButtons" style="float: right">
+                  <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 @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>
+    </div>
+    <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[`${queryParam.type}Rules`]"
+          :label-col="AEModal.labelCol"
+          :wrapper-col="AEModal.wrapperCol"
+        >
+          <a-form-model-item v-for="item in formItems" :key="item.prop" v-bind="item">
+            <span v-if="item.customRender">{{ item.customRender(AEModal.form[item.prop]) }}</span>
+            <component
+              v-else
+              :is="item.component || 'a-input'"
+              v-model="AEModal.form[item.prop]"
+              v-bind="item.options"
+              v-on="item.listeners"
+            />
+          </a-form-model-item>
+        </a-form-model>
+      </a-spin>
+    </h-modal>
+  </page-header-wrapper>
 </template>
 
 <script>
-export default {}
+export default {
+  name: 'Bzllsjk',
+  data() {
+    return {
+      zzTree: [],
+      selectedKeys: [],
+
+      queryParam: { id: '', type: 'staff' },
+      staffColumns: [
+        {
+          title: '#',
+          dataIndex: 'index',
+          customRender: (_, record, $index) => $index + 1,
+          align: 'center',
+          width: 80,
+        },
+        {
+          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,
+        fullscreen: false,
+        spinning: false,
+        form: {},
+        staffRules: {
+          typeId: [{ required: true, message: '请选择岗位！', trigger: 'change' }],
+          number: [{ required: true, message: '请输入岗位数量！', trigger: 'blur' }],
+        },
+        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 } },
+      },
+    }
+  },
+  computed: {
+    columns() {
+      return this[`${this.queryParam.type}Columns`]
+    },
+    typeMapLabel() {
+      return { staff: '人员', weapon: '装备' }[this.queryParam.type]
+    },
+    formItems() {
+      const result = []
+      switch (this.queryParam.type) {
+        case 'staff':
+          result.push(
+            {
+              label: '岗位名称',
+              prop: 'typeId',
+              component: 'AntOriginSelect',
+              options: {
+                dataSource: () =>
+                  this.$http({
+                    url: '/unit/getAll',
+                    method: 'get',
+                  }),
+                labelKey: 'name',
+                readonly: this.AEModal.editStatus,
+              },
+            },
+            { label: '岗位数量', prop: 'number' }
+            // { label: '物资器材', prop: 'material' }
+          )
+          break
+        case 'weapon':
+          result.push(
+            this.AEModal.editStatus
+              ? {
+                  label: '装备名称',
+                  prop: 'name',
+                  customRender: (v) => v,
+                }
+              : {
+                  label: '装备名称',
+                  prop: 'weaponId',
+                  component: 'AntOriginTreeSelect',
+                  options: {
+                    dataSource: () =>
+                      this.$http({
+                        url: '/tree/armament',
+                        method: 'get',
+                      }),
+                    readonly: this.AEModal.editStatus,
+                  },
+                },
+            { label: '装备数量', prop: 'number' }
+          )
+          break
+        default:
+          break
+      }
+      return result
+    },
+  },
+  mounted() {
+    this.getZzTree()
+  },
+  methods: {
+    async getZzTree() {
+      try {
+        const res = await this.$http({
+          url: `/tree/organization`,
+          method: 'get',
+          params: { unittype: 2 },
+        })
+        this.zzTree = res.data
+        this.selectedKeys = [this.zzTree[0].key]
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    resetList() {
+      this.getList()
+    },
+    async getList(parameter = {}) {
+      try {
+        this.loadingTable = true
+        const res = await this.$http({
+          url: `/baseData/fightPowerHierarchy/${this.queryParam.type}/${this.selectedKeys[0]}`,
+          method: 'get',
+        })
+        this.loadData = res.data
+      } catch (error) {
+        console.log(error)
+      } finally {
+        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() {
+      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/fightPowerHierarchy/${this.queryParam.type}/save`,
+          method: 'post',
+          data: params,
+        })
+        this.$message.success(`${this.AEModal.title}成功!`)
+        this.getList()
+        this.handleClose()
+      } catch (error) {
+        console.log(error)
+        this.$message.error(error.message || '未知错误，请重试')
+      }
+    },
+    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>

src/views/simulationScene/database/fasjk.vue

@@ -102,17 +102,17 @@ export default {
           width: 80,
         },
         {
-          title: '分队',
+          title: '分队名称',
           dataIndex: '0',
           align: 'left',
         },
         {
-          title: '方案类型',
+          title: '方案名称',
           dataIndex: '1',
           align: 'left',
         },
         {
-          title: '方案目标',
+          title: '方案类型',
           dataIndex: '2',
           align: 'left',
           ellipsis: true,

src/views/simulationScene/database/jcsjk.vue

@@ -102,45 +102,20 @@ export default {
           width: 80,
         },
         {
-          title: '分队',
+          title: '任务进程名称',
           dataIndex: '0',
           align: 'left',
         },
-        {
-          title: '方案类型',
-          dataIndex: '1',
-          align: 'left',
-        },
-        {
-          title: '方案目标',
-          dataIndex: '2',
-          align: 'left',
-          ellipsis: true,
-        },
         {
           title: '开始时间',
           width: 160,
-          dataIndex: '3',
+          dataIndex: '1',
           align: 'center',
         },
         {
-          title: '结束时间',
+          title: '失效时间',
           width: 160,
-          dataIndex: '4',
+          dataIndex: '2',
-          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',
         },
       ],
@@ -194,7 +169,7 @@ export default {
       try {
         this.loadingTable = true
         const res = await this.$http({
-          url: '/baseData/scenario/schemeList',
+          url: '/baseData/scenario/taskList',
           method: 'get',
           params: { ...parameter, ...this.queryParam },
         })

src/views/simulationScene/database/xdsjk.vue

@@ -200,7 +200,7 @@ export default {
           method: 'post',
           data: params,
         })
-        this.$message.success(this.AEModal.editStatus ? '编辑想定成功!' : '添加想定成功!')
+        this.$message.success(`${this.AEModal.title}成功`)
         this.getList()
         this.handleClose()
       } catch (error) {

src/views/simulationScene/database/zzllsjk.vue

@@ -9,18 +9,20 @@
           <a-form layout="inline">
             <a-row :gutter="48">
               <a-col :xl="8" :lg="8">
-                <a-radio-group v-model="queryParam.type" button-style="solid" @change="handleChangeType">
+                <a-radio-group v-model="queryParam.type" button-style="solid" @change="getList()">
                   <a-radio-button value="staff"> 人员 </a-radio-button>
                   <a-radio-button value="weapon"> 装备 </a-radio-button>
                 </a-radio-group>
               </a-col>
-              <a-col :xl="8" :lg="8"> </a-col>
               <a-col :xl="8" :lg="8">
                 <span class="table-page-search-submitButtons" style="float: right">
                   <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>
@@ -63,12 +65,19 @@
         <a-form-model
           ref="form"
           :model="AEModal.form"
-          :rules="AEModal.rules"
+          :rules="AEModal[`${queryParam.type}Rules`]"
           :label-col="AEModal.labelCol"
           :wrapper-col="AEModal.wrapperCol"
         >
-          <a-form-model-item v-for="item in AEModal.formItems" :key="item.prop" v-bind="item">
+          <a-form-model-item v-for="item in formItems" :key="item.prop" v-bind="item">
-            <a-input v-model="AEModal.form[item.prop]" />
+            <span v-if="item.customRender">{{ item.customRender(AEModal.form[item.prop]) }}</span>
+            <component
+              v-else
+              :is="item.component || 'a-input'"
+              v-model="AEModal.form[item.prop]"
+              v-bind="item.options"
+              v-on="item.listeners"
+            />
           </a-form-model-item>
         </a-form-model>
       </a-spin>
@@ -85,7 +94,7 @@ export default {
       selectedKeys: [],
 
       queryParam: { id: '', type: 'staff' },
-      columns: [
+      staffColumns: [
         {
           title: '#',
           dataIndex: 'index',
@@ -101,9 +110,33 @@ export default {
           title: '岗位数量',
           dataIndex: 'number',
         },
+        // {
+        //   title: '物资器材',
+        //   dataIndex: 'material',
+        // },
         {
-          title: '物资器材',
+          title: '操作',
-          dataIndex: 'material',
+          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: '操作',
@@ -123,18 +156,13 @@ export default {
         fullscreen: false,
         spinning: false,
         form: {},
-        formItems: [
+        staffRules: {
-          {
+          typeId: [{ required: true, message: '请选择岗位！', trigger: 'change' }],
-            label: '岗位名称',
+          number: [{ required: true, message: '请输入岗位数量！', trigger: 'blur' }],
-            prop: 'name',
+        },
-          },
+        weaponRules: {
-          {
+          weaponId: [{ required: true, message: '请选择装备！', trigger: 'change' }],
-            label: '岗位数量',
+          number: [{ required: true, message: '请输入装备数量！', trigger: 'blur' }],
-            prop: 'number',
-          },
-        ],
-        rules: {
-          name: [{ required: true, message: '请输入岗位名称！', trigger: 'blur' }],
         },
         labelCol: { xs: { span: 24 }, sm: { span: 7 } },
         wrapperCol: { xs: { span: 24 }, sm: { span: 13 } },
@@ -142,9 +170,64 @@ export default {
     }
   },
   computed: {
+    columns() {
+      return this[`${this.queryParam.type}Columns`]
+    },
     typeMapLabel() {
       return { staff: '人员', weapon: '装备' }[this.queryParam.type]
     },
+    formItems() {
+      const result = []
+      switch (this.queryParam.type) {
+        case 'staff':
+          result.push(
+            {
+              label: '岗位名称',
+              prop: 'typeId',
+              component: 'AntOriginSelect',
+              options: {
+                dataSource: () =>
+                  this.$http({
+                    url: '/unit/getAll',
+                    method: 'get',
+                  }),
+                labelKey: 'name',
+                readonly: this.AEModal.editStatus,
+              },
+            },
+            { label: '岗位数量', prop: 'number' }
+            // { label: '物资器材', prop: 'material' }
+          )
+          break
+        case 'weapon':
+          result.push(
+            this.AEModal.editStatus
+              ? {
+                  label: '装备名称',
+                  prop: 'name',
+                  customRender: (v) => v,
+                }
+              : {
+                  label: '装备名称',
+                  prop: 'weaponId',
+                  component: 'AntOriginTreeSelect',
+                  options: {
+                    dataSource: () =>
+                      this.$http({
+                        url: '/tree/armament',
+                        method: 'get',
+                      }),
+                    readonly: this.AEModal.editStatus,
+                  },
+                },
+            { label: '装备数量', prop: 'number' }
+          )
+          break
+        default:
+          break
+      }
+      return result
+    },
   },
   mounted() {
     this.getZzTree()
@@ -155,7 +238,7 @@ export default {
         const res = await this.$http({
           url: `/tree/organization`,
           method: 'get',
-          params: { unitype: 1 },
+          params: { unittype: 1 },
         })
         this.zzTree = res.data
         this.selectedKeys = [this.zzTree[0].key]
@@ -164,27 +247,6 @@ export default {
         console.log(error)
       }
     },
-    handleChangeType(e) {
-      switch (e.target.value) {
-        case 'staff':
-          this.columns[1].title = '岗位'
-          this.columns[2].title = '岗位数量'
-          this.columns[3].title = '物资器材'
-          this.columns[3].dataIndex = 'material'
-          this.AEModal.formItems[0].label = '岗位名称'
-          this.AEModal.formItems[1].label = '岗位数量'
-          break
-        case 'weapon':
-          this.columns[1].title = '装备名称'
-          this.columns[2].title = '装备数量'
-          this.columns[3].title = '装备类型'
-          this.columns[3].dataIndex = 'type'
-          this.AEModal.formItems[0].label = '装备名称'
-          this.AEModal.formItems[1].label = '装备数量'
-          break
-      }
-      this.getList()
-    },
     resetList() {
       this.getList()
     },
@@ -203,7 +265,7 @@ export default {
       }
     },
     handleAdd() {
-      this.AEModal.form = {}
+      this.AEModal.form = { parentId: this.selectedKeys[0] }
       this.AEModal.title = `添加${this.typeMapLabel}`
       this.AEModal.editStatus = false
       this.AEModal.visible = true

src/views/simulationScene/database/zzsjk.vue

@@ -0,0 +1,267 @@
+<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">
+              <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-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="key"
+        size="small"
+        :columns="columns"
+        :dataSource="loadData"
+        :pagination="false"
+        :loading="loadingTable"
+      >
+        <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 v-for="item in AEModal.formItems.concat(unittypeFormItem)" :key="item.prop" v-bind="item">
+            <span v-if="item.customRender">{{ item.customRender(AEModal.form[item.prop]) }}</span>
+            <component
+              v-else
+              :is="item.component || 'a-input'"
+              v-model="AEModal.form[item.prop]"
+              v-bind="item.options"
+              v-on="item.listeners"
+            />
+          </a-form-model-item>
+        </a-form-model>
+      </a-spin>
+    </h-modal>
+  </page-header-wrapper>
+</template>
+
+<script>
+export default {
+  name: 'Zzsjk',
+  data() {
+    return {
+      queryParam: {}, // 查询参数
+      columns: [
+        {
+          title: '#',
+          dataIndex: 'key',
+          align: 'center',
+          width: 80,
+        },
+        {
+          title: '组织名称',
+          align: 'left',
+          dataIndex: 'title',
+          ellipsis: true,
+        },
+        {
+          title: '组织类型',
+          align: 'left',
+          dataIndex: 'unittype',
+          customRender: (v, record) => {
+            return { 1: '作战力量', 2: '保障力量' }[record.data.unittype]
+          },
+        },
+        {
+          title: '操作',
+          width: 140,
+          dataIndex: 'action',
+          align: 'center',
+          scopedSlots: { customRender: 'action' },
+        },
+      ],
+      loadData: [], // 加载数据方法 必须为 Promise 对象
+      loadingTable: false,
+
+      AEModal: {
+        title: '',
+        visible: false,
+        editStatus: false,
+        fullscreen: false,
+        spinning: false,
+        form: {},
+        formItems: [
+          {
+            label: '上级组织',
+            prop: 'parentId',
+            component: 'AntOriginTreeSelect',
+            options: {
+              dataSource: () =>
+                this.$http({
+                  url: '/tree/organization',
+                  method: 'get',
+                }).then((res) => ({ data: [{ key: 0, title: '根组织' }].concat(res.data) })),
+              valueKey: 'key',
+            },
+            listeners: {
+              change: (v, t, record) => {
+                if (v === 0) {
+                  this.$set(this.AEModal.form, 'unittype', '')
+                } else {
+                  this.$set(this.AEModal.form, 'unittype', record.data.unittype)
+                }
+              },
+            },
+          },
+          {
+            label: '标识编码',
+            prop: 'codeName',
+          },
+          {
+            label: '组织名称',
+            prop: 'name',
+          },
+        ],
+        rules: {
+          codeName: [{ required: true, message: '请输入标识编码！', trigger: 'blur' }],
+          name: [{ required: true, message: '请输入组织名称！', trigger: 'blur' }],
+          unittype: [{ required: true, message: '请选择组织类型！', trigger: 'blur' }],
+        },
+        labelCol: { xs: { span: 24 }, sm: { span: 7 } },
+        wrapperCol: { xs: { span: 24 }, sm: { span: 13 } },
+      },
+    }
+  },
+  computed: {
+    unittypeFormItem() {
+      return this.AEModal.form.parentId === 0
+        ? [
+            {
+              label: '组织类型',
+              prop: 'unittype',
+              component: 'a-radio-group',
+              options: {
+                options: [
+                  { label: '作战力量', value: 1 },
+                  { label: '保障力量', value: 2 },
+                ],
+              },
+            },
+          ]
+        : [
+            {
+              label: '组织类型',
+              prop: 'unittype',
+              customRender: (v) => ({ 1: '作战力量', 2: '保障力量' }[v]),
+            },
+          ]
+    },
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    resetList() {
+      this.queryParam = {}
+      this.getList()
+    },
+    async getList(parameter = {}) {
+      try {
+        this.loadingTable = true
+        const res = await this.$http({
+          url: '/tree/organization',
+          method: 'get',
+          params: { ...parameter, ...this.queryParam },
+        })
+        this.loadData = res.data
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.loadingTable = false
+      }
+    },
+    handleAdd() {
+      this.AEModal.form = { parentId: 0 }
+      this.AEModal.title = '添加组织'
+      this.AEModal.editStatus = false
+      this.AEModal.visible = true
+    },
+    async handleEdit(record) {
+      try {
+        const res = await this.$http({
+          url: `/baseData/fightPowerHierarchy/${record.key}`,
+          method: 'get',
+        })
+        this.AEModal.form = res.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/fightPowerHierarchy/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/fightPowerHierarchy/remove/${record.key}`,
+          method: 'get',
+        })
+        this.$message.success('删除组织成功')
+        this.getList()
+      } catch (error) {
+        console.log(error)
+        this.$message.error('删除组织失败')
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped></style>