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

<template>
  <page-header-wrapper>
    <Grid :columns="['400px', 1]" :rows="gridRows">
      <a-card title="组织架构-作战力量" class="my-card my-card-has-title" :bordered="false" style="grid-row: 1 / 4">
        <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 title="组织人员" class="my-card my-card-has-title" :bordered="false">
        <template #extra>
          <a-button type="primary" style="margin-right: 20px" @click="handleOpenAddZzryModal">新增</a-button>
          <a-icon
            v-if="layoutRight === 'zzry'"
            type="fullscreen-exit"
            style="font-size: 32px"
            @click="layoutRight = 'auto'"
          />
          <a-icon v-else type="fullscreen" style="font-size: 32px" @click="layoutRight = 'zzry'" />
        </template>
        <AntQueryTable
          ref="zzry-table"
          height="100%"
          :queryConfig="zzry.queryConfig"
          :tableConfig="zzry.tableConfig"
          :pageConfig="zzry.pageConfig"
          :showTool="zzry.showTool"
        >
          <template #tablecell-action="{ record }">
            <a-button type="text-primary" icon="edit" @click="handleOpenEditZzryModal(record)"></a-button>
          </template>
        </AntQueryTable>
      </a-card>
      <a-card title="组织装备" class="my-card my-card-has-title" :bordered="false">
        <template #extra>
          <a-button type="primary" style="margin-right: 20px" @click="handleOpenAddZzzbModal">新增</a-button>
          <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"
        >
          <template #tablecell-action="{ record }">
            <a-button type="text-primary" icon="edit" @click="handleOpenEditZzzbModal(record)"></a-button>
          </template>
        </AntQueryTable>
      </a-card>
      <!-- 组织物资卡片 -->
      <a-card title="组织物资" class="my-card my-card-has-title" :bordered="false">
        <template #extra>
          <a-button type="primary" style="margin-right: 20px" @click="handleOpenAddZzwzModal">新增</a-button>
          <a-icon
            v-if="layoutRight === 'zzwz'"
            type="fullscreen-exit"
            style="font-size: 32px"
            @click="layoutRight = 'auto'"
          />
          <a-icon v-else type="fullscreen" style="font-size: 32px" @click="layoutRight = 'zzwz'" />
        </template>
        <AntQueryTable
          ref="zzwz-table"
          height="100%"
          :queryConfig="zzwz.queryConfig"
          :tableConfig="zzwz.tableConfig"
          :pageConfig="zzwz.pageConfig"
          :showTool="zzwz.showTool"
        >
          <template #tablecell-action="{ record }">
            <a-button type="text-primary" icon="edit" @click="handleOpenEditZzwzModal(record)"></a-button>
          </template>
        </AntQueryTable>
      </a-card>
    </Grid>
    <AntFormModal
      :visible.sync="zzjgModal.visible"
      :title="zzjgModal.title"
      :formItems="zzjgModal.formItems"
      :formRules="zzjgModal.formRules"
      :formData="zzjgModal.formData"
      :onSubmit="handleSubmitZzjg"
      @success="handleSubmitZzjgSuccess"
    ></AntFormModal>
    <AntFormModal
      :visible.sync="zzryModal.visible"
      :title="zzryModal.title"
      :formItems="zzryModal.formItems"
      :formRules="zzryModal.formRules"
      :formData="zzryModal.formData"
      :onSubmit="handleSubmitZzry"
      @success="handleSubmitZzrySuccess"
    ></AntFormModal>
    <AntFormModal
      :visible.sync="zzzbModal.visible"
      :title="zzzbModal.title"
      :formItems="zzzbFormItems"
      :formRules="zzzbModal.formRules"
      :formData="zzzbModal.formData"
      :onSubmit="handleSubmitZzzb"
      @success="handleSubmitZzzbSuccess"
    ></AntFormModal>
    <!-- 组织物资模态框 -->
    <AntFormModal
      :visible.sync="zzwzModal.visible"
      :title="zzwzModal.title"
      :formItems="zzwzFormItems"
      :formRules="zzwzModal.formRules"
      :formData="zzwzModal.formData"
      :onSubmit="handleSubmitZzwz"
      @success="handleSubmitZzwzSuccess"
    ></AntFormModal>
  </page-header-wrapper>
</template>

<script>
export default {
  name: 'Zzllsjk',
  data() {
    return {
      layoutRight: 'auto',
      zzjg: {
        treeData: [],
        selectedKeys: [],
        expandedKeys: [],
      },
      zzjgModal: {
        visible: false,
        title: '',
        mode: '',
        formItems: [
          {
            label: '上级组织',
            prop: 'parentId',
            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',
            },
          },
          {
            label: '标识编码',
            prop: 'codeName',
          },
          {
            label: '组织名称',
            prop: 'name',
          },
        ],
        formRules: {
          codeName: [{ required: true, message: '请输入标识编码！', trigger: 'blur' }],
          name: [{ required: true, message: '请输入组织名称！', trigger: 'blur' }],
        },
        formData: {},
      },

      zzry: {
        queryConfig: false,
        tableConfig: {
          table: {},
          immediate: false,
          query: (params) =>
            this.$http({
              url: `/baseData/fightPowerHierarchy/staff/${this.zzjg.selectedKeys[0]}`,
              method: 'get',
              params,
            }),
          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',
            component: 'AntOriginSelect',
            options: {
              dataSource: () =>
                this.$http({
                  url: '/unit/getAll',
                  method: 'get',
                }),
              labelKey: 'name',
              readonly: false,
            },
          },
          { label: '岗位数量', prop: 'number' },
        ],
        formRules: {
          typeId: [{ required: true, message: '请选择岗位！', trigger: 'change' }],
          number: [{ required: true, message: '请输入岗位数量！', trigger: 'blur' }],
        },
        formData: {},
      },

      zzzb: {
        queryConfig: false,
        tableConfig: {
          table: {},
          immediate: false,
          query: (params) =>
            this.$http({
              url: `/baseData/fightPowerHierarchy/weapon/${this.zzjg.selectedKeys[0]}`,
              method: 'get',
              params,
            }),
          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',
            options: {
              dataSource: () =>
                this.$http({
                  url: '/tree/armament',
                  method: 'get',
                }),
              readonly: false,
            },
          },
          { label: '装备数量', prop: 'number' },
        ],
        formRules: {
          weaponId: [{ required: true, message: '请选择装备！', trigger: 'change' }],
          number: [{ required: true, message: '请输入装备数量！', trigger: 'blur' }],
        },
        formData: {},
      },

      zzwz: {
        queryConfig: false,
        tableConfig: {
          table: {},
          immediate: false,
          query: (params) =>
            this.$http({
              url: `baseData/fightPowerHierarchy/supplier/getByOrgId?id=${this.zzjg.selectedKeys[0]}`, // 修改为material
              method: 'get',
              params,
            }),
          columns: [
            { dataIndex: 'serial' },
            { title: '物资名称', dataIndex: 'name', width: 'auto', minWidth: 150 }, // 修改标题
            { title: '物资数量', dataIndex: 'account', type: 'account', width: 'auto', minWidth: 150 }, // 修改标题
            { dataIndex: 'action' },
          ],
        },
        pageConfig: false,
        showTool: false,
      },
      zzwzModal: {
        visible: false,
        title: '',
        mode: '',
        formItems: [
          {
            label: '物资名称', // 修改标签
            prop: 'supplierId', // 修改属性名
            component: 'AntOriginTreeSelect',
            options: {
              dataSource: () =>
                this.$http({
                  url: '/suppliesDict/tree',
                  method: 'get',
                }),
              readonly: false,
            },
          },
          { label: '物资数量', prop: 'total' }, // 修改标签
        ],
        formRules: {
          supplierId: [{ required: true, message: '请选择物资！', trigger: 'change' }], // 修改属性名和提示
          total: [{ required: true, message: '请输入物资数量！', trigger: 'blur' }], // 修改提示
        },
        formData: {},
      },
    }
  },
  computed: {
    gridRows() {
      return {
        auto: [1, 1, 1],
        zzry: [1, '56px', '56px'],
        zzzb: ['56px', 1, '56px'],
        zzwz: ['56px', '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' },
      ]
    },
    zzwzFormItems() {
      return [
        this.zzwzModal.mode === 'add'
          ? {
              label: '物资名称',
              prop: 'supplierId',
              component: 'AntOriginTreeSelect',
              options: {
                dataSource: () =>
                  this.$http({
                    url: '/suppliesDict/tree',
                    method: 'get',
                  }),
                valueKey: 'key',
                readonly: false,
              },
            }
          : { label: '物资名称', prop: 'name', customRender: (v) => v },
        { label: '物资数量', prop: 'account' },
      ]
    },
  },
  created() {
    this.getZzTree()
  },
  methods: {
    async getZzTree() {
      try {
        const res = await this.$http({
          url: `/tree/organization`,
          method: 'get',
          params: { unittype: 1 },
        })
        this.zzjg.treeData = res.data
        this.zzjg.selectedKeys = [this.zzjg.treeData[0].key]
        this.handleChangeZzjgSelected()
      } catch (error) {
        console.log(error)
      }
    },
    handleChangeZzjgSelected() {
      this.$refs['zzry-table'].commitAction('reload')
      this.$refs['zzzb-table'].commitAction('reload')
      this.$refs['zzwz-table'].commitAction('reload')
    },
    handleOpenAddZzjgModal(parentId) {
      this.zzjgModal.title = '新建作战力量'
      this.zzjgModal.mode = 'add'
      this.zzjgModal.formData = { unittype: 1, parentId }
      this.zzjgModal.visible = true
    },
    async handleOpenEditZzjgModal(id) {
      try {
        const res = await this.$http({
          url: `/baseData/fightPowerHierarchy/${id}`,
          method: 'get',
        })
        this.zzjgModal.title = '编辑作战力量'
        this.zzjgModal.mode = 'edit'
        this.zzjgModal.formData = res.data
        this.zzjgModal.visible = true
      } catch (error) {
        console.log(error)
        this.$message.error('未知错误，请重试')
      }
    },
    handleSubmitZzjg(formData) {
      return this.$http({
        url: `/baseData/fightPowerHierarchy/save`,
        method: 'post',
        data: formData,
      })
    },
    handleSubmitZzjgSuccess() {
      this.getZzTree()
    },
    async handleDeleteZzjg(id, title) {
      try {
        await this.$confirm({ content: `确定删除作战力量-${title}？` })
        await this.$http({
          url: `/baseData/fightPowerHierarchy/remove/${id}`,
          method: 'get',
        })
        this.$message.success('删除成功')
        this.getZzTree()
      } catch (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')
    },

    handleOpenAddZzwzModal() {
      this.zzwzModal.title = '新建组织物资' // 修改标题
      this.zzwzModal.mode = 'add'
      this.zzwzModal.formData = { orgId: this.zzjg.selectedKeys[0] }
      this.zzwzModal.visible = true
    },
    handleOpenEditZzwzModal(record) {
      this.zzwzModal.title = `编辑组织物资` // 修改标题
      this.zzwzModal.mode = 'edit'
      this.zzwzModal.formData = { ...record }
      this.zzwzModal.visible = true
    },
    handleSubmitZzwz(formData) {
      return this.$http({
        url: `/baseData/fightPowerHierarchy/supplier/save`, // 修改为material
        method: 'post',
        data: formData,
      })
    },
    handleSubmitZzwzSuccess() {
      this.$refs['zzwz-table'].commitAction('query')
    },
  },
}
</script>

<style lang="less" scoped>
.contextmenu-zz {
  padding: 5px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 5px #aaaaaa;
}
</style>