remuneration/src/views/humanResources/organizationStructure/organizationEdit.vue

<template>
  <el-drawer
    :title="item.name"
    :visible.sync="drawer"
    direction="rtl"
  >
  <div class="px-3">
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="tab in tabs"
        :key="tab.name"
        :label="tab.label"
        :name="tab.name">
        <component :is="tab.path" :item="item" :key="key"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
  </el-drawer>
</template>

<script>
import {
  saveLabel,
  getOrganizationDetails
} from '@/api/system'
import organizationEditInfo from './organizationEditInfo.vue'
import organizationEditLabel from './organizationEditLabel.vue'
export default {
  name: 'organizationEdit',
  components: {
    organizationEditInfo,
    organizationEditLabel
  },
  data () {
    return {
      key: Date.now(),
      activeName: 'Info',
      tabs: [
        { label: '基本信息', name: 'Info', path: organizationEditInfo },
        { label: '标注管理', name: 'Label', path: organizationEditLabel }
      ],
      drawer: false,
      item: {}
    }
  },
  methods: {
    async open (nodes) {
      try {
        const { data } = await getOrganizationDetails({
          organizationNo: nodes.id
        })
        this.item = {
          ...nodes,
          origin: data
        }
        this.activeName = 'Info'
        this.key = Date.now()
        this.drawer = true
      } catch (error) {
        this.$message.error(error)
      }
    },
    async onSure () {
      try {
        await saveLabel({
          labelEntityId: this.item.id,
          labelType: 0,
          labelTitle: this.formValues.tags.map(e => e.value)
        })
        this.$emit('success')
      } catch (error) {
        this.$message.error(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>