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

<template>
  <page-header-wrapper>
    <Grid :columns="['400px', 1]">
      <a-card title="装备管理" class="my-card my-card-has-title" :bordered="false">
        <template #extra>
          <a-button type="primary" icon="plus" shape="circle" title="新增" @click="handleOpenAddZbglModal()"></a-button>
        </template>
        <a-tree
          :treeData="zbgl.treeData"
          :selectedKeys.sync="zbgl.selectedKeys"
          :expandedKeys.sync="zbgl.expandedKeys"
          @select="handleChangeZbglSelected"
        >
          <template #title="scope">
            <a-dropdown :trigger="['contextmenu']">
              <span>{{ scope.title }}</span>
              <span>{{ formatText(scope) }}</span>
              <template #overlay>
                <Flex class="contextmenu-zz">
                  <a-button
                    type="text-primary"
                    icon="edit"
                    title="编辑"
                    @click="handleOpenEditZbglModal(scope.key)"
                  ></a-button>
                  <a-button
                    type="text-primary"
                    icon="plus"
                    title="新增子项"
                    @click="handleOpenAddZbglModal(scope.key)"
                  ></a-button>
                  <a-button
                    type="text-danger"
                    icon="delete"
                    title="删除"
                    @click="handleDeleteZbgl(scope.key, scope.title)"
                  ></a-button>
                </Flex>
              </template>
            </a-dropdown>
          </template>
        </a-tree>
      </a-card>
    </Grid>
  </page-header-wrapper>
</template>

<script>
export default {
  name: 'Zbsjk',
  data() {
    return {
      zbgl: {
        treeData: [],
        selectedKeys: [],
        expandedKeys: [],
      },
      zbglModal: {
        visible: false,
        title: '',
        mode: '',
        formItems: [
          {
            label: '上级装备',
            prop: 'parentId',
            component: 'AntOriginTreeSelect',
            options: {
              dataSource: () =>
                this.$http({
                  url: '/tree/armament',
                  method: 'get',
                }).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: {},
      },
    }
  },
  created() {
    this.getZzTree()
  },
  methods: {
    formatText(scope) {
      console.log('----scope----', scope)
      return ''
    },
    async getZzTree() {
      try {
        const res = await this.$http({
          url: `/tree/armament`,
          method: 'get',
        })
        this.zbgl.treeData = res.data
        this.zbgl.selectedKeys = [this.zbgl.treeData[0].key]
        this.handleChangeZbglSelected()
      } catch (error) {
        console.log(error)
      }
    },
    handleChangeZbglSelected() {},
    handleOpenAddZbglModal(parentId) {
      this.zbglModal.title = '新建装备管理'
      this.zbglModal.mode = 'add'
      this.zbglModal.formData = { parentId }
      this.zbglModal.visible = true
    },
    async handleOpenEditZbglModal(id) {
      try {
        const res = await this.$http({
          url: `/baseData/fightPowerHierarchy/${id}`,
          method: 'get',
        })
        this.zbglModal.title = '编辑装备管理'
        this.zbglModal.mode = 'edit'
        this.zbglModal.formData = res.data
        this.zbglModal.visible = true
      } catch (error) {
        console.log(error)
        this.$message.error('未知错误，请重试')
      }
    },
    handleSubmitZbgl(formData) {
      return this.$http({
        url: `/baseData/fightPowerHierarchy/save`,
        method: 'post',
        data: formData,
      })
    },
    handleSubmitZbglSuccess() {
      this.getZzTree()
    },
    async handleDeleteZbgl(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) {}
    },
  },
}
</script>

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