标签

src/api/system.js

@@ -168,6 +168,14 @@ export function getOrganizationAtlasEmployee (params) {
   return http.post('/organization/employee/atlas', params)
 }
 // 组织结构 保存标签
+export function getLabelPage (params) {
+  return http.post('/label/page', params)
+}
+// 组织结构 保存标签
 export function saveLabel (params) {
   return http.post('/label/save', params)
 }
+// 组织结构 批量保存标签
+export function saveLabelAll (params) {
+  return http.post('/label/batch/save', params)
+}

src/views/humanResources/organizationStructure/organizationEdit.vue

@@ -6,25 +6,12 @@
   >
   <div class="px-3">
     <el-tabs v-model="activeName">
-      <el-tab-pane label="基本信息" name="first">用户管理</el-tab-pane>
-      <el-tab-pane label="标注管理" name="second">
-        <el-form :model="formValues" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
-          <el-form-item
-            v-for="(tag, index) in formValues.tags"
-            :label="'标注' + index"
-            :key="tag.key"
-            :prop="'tags.' + index + '.value'"
-          >
-            <div class="d-flex">
-              <el-input v-model="tag.value" placeholder="请输入标注"></el-input>
-              <m-button class="ml-3" @click.prevent="onRemove(index)">删除</m-button>
-            </div>
-
-          </el-form-item>
-          <el-form-item>
-            <m-button @click="onAdd">新增标注</m-button>
-          </el-form-item>
-        </el-form>
+      <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>
@@ -35,35 +22,33 @@
 import {
   saveLabel
 } from '@/api/system'
+import organizationEditInfo from './organizationEditInfo.vue'
+import organizationEditLabel from './organizationEditLabel.vue'
 export default {
   name: 'organizationEdit',
+  components: {
+    organizationEditInfo,
+    organizationEditLabel
+  },
   data () {
     return {
-      activeName: '',
+      key: Date.now(),
+      activeName: 'Info',
+      tabs: [
+        { label: '基本信息', name: 'Info', path: organizationEditInfo },
+        { label: '标注管理', name: 'Label', path: organizationEditLabel }
+      ],
       drawer: false,
-      formValues: {
-        tags: [
-          { value: null, key: Date.now() }
-        ]
-      },
       item: {}
     }
   },
   methods: {
     open (nodes) {
-      this.formValues.tags = [{ value: null, key: Date.now() }]
+      this.activeName = 'Info'
       this.item = nodes
+      this.key = Date.now()
       this.drawer = true
     },
-    onRemove (index) {
-      this.formValues.tags.splice(index, 1)
-    },
-    onAdd () {
-      this.formValues.tags.push({
-        value: '',
-        key: Date.now()
-      })
-    },
     async onSure () {
       try {
         await saveLabel({

src/views/humanResources/organizationStructure/organizationEditInfo.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-form label-width="100px" label-position="right" class="demo-table-expand">
+    <el-form-item label="机构名称">
+      <span>{{ item.name }}</span>
+    </el-form-item>
+    <el-form-item label="机构 ID">
+      <span>{{ item.id }}</span>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'organizationEditInfo',
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  created () {
+    console.log(this.item)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.demo-table-expand label {
+  color: #99a9bf;
+}
+</style>

src/views/humanResources/organizationStructure/organizationEditLabel.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-form :model="formValues" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+    <el-form-item
+      v-for="(tag, index) in formValues.tags"
+      :label="'标注' + index"
+      :key="tag.key"
+      :prop="'tags.' + index + '.value'"
+    >
+      <div class="d-flex">
+        <el-input v-model="tag.value" placeholder="请输入标注"></el-input>
+        <m-button v-if="formValues.tags.length > 1" class="ml-3" @click.prevent="onRemove(index)">删除</m-button>
+      </div>
+
+    </el-form-item>
+    <el-form-item>
+      <m-button @click="onAdd">新增标注</m-button>
+      <m-button type="orange" @click="onSave">保存</m-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import {
+  saveLabelAll,
+  getLabelPage
+} from '@/api/system'
+export default {
+  name: 'organizationEditLabel',
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      formValues: {
+        tags: [
+          { value: null, key: Date.now() }
+        ]
+      }
+    }
+  },
+  created () {
+    this.onInit()
+  },
+  methods: {
+    async onInit () {
+      try {
+        const { data } = await getLabelPage({
+          entity: {
+            labelEntityId: this.item.id
+          },
+          page: {
+            current: 1,
+            size: 1000
+          }
+        })
+        if (data.total === 0) {
+          this.formValues.tags = [
+            { value: null, key: Date.now() }
+          ]
+          return
+        }
+        this.formValues.tags = data.records.map((e, index) => {
+          return {
+            value: e.labelTitle,
+            key: `${Date.now()}_${index}`
+          }
+        })
+      } catch (error) {
+        this.$message.error(error)
+      }
+    },
+    onRemove (index) {
+      this.formValues.tags.splice(index, 1)
+    },
+    onAdd () {
+      this.formValues.tags.push({
+        value: '',
+        key: Date.now()
+      })
+    },
+    async onSave () {
+      try {
+        await saveLabelAll({
+          labelType: 0,
+          labelTitle: this.formValues.tags.filter(e => e.value).map(e => e.value),
+          labelEntityId: this.item.id
+        })
+        this.$message.success('保存成功')
+      } catch (error) {
+        this.$message.error(error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>