'组织架构完成'

src/api/basics.js

@@ -11,9 +11,72 @@ export function getConfig (params) {
 
 // 新增配置
 export function postConfig (data) {
+    const { modalType } = data
     return request({
       url: '/config',
-      method: 'POST',
+      method: modalType === 'edit' ? 'PUT' : 'POST',
       data
     })
-  }
+}
+
+// 删除配置
+export function deleteConfig (id) {
+    return request({
+      url: `/config/${id}`,
+      method: 'DELETE'
+    })
+}
+
+// 新增标签配置
+export function postTag (data) {
+    const { modalType } = data
+    return request({
+      url: `/config/tag`,
+      method: modalType === 'edit' ? 'PUT' : 'POST',
+      data
+    })
+}
+
+// 查询标签配置
+export function getTag (params) {
+    return request({
+      url: `/config/tag`,
+      method: 'GET',
+      params
+    })
+}
+
+// 删除标签
+export function deleteTag (id) {
+    return request({
+      url: `/config/tag/${id}`,
+      method: 'DELETE'
+    })
+}
+
+// 新增教室配置
+export function postClass (data) {
+    const { modalType } = data
+    return request({
+      url: `/config/classroom`,
+      method: modalType === 'edit' ? 'PUT' : 'POST',
+      data
+    })
+}
+
+// 查询教室配置
+export function getClass (params) {
+    return request({
+      url: `/config/classroom`,
+      method: 'GET',
+      params
+    })
+}
+
+// 删除教室配置
+export function deleteClass (id) {
+    return request({
+      url: `/config/classroom/${id}`,
+      method: 'DELETE'
+    })
+}

src/api/role.js

@@ -0,0 +1,61 @@
+import request from '@/utils/request'
+
+// 查询部门
+export function getDepart () {
+    return request({
+      url: '/config/depart',
+      method: 'GET'
+    })
+  }
+
+// 新增部门
+export function postDepart (data) {
+    return request({
+      url: '/config/depart',
+      method: 'POST',
+      data
+    })
+  }
+
+// 删除部门
+export function deleteDepart (id) {
+    return request({
+      url: `/config/depart/${id}`,
+      method: 'DELETE'
+    })
+  }
+
+// 编辑部门
+export function putDepart (data) {
+    return request({
+      url: `/config/depart`,
+      method: 'PUT',
+      data
+    })
+  }
+
+// 查询部门
+export function getUser (id) {
+    return request({
+      url: `/config/user/${id}`,
+      method: 'GET'
+    })
+}
+
+// 新增人员
+export function postUser (data) {
+    return request({
+      url: `/config/user`,
+      method: 'POST',
+      data
+    })
+}
+
+// 筛选人员
+export function searchUser (params) {
+    return request({
+      url: `/config/user`,
+      method: 'GET',
+      params
+    })
+}

src/utils/request.js

@@ -46,11 +46,11 @@ const errorHandler = (error) => {
 // request interceptor
 request.interceptors.request.use(config => {
   // const token = storage.get(ACCESS_TOKEN)
-  const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b3duSWQiOjIxMzIxMjEyMzI0NSwiZXhwIjoxNjA5MjI0NTIyLCJ1c2VySWQiOjg1NTEyNTQ0MTU1NH0.p3B0oZGrcVhvGmoRBp6oAqVGW5OcCtraKobO07SO_zc'
+  const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b3duSWQiOiIyMTMyMTIxMjMyNDVMIiwiZXhwIjoxNjA5MzE4MzI3LCJ1c2VySWQiOiI4NTUxMjU0NDE1NTRMIn0.89pzAikvF29pRiIl0iF4FhGL1HK-K8l13NzIWF1VkwA'
   // 如果 token 存在
   // 让每个请求携带自定义 token 请根据实际情况自行修改
   if (token) {
-    config.headers['Access-Token'] = token
+    config.headers['access_token'] = token
   }
   return config
 }, errorHandler)

src/views/basics/class/index.vue

@@ -10,30 +10,22 @@
         title="教室管理"
       >
         <template slot="extra">
-          <a-button type="primary" @click="tagVisible = true">新增教室</a-button>
+          <a-button type="primary" @click="openModal({id: '', label: ''}, 'add')">新增教室</a-button>
         </template>
-        <a-table :columns="columns" :data-source="data" index="">
-          <!-- <template slot="index" >{{  }}</template> -->
-          <a slot="name" slot-scope="text">{{ text }}</a>
-          <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
-          <span slot="tags" slot-scope="tags">
-            <a-tag
-              v-for="tag in tags"
-              :key="tag"
-              :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
-            >
-              {{ tag.toUpperCase() }}
-            </a-tag>
-          </span>
-          <span slot="action" slot-scope="text, record" >
-            <a @click="editTag(text, record)">编辑</a>
+        <a-table
+          :columns="columns"
+          :data-source="classList"
+          :pagination="pagination"
+          @change="changePagination"
+        >
+          <span slot="action" slot-scope="text" >
+            <a @click="openModal(text, 'edit')">编辑</a>
             <a-divider type="vertical" />
             <a-popconfirm
               title="你确定要删除这个标签吗?"
               ok-text="Yes"
               cancel-text="No"
-              @confirm="confirm"
-              @cancel="cancel"
+              @confirm="deleteClass(text)"
             >
               <a>删除</a>
             </a-popconfirm>
@@ -43,12 +35,12 @@
     </page-header-wrapper>
     <!-- 新增标签 -->
     <a-modal
-      :title="oprationType | filtersModel"
+      :title="modalType | filtersModel"
       v-model="tagVisible"
       :confirm-loading="confirmLoading"
       ok-text="确认"
       cancel-text="取消"
-      @ok="handleOk"
+      @ok="postClass"
     >
       <a-input v-model="tagLabel" placeholder="请输入标签名称" />
     </a-modal>
@@ -56,27 +48,19 @@
 </template>
 
 <script>
+import { postClass, getClass, deleteClass } from '@/api/basics'
 const columns = [
    {
     dataIndex: 'index',
-    key: '序号',
+    title: '序号',
+    key: 'index',
     scopedSlots: { customRender: 'index' }
   },
   {
-    dataIndex: 'name',
-    key: 'name',
+    dataIndex: 'label',
+    key: 'label',
     title: '课程名称'
   },
-  {
-    title: '学员人数',
-    dataIndex: 'age',
-    key: 'age'
-  },
-  {
-    title: '讲师',
-    dataIndex: 'teacher',
-    key: 'teacher'
-  },
   {
     title: '创建时间',
     key: 'createTime',
@@ -89,60 +73,89 @@ const columns = [
   }
 ]
 
-const data = [
-  {
-    key: '1',
-    name: '思维课程',
-    age: 32,
-    teacher: '曹清华',
-    createTime: '2020/12/12',
-    tags: ['nice', 'developer']
-  },
-  {
-    key: '2',
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-    tags: ['loser']
-  },
-  {
-    key: '3',
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-    tags: ['cool', 'teacher']
-  }
-]
 export default {
   name: 'Tag',
   filters: {
       filtersModel (type) {
           switch (type) {
               case 'add':
-                  return '新增标签'
+                  return '新增教室'
               case 'edit':
-                  return '编辑标签'
-              case 'select':
-                  return '选择学员'
+                  return '编辑教室名称'
           }
       }
   },
+  created () {
+    this.getClass()
+  },
   data () {
     return {
-      data,
+      modalType: 'add', // 当前操作的类型, add edit
       columns,
       tagLabel: '',
-      oprationType: 'add', // 当前操作的类型, add edit select
+      tagId: '',
+      pagination: {
+        page: 1,
+        pageSize: 5,
+        total: 1
+      },
+      classList: [],
       confirmLoading: false,
       tagVisible: false // 新增标签 弹窗状态
     }
   },
   methods: {
-    // 编辑当前标签
-    editTag (text, record) {
-        console.log(text, record)
-        this.oprationType = 'edit'
-        this.tagVisible = true
+    // 删除标签
+    async deleteClass (records) {
+     const { code, data } = await deleteClass(records.id)
+     if (code === 0) {
+       data ? this.$message.success('删除成功') : this.$message.error('删除失败')
+       this.getClass()
+     }
+    },
+    // 新增教室
+    async postClass () {
+      const { tagId, tagLabel, modalType } = this
+      const $par = {
+        id: tagId,
+        label: tagLabel,
+        modalType
+      }
+      this.confirmLoading = true
+      const { code, data } = await postClass($par)
+      this.confirmLoading = false
+      if (code === 0) {
+        console.log(data)
+        this.$message.success(modalType === 'add' ? '新增成功' : '编辑成功')
+        this.getClass()
+      }
+      this.tagVisible = false
+    },
+    // 查询教室
+    async getClass () {
+      const { code, data } = await getClass({ curPage: this.pagination.page })
+      if (code === 0) {
+        const { records, total } = data
+        this.pagination.total = total
+        this.classList = records.map((item, index) => {
+          if (item.updateTime) {
+            item.createTime = item.updateTime
+          }
+          item.index = index + 1
+          return item
+        })
+      }
+    },
+    // 打开弹窗
+    openModal (records, type) {
+      this.tagVisible = true
+      this.modalType = type
+      this.tagId = records.id
+      this.tagLabel = records.label
+    },
+    // 表格翻页
+    changePagination (page) {
+      this.pagination.page = page.current
     }
   }
 }

src/views/basics/sell/index.vue

@@ -13,42 +13,29 @@
         title="明细"
       >
         <template slot="extra">
-          <a-button type="primary" @click="visible = true">新增{{ modalText }}</a-button>
+          <a-button type="primary" @click="openModal({id: '', label: ''}, 'add')">新增{{ modalText }}</a-button>
         </template>
         <a-table
-          row-key="index"
-          size="small"
-          :columns="searchTableColumns"
-          :dataSource="searchData"
-          :pagination="{ pageSize: 5 }"
+          :row-key="record => record.id"
+          :columns="columns"
+          :data-source="cateList"
+          :loading="loading"
+          :pagination="pagination"
+          @change="changePagination"
         >
-          <span slot="range" slot-scope="text, record">
-            <trend :flag="record.status === 0 ? 'up' : 'down'">
-              {{ text }}%
-            </trend>
-          </span>
-          <template slot="action" >
-            <a>编辑</a>
+          <template slot="action" slot-scope="text">
+            <a @click="openModal(text, 'edit')">编辑</a>
             <a-divider type="vertical" />
             <a-popconfirm
               title="你确定要删除这个标签吗?"
               ok-text="Yes"
               cancel-text="No"
-              @confirm="() => {}"
-              @cancel="() => {}"
+              @confirm="deleteConfig(text)"
             >
               <a>删除</a>
             </a-popconfirm>
           </template>
         </a-table>
-        <!-- <a-row> -->
-        <!-- <a-col :xs="24" :sm="24" :md="12" :lg="8" > -->
-        <!-- <div class="cate-item" v-for="(item, index) in cateList" :key="index">
-              <div><span class="sort">{{ index + 1 }}</span> <span></span> {{ item.label }}</div>
-              <div class="opration"><a-icon type="form" /> <a-icon type="delete" /></div>
-            </div> -->
-        <!-- </a-col> -->
-        <!-- </a-row> -->
       </a-card>
     </page-header-wrapper>
 
@@ -59,7 +46,7 @@
       :confirm-loading="confirmLoading"
       ok-text="确认"
       cancel-text="取消"
-      @ok="handleOk"
+      @ok="postConfig"
     >
       <a-input v-model="cateValue" :placeholder="'请输入' + modalText" />
     </a-modal>
@@ -67,39 +54,37 @@
 </template>
 
 <script>
-import { getConfig } from '@/api/basics'
-const searchTableColumns = [
+import { getConfig, postConfig, deleteConfig } from '@/api/basics'
+// import { sellType } from './options'
+const columns = [
   {
     dataIndex: 'index',
     title: '序号',
+    key: 'index',
     width: 90
   },
   {
-    dataIndex: 'keyword',
+    dataIndex: 'label',
     title: '类目名'
   },
+  {
+    dataIndex: 'createTime',
+    title: '创建时间'
+  },
   {
     title: '操作',
     key: 'action',
     scopedSlots: { customRender: 'action' }
   }
 ]
-const searchData = []
-for (let i = 0; i < 50; i += 1) {
-  searchData.push({
-    index: i + 1,
-    keyword: `搜索关键词-${i}`,
-    count: Math.floor(Math.random() * 1000),
-    range: Math.floor(Math.random() * 100),
-    status: Math.floor((Math.random() * 10) % 2)
-  })
-}
 
 export default {
   name: 'Sell',
   computed: {
     modalText () {
-      return this.tabList[this.tabActiveKey].tab
+      return this.tabList.filter(item => {
+        return item.key === this.tabActiveKey
+      })[0].tab
     }
   },
   created () {
@@ -107,54 +92,106 @@ export default {
   },
   data () {
       return {
-        searchTableColumns,
-        searchData,
+        loading: false,
+        modalType: 'edit', // edit add
+        columns,
         tabList: [
-            { key: '0', tab: '意向度' },
-            { key: '1', tab: '来源渠道' },
-            { key: '2', tab: '意向课程' },
-            { key: '3', tab: '年级' },
-            { key: '4', tab: '流失原因' }
+            { key: 'INTENTION', tab: '意向度' },
+            { key: 'CHANNELS', tab: '来源渠道' },
+            { key: 'COURSE', tab: '意向课程' },
+            { key: 'GRADE', tab: '年级' },
+            { key: 'LOSS_REASON', tab: '流失原因' }
         ],
-        tabActiveKey: '0',
+        tabActiveKey: 'INTENTION',
         visible: false,
         confirmLoading: false,
+        cateId: '',
         cateValue: '', // 各种类目的名称
-        cateList: [
-          {
-            label: '客户不满意'
-          }
-        ], //  类目集合
-        queryParams: {
-          curPage: 1,
-          type: 'INTENTION'
+        cateList: [], //  类目集合
+        pagination: {
+          page: 1,
+          pageSize: 5,
+          total: 1
         }
       }
   },
   methods: {
+    // 编辑时打开modal
+    openModal (records, type) {
+      this.visible = true
+      this.modalType = type
+      this.cateId = records.id
+      this.cateValue = records.label
+    },
+    // 表格翻页
+    changePagination (page) {
+      this.pagination.page = page.current
+    },
+    // 删除销售配置
+    async deleteConfig (records) {
+      const { code, data } = await deleteConfig(records.id)
+      if (code === 0) {
+        data ? this.$message.success('删除成功') : this.$message.success('删除失败')
+
+        this.cateList = this.cateList.filter(item => item.id !== records.id)
+
+        this.getConfig()
+      }
+    },
+    // 添加配置   // 编辑基本配置
+    async postConfig () {
+      const $par = {
+        label: this.cateValue,
+        type: this.tabActiveKey,
+        modalType: this.modalType,
+        id: this.cateId
+      }
+      this.confirmLoading = true
+      const { code, data } = await postConfig($par)
+       this.confirmLoading = false
+       this.visible = false
+
+      if (code === 0) {
+        if (this.modalType === 'add') {
+          this.cateList.push(data)
+        } else {
+          let index = ''
+          this.cateList.forEach((item, i) => {
+            if (item.id = this.cateId) {
+              index = i
+            }
+          })
+          const _data = Object.assign({}, data, { createTime: data.updateTime })
+          this.cateList.splice(index, 1, _data)
+        }
+
+        this.$message.success('添加成功')
+      }
+      this.cateId = ''
+      this.cateValue = ''
+    },
     // 获取销售配置
     async getConfig () {
-      console.log('helorenwenhao')
-      const { curPage, type } = this.queryParams
+      const { page } = this.pagination
       const $par = {
-        curPage,
-        type
+        curPage: page,
+        type: this.tabActiveKey
       }
+      this.loading = true
       const { code, data } = await getConfig($par)
+      this.loading = false
       if (code === 0) {
-        console.log(data)
+        const { records, total } = data
+        this.cateList = records
+        this.pagination.total = total
       }
     },
+    // 切换配置
     handleTabChange (key) {
       this.tabActiveKey = key
-    },
-    handleOk (e) {
-      this.ModalText = 'The modal will be closed after two seconds'
-      this.confirmLoading = true
-      setTimeout(() => {
-        this.visible = false
-        this.confirmLoading = false
-      }, 2000)
+      this.cateList = []
+      this.pagination.curPage = 1
+      this.getConfig()
     }
   }
 }

src/views/basics/sell/options.js

@@ -0,0 +1 @@
+export const sellType = ['INTENTION', 'CHANNELS', 'COURSE', 'GRADE', 'LOSS_REASON']

src/views/basics/tag/index.vue

@@ -10,32 +10,20 @@
         title="标签管理"
       >
         <template slot="extra">
-          <a-button type="primary" @click="tagVisible = true">新增标签</a-button>
+          <a-button type="primary" @click="openModal({id: '', label: ''}, 'add')">新增标签</a-button>
         </template>
-        <a-table :columns="columns" :data-source="data" index="">
-          <!-- <template slot="index" >{{  }}</template> -->
-          <a slot="name" slot-scope="text">{{ text }}</a>
-          <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
-          <span slot="tags" slot-scope="tags">
-            <a-tag
-              v-for="tag in tags"
-              :key="tag"
-              :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
-            >
-              {{ tag.toUpperCase() }}
-            </a-tag>
+        <a-table :columns="columns" :data-source="tagList" >
+          <span slot="label" slot-scope="text" >
+            <a-tag color="pink">{{ text }}</a-tag>
           </span>
-          <span slot="action" slot-scope="text, record" >
-            <a>选择学员</a>
-            <a-divider type="vertical" />
-            <a @click="editTag(text, record)">编辑</a>
+          <span slot="action" slot-scope="text" >
+            <a @click="openModal(text, 'edit')">编辑</a>
             <a-divider type="vertical" />
             <a-popconfirm
               title="你确定要删除这个标签吗?"
               ok-text="Yes"
               cancel-text="No"
-              @confirm="confirm"
-              @cancel="cancel"
+              @confirm="deleteTag(text)"
             >
               <a>删除</a>
             </a-popconfirm>
@@ -45,12 +33,12 @@
     </page-header-wrapper>
     <!-- 新增标签 -->
     <a-modal
-      :title="oprationType | filtersModel"
+      :title="modalType | filtersModel"
       v-model="tagVisible"
       :confirm-loading="confirmLoading"
       ok-text="确认"
       cancel-text="取消"
-      @ok="handleOk"
+      @ok="postTag"
     >
       <a-input v-model="tagLabel" placeholder="请输入标签名称" />
     </a-modal>
@@ -58,26 +46,23 @@
 </template>
 
 <script>
+import { postTag, getTag, deleteTag } from '@/api/basics'
 const columns = [
    {
     dataIndex: 'index',
-    key: '序号',
-    scopedSlots: { customRender: 'index' }
+    title: '标题',
+    key: '序号'
   },
   {
-    dataIndex: 'name',
-    key: 'name',
-    title: '课程名称'
+    dataIndex: 'label',
+    key: 'label',
+    title: '标签名称',
+    scopedSlots: { customRender: 'label' }
   },
   {
     title: '学员人数',
-    dataIndex: 'age',
-    key: 'age'
-  },
-  {
-    title: '讲师',
-    dataIndex: 'teacher',
-    key: 'teacher'
+    dataIndex: 'countNum',
+    key: 'countNum'
   },
   {
     title: '创建时间',
@@ -91,30 +76,6 @@ const columns = [
   }
 ]
 
-const data = [
-  {
-    key: '1',
-    name: '思维课程',
-    age: 32,
-    teacher: '曹清华',
-    createTime: '2020/12/12',
-    tags: ['nice', 'developer']
-  },
-  {
-    key: '2',
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-    tags: ['loser']
-  },
-  {
-    key: '3',
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-    tags: ['cool', 'teacher']
-  }
-]
 export default {
   name: 'Tag',
   filters: {
@@ -129,22 +90,73 @@ export default {
           }
       }
   },
+  created () {
+    this.getTag()
+  },
   data () {
     return {
-      data,
       columns,
       tagLabel: '',
-      oprationType: 'add', // 当前操作的类型, add edit select
+      tagId: '',
+      modalType: 'add', // 当前操作的类型, add edit select
+      tagList: [],
+      pagination: {
+        page: 1,
+        pageSize: 5,
+        total: 1
+      },
       confirmLoading: false,
       tagVisible: false // 新增标签 弹窗状态
     }
   },
   methods: {
-    // 编辑当前标签
-    editTag (text, record) {
-        console.log(text, record)
-        this.oprationType = 'edit'
-        this.tagVisible = true
+    // 删除标签
+    async deleteTag (records) {
+     const { code, data } = await deleteTag(records.id)
+     if (code === 0) {
+       data ? this.$message.success('删除成功') : this.$message.error('删除失败')
+       this.getTag()
+     }
+    },
+    // 新增标签
+    async postTag () {
+      const { tagId, tagLabel, modalType } = this
+      const $par = {
+        id: tagId,
+        label: tagLabel,
+        modalType
+      }
+      this.confirmLoading = true
+      const { code, data } = await postTag($par)
+      this.confirmLoading = false
+      if (code === 0) {
+        console.log(data)
+        this.$message.success(modalType === 'add' ? '新增成功' : '编辑成功')
+        this.getTag()
+      }
+      this.tagVisible = false
+    },
+    // 查询标签
+    async getTag () {
+      const { code, data } = await getTag({ curPage: this.pagination.page })
+      if (code === 0) {
+        const { records, total } = data
+        this.pagination.total = total
+        this.tagList = records.map((item, index) => {
+          if (item.updateTime) {
+            item.createTime = item.updateTime
+          }
+          item.index = index + 1
+          return item
+        })
+      }
+    },
+    // 打开弹窗
+    openModal (records, type) {
+      this.tagVisible = true
+      this.modalType = type
+      this.tagId = records.id
+      this.tagLabel = records.label
     }
   }
 }

src/views/roleIng/staff/index.vue

@@ -3,16 +3,13 @@
     <page-header-wrapper
       :title="false"
       content="用于员工的新增及分配权限"
-      :tab-list="tabList"
-      :tab-active-key="tabActiveKey"
-      @tabChange="handleTabChange"
     >
       <a-row :gutter="24">
         <a-col :md="24" :lg="5">
-          <organiza />
+          <organiza @currentClickNode="e => departmentId = e"/>
         </a-col>
         <a-col :md="24" :lg="19">
-          <staff-admin />
+          <staff-admin :departmentId="departmentId"/>
         </a-col>
       </a-row>
     </page-header-wrapper>
@@ -32,11 +29,7 @@ export default {
   data () {
       return {
         addType: 'staff', // 员工和部门  staff  department
-        tabList: [
-            { key: '0', tab: '员工管理' },
-            { key: '1', tab: '角色管理' }
-        ],
-        tabActiveKey: '0'
+        departmentId: ''
       }
   },
   methods: {

src/views/roleIng/staff/organiza.vue

@@ -6,30 +6,45 @@
       title="组织架构"
     >
       <template slot="extra">
-        <a-button type="primary" @click="departmentVisible = true">新增</a-button>
+        <a-button type="primary" @click="openModal">新增</a-button>
       </template>
       <tree
         checkable
         :tree-data="treeData"
-        :default-expanded-keys="['0-0-0', '0-0-1']"
-        :default-selected-keys="['0-0-0', '0-0-1']"
-        :default-checked-keys="['0-0-0', '0-0-1']"
+        defaultExpandAll
+        :replaceFields="replaceFields"
         @select="onSelect"
         @check="onCheck"
       >
-        <span :slot="item.key" v-for="item in aa" :key="item.key">
+        <span :slot="item.id" v-for="item in flatTreeData" :key="item.id">
           <div>
             <span>{{ item.title }}</span>
-            <span style="margin-left: 10px" v-if="item.key === currentClickNode">
+            <span style="margin-left: 10px" v-if="item.id === currentClickNode">
               <a @click.stop="handclick(item)">编辑</a>
               <a-divider type="vertical" />
-              <a>删除</a>
+              <a-popconfirm
+                title="你确定删除这个部门吗?"
+                ok-text="Yes"
+                cancel-text="No"
+                @confirm="deleteDepart(item)"
+
+              >
+                <a @click.stop="() => {}">删除</a>
+              </a-popconfirm>
             </span>
           </div>
         </span>
       </tree>
     </a-card>
-    <a-modal v-model="departmentVisible" :width="500" title="Basic Modal" @ok="handleOk">
+
+    <!-- 新增的树节点 -->
+    <a-modal
+      v-model="visible"
+      :width="500"
+      title="Basic Modal"
+      @ok="postDepart"
+      :confirm-loading="confirmLoading"
+    >
       <div>
         <a-row class="department">
           <a-col :span="4">
@@ -39,32 +54,18 @@
             :span="18"
           >
             <a-tree-select
-              v-model="value"
+              v-model="parentLabel"
+              @select="selectTreeNode"
               treeNodeFilterProp="title"
               show-search
               style="width: 100%"
               :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
-              placeholder="Please select"
+              placeholder="请选择上级部门"
               allow-clear
               :tree-data="treeData"
               tree-default-expand-all
               :replaceFields="replaceFields"
             />
-            <!-- <a-tree-select-node>
-
-              </a-tree-select-node> -->
-            <!-- <a-tree-select-node key="0-1" value="parent 1" title="parent 1">
-                <a-tree-select-node key="0-1-1" value="parent 1-0" title="parent 1-0">
-                  <a-tree-select-node key="random" :selectable="false" value="leaf1" title="my leaf" />
-                  <a-tree-select-node key="random1" value="leaf2" title="your leaf" />
-                </a-tree-select-node>
-                <a-tree-select-node key="random2" value="parent 1-1" title="parent 1-1">
-                  <a-tree-select-node key="random3" value="sss">
-                    <b slot="title" style="color: #08c">sss</b>
-                  </a-tree-select-node>
-                </a-tree-select-node>
-              </a-tree-select-node> -->
-
           </a-col>
         </a-row>
 
@@ -76,12 +77,18 @@
             :span="18"
           >
             <a-input
-              placeholder="Basic usage" />
+              v-model.trim="departLabel"
+              placeholder="请输入部门名称" />
           </a-col>
         </a-row>
       </div>
     </a-modal>
-    <a-modal v-model="editTreeNodeVisabled" title="Basic Modal">
+    <a-modal
+      v-model="editTreeNodeVisabled"
+      title="编辑节点"
+      @ok="putDepart"
+      :confirm-loading="confirmLoading"
+    >
       <a-input v-model="editTreeNodeValue" ></a-input>
     </a-modal>
   </div>
@@ -90,31 +97,7 @@
 
 <script>
 import { Tree } from 'ant-design-vue'
-const treeData = [
-  {
-    title: '全校区1',
-    key: '0-0',
-    slots: { title: '0-0' },
-    children: [
-      {
-        title: '教练部',
-        key: '0-0-0',
-        lots: { title: '0-0-0' },
-        disabled: true,
-        children: [
-          { title: '销售一部', key: '0-0-0-0', slots: { title: '0-0-0-0' }, disableCheckbox: true },
-          { title: '销售二部', key: '0-0-0-1', slots: { title: '0-0-0-1' } }
-        ]
-      },
-      {
-        title: '市场部',
-        key: '0-0-1',
-        slots: { title: '0-0-1' },
-        children: [{ key: '0-0-1-0', title: '市场大王', slots: { title: '0-0-1-0' } }]
-      }
-    ]
-  }
-]
+import { deleteDepart, getDepart, postDepart, putDepart } from '@/api/role'
 export default {
   name: 'Organiza',
   components: {
@@ -122,53 +105,116 @@ export default {
   },
   computed: {
       replaceFields () {
-          return { children: 'children', title: 'title', key: 'key', value: 'title' }
+          return { children: 'children', title: 'label', key: 'id', value: 'label' }
       }
   },
-  created () {
-      this.transferTreeData()
+  async created () {
+    await this.getDepart()
   },
   watch: {
-    value (value) {
-      console.log(value)
+    currentClickNode () {
+      this.$emit('currentClickNode', this.currentClickNode)
     }
   },
   data () {
       return {
         editTreeNodeValue: '',
+        editTreeNodeId: '',
         editTreeNodeVisabled: false,
-        aa: [ '0-0', '0-0-0', '0-0-0-0', '0-0-0-0', '0-0-1', '0-0-1-0' ],
+        flatTreeData: [],
         // tree选择
         treeExpandedKeys: [],
-        value: undefined,
+        parentId: '',
+        parentLabel: '',
         // ---------------------------
-        departmentVisible: false,
-        treeData,
+        visible: false,
+        confirmLoading: false,
+        departLabel: '', // add or edit时 部门名称
+        treeData: [],
         currentClickNode: ''
       }
   },
   methods: {
+    // 编辑节点
+    async putDepart () {
+      const $par = {
+        id: this.editTreeNodeId,
+        label: this.editTreeNodeValue
+      }
+      this.confirmLoading = true
+      const { code, data } = await putDepart($par)
+      this.confirmLoading = false
+      if (code === 0) {
+        console.log(data)
+        data ? this.$message.success('编辑成功') : this.$message.error('编辑失败')
+      }
+      this.editTreeNodeVisabled = false
+      this.getDepart()
+    },
+    // 选择树节点
+    selectTreeNode (value, node, extra) {
+        console.log(value, node, extra)
+        const { key } = extra.selectedNodes[0]
+        this.parentId = key
+    },
+    // 删除部门
+    async deleteDepart (item) {
+      const { code, data } = await deleteDepart(item.id)
+      if (code === 0) {
+        console.log(data)
+        data ? this.$message.success('删除成功') : this.$message.error('删除失败')
+      }
+      this.getDepart()
+    },
+    // 新增部门
+    async postDepart () {
+      const $par = {
+        parentId: this.parentId,
+        label: this.departLabel,
+        children: [],
+        id: ''
+      }
+      this.confirmLoading = true
+      const { code, data } = await postDepart($par)
+      this.confirmLoading = false
+      if (code === 0) {
+        console.log(data)
+      }
+      this.getDepart()
+      this.visible = false
+    },
+    // 查询部门
+    async getDepart () {
+      const { code, data } = await getDepart()
+      if (code === 0) {
+        console.log(data)
+        this.treeData = data
+        this.transferTreeData()
+      }
+    },
 
-    //  将树节点拍平, 便于使用slot自定义渲染树
+    //  将树节点拍平, 便于使用slot自定义渲染树 , 同时把treeData全部加上slots
     transferTreeData () {
-        const a = []
+        const arr = []
         const recursionTreeData = (treeData) => {
             console.log(treeData, 1)
-                return treeData.forEach(item => {
-                    if (item.hasOwnProperty('children')) {
+                treeData.forEach(item => {
+                  console.log(item, 'item')
+                    if (Array.isArray(item.children) && item.children.length > 0) {
                         recursionTreeData(item.children)
                     }
-                    const { title, key, slots } = item
-                    a.push({ title, key, slots })
+                    item.slots = { title: item.id }
+                    const { label, id } = item
+                    arr.push({ title: label, id })
                 })
             }
-         recursionTreeData(this.treeData)
-        this.aa = a
+        recursionTreeData(this.treeData)
+        this.flatTreeData = arr
     },
     handleOk () {},
     handclick (item) {
         this.editTreeNodeValue = item.title
-
+        this.editTreeNodeId = item.id
         this.editTreeNodeVisabled = true
     },
     // 当前选中的树节点的key
@@ -178,6 +224,10 @@ export default {
     },
     onCheck (checkedKeys, info) {
       console.log('onCheck', checkedKeys, info)
+    },
+    openModal () {
+      this.visible = true
+      this.departLabel = ''
     }
   }
 }

src/views/roleIng/staff/staffAdmin.vue

@@ -26,22 +26,23 @@
         :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
         :columns="columns"
         :data-source="data"
+        :loading="loading"
       >
         <template slot="action" slot-scope="text, record">
           <a @click="editRow(text, record)">编辑</a>
         </template>
       </a-table>
     </a-card>
-    <a-modal v-model="visible" :width="1000" title="Basic Modal" @ok="handleOk">
-      <edit/>
+    <a-modal v-model="visible" :width="700" style="height: 500px" title="新增员工" @ok="handleOk">
+      <edit ref="editForm"/>
     </a-modal>
   </div>
 
 </template>
 
 <script>
-
 import edit from './edit'
+import { searchUser } from '@/api/role'
 const columns = [
   {
     title: '员工编号',
@@ -109,6 +110,19 @@ export default {
   components: {
       edit
   },
+  props: {
+    departmentId: {
+      type: String,
+      required: true
+    }
+  },
+  watch: {
+    departmentId: {
+      handler () {
+        this.searchUser()
+      }
+    }
+  },
   data () {
       return {
         columns,
@@ -130,7 +144,26 @@ export default {
       }
   },
   methods: {
-      handleOk () {},
+    // 搜索人员
+    async searchUser () {
+      const $par = {
+        departmentId: this.departmentId,
+        keyWord: '',
+        state: '',
+        curPage: 1
+      }
+      this.loading = true
+      const { code, data } = await searchUser($par)
+      this.loading = false
+      if (code === 0) {
+        console.log(data)
+      }
+    },
+    handleOk () {
+      const $par = this.$refs.editForm.handleSubmit()
+
+      console.log($par, '$par')
+    },
     // 选中行
     onSelectChange (selectedRowKeys) {
       console.log('selectedRowKeys changed: ', selectedRowKeys)