diff --git a/src/api/phone.js b/src/api/phone.js
new file mode 100644
index 0000000..09f21e5
--- /dev/null
+++ b/src/api/phone.js
@@ -0,0 +1,36 @@
+// 分机管理接口
+import request from '@/utils/request'
+
+// 分机列表
+export function phoneList(params) {
+  return request({
+    url: '/extensionPhone/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加分机
+export function addPhone(params) {
+  return request({
+    url: '/extensionPhone/add',
+    method: 'post',
+    params
+  })
+}
+// 更新分机
+export function updatePhone(params) {
+  return request({
+    url: '/extensionPhone/update',
+    method: 'post',
+    params
+  })
+}
+// 绑定坐席
+export function bindSeats(params) {
+  return request({
+    url: '/extensionPhone/bindUsers',
+    method: 'post',
+    params
+  })
+}

diff --git a/src/api/phone.js b/src/api/phone.js
new file mode 100644
index 0000000..09f21e5
--- /dev/null
+++ b/src/api/phone.js
@@ -0,0 +1,36 @@
+// 分机管理接口
+import request from '@/utils/request'
+
+// 分机列表
+export function phoneList(params) {
+  return request({
+    url: '/extensionPhone/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加分机
+export function addPhone(params) {
+  return request({
+    url: '/extensionPhone/add',
+    method: 'post',
+    params
+  })
+}
+// 更新分机
+export function updatePhone(params) {
+  return request({
+    url: '/extensionPhone/update',
+    method: 'post',
+    params
+  })
+}
+// 绑定坐席
+export function bindSeats(params) {
+  return request({
+    url: '/extensionPhone/bindUsers',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index 18700f3..8b512d5 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -13,6 +13,12 @@
   },
   children: [
     {
+      path: '/phone',
+      name: 'Phone',
+      component: () => import('@/views/phoneManage/phoneManage'),
+      meta: { title: '分机管理', icon: 'tree', permission: ['/phoneManage'] }
+    },
+    {
       path: '/resource',
       name: 'Resource',
       component: () => import('@/views/system/resource/listResource'),

diff --git a/src/api/phone.js b/src/api/phone.js
new file mode 100644
index 0000000..09f21e5
--- /dev/null
+++ b/src/api/phone.js
@@ -0,0 +1,36 @@
+// 分机管理接口
+import request from '@/utils/request'
+
+// 分机列表
+export function phoneList(params) {
+  return request({
+    url: '/extensionPhone/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加分机
+export function addPhone(params) {
+  return request({
+    url: '/extensionPhone/add',
+    method: 'post',
+    params
+  })
+}
+// 更新分机
+export function updatePhone(params) {
+  return request({
+    url: '/extensionPhone/update',
+    method: 'post',
+    params
+  })
+}
+// 绑定坐席
+export function bindSeats(params) {
+  return request({
+    url: '/extensionPhone/bindUsers',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index 18700f3..8b512d5 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -13,6 +13,12 @@
   },
   children: [
     {
+      path: '/phone',
+      name: 'Phone',
+      component: () => import('@/views/phoneManage/phoneManage'),
+      meta: { title: '分机管理', icon: 'tree', permission: ['/phoneManage'] }
+    },
+    {
       path: '/resource',
       name: 'Resource',
       component: () => import('@/views/system/resource/listResource'),
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index c046487..73383e0 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -26,6 +26,22 @@
       'communications',
       'area'
     ])
+  },
+  mounted() {
+    this.fetchCaseRemind()
+  },
+  methods: {
+    fetchCaseRemind() {
+      // TODO: 调用后台接口
+      
+      this.$notify.warning({
+        title: '待办',
+        dangerouslyUseHTMLString: true,
+        message: '您有1条待办事件<br/>您有2条待办督办',
+        duration: 0,
+        position: 'bottom-right'
+      })
+    }
   }
 }
 </script>

diff --git a/src/api/phone.js b/src/api/phone.js
new file mode 100644
index 0000000..09f21e5
--- /dev/null
+++ b/src/api/phone.js
@@ -0,0 +1,36 @@
+// 分机管理接口
+import request from '@/utils/request'
+
+// 分机列表
+export function phoneList(params) {
+  return request({
+    url: '/extensionPhone/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加分机
+export function addPhone(params) {
+  return request({
+    url: '/extensionPhone/add',
+    method: 'post',
+    params
+  })
+}
+// 更新分机
+export function updatePhone(params) {
+  return request({
+    url: '/extensionPhone/update',
+    method: 'post',
+    params
+  })
+}
+// 绑定坐席
+export function bindSeats(params) {
+  return request({
+    url: '/extensionPhone/bindUsers',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index 18700f3..8b512d5 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -13,6 +13,12 @@
   },
   children: [
     {
+      path: '/phone',
+      name: 'Phone',
+      component: () => import('@/views/phoneManage/phoneManage'),
+      meta: { title: '分机管理', icon: 'tree', permission: ['/phoneManage'] }
+    },
+    {
       path: '/resource',
       name: 'Resource',
       component: () => import('@/views/system/resource/listResource'),
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index c046487..73383e0 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -26,6 +26,22 @@
       'communications',
       'area'
     ])
+  },
+  mounted() {
+    this.fetchCaseRemind()
+  },
+  methods: {
+    fetchCaseRemind() {
+      // TODO: 调用后台接口
+      
+      this.$notify.warning({
+        title: '待办',
+        dangerouslyUseHTMLString: true,
+        message: '您有1条待办事件<br/>您有2条待办督办',
+        duration: 0,
+        position: 'bottom-right'
+      })
+    }
   }
 }
 </script>
diff --git a/src/views/phoneManage/bindSeats.vue b/src/views/phoneManage/bindSeats.vue
new file mode 100644
index 0000000..1e01718
--- /dev/null
+++ b/src/views/phoneManage/bindSeats.vue
@@ -0,0 +1,112 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" :title="titleText" width="330px" append-to-body>
+    <el-scrollbar>
+      <el-tree
+        v-loading="loading"
+        ref="tree"
+        :props="defaultProps"
+        :data="dataList"
+        :default-expanded-keys="defaultExpanded"
+        :default-checked-keys="defaultChecked"
+        :default-expand-all="defaultExpandAll"
+        show-checkbox
+        check-strictly
+        node-key="id"
+        @check-change="handleCheckChange"/>
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+// import { toTreeList, getShowItem } from '@/utils/structure'
+import { getUserSimpleList } from '@/api/system/user'
+import { bindSeats } from '@/api/phone'
+
+export default {
+  name: 'BindSeats',
+  data() {
+    return {
+      extensionPhoneId: '', // 分机id
+      extensionPhoneName: '', // 分机名称
+      ids: [], // 选中项id
+      dialogFormVisible: false, // 对话框是否显示
+      defaultProps: {
+        label: 'name',
+        children: 'children'
+      },
+      dataList: null, // 列表数据
+      defaultExpanded: [], // 默认展开的项
+      defaultChecked: [], // 默认选中的树
+      loading: false, // 加载动态效果
+      defaultExpandAll: true // 是否展开树
+    }
+  },
+  computed: {
+    titleText: function() {
+      return '绑定坐席'
+    }
+  },
+  created: function() {
+    // this.fetchUserList()
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogFormVisible, row) {
+      this.loading = true
+      this.extensionPhoneId = row.id
+      this.extensionPhoneName = row.phonenumber
+      const checked = row.seatsIds.split(',')
+      this.defaultChecked = checked
+      this.dialogFormVisible = dialogFormVisible
+      this.fetchUserList()
+    },
+    // 获取坐席员列表
+    fetchUserList() {
+      const params = {
+        roleTips: 'receiver,monitor'
+      }
+      getUserSimpleList(params).then(response => {
+        if (response.code === 200) {
+          this.dataList = response.data
+          this.loading = false
+        }
+      })
+    },
+    saveData: function() {
+      this.ids = this.$refs.tree.getCheckedKeys()
+      bindSeats(this.extensionPhoneId, this.ids).then(response => {
+        if (response.code === 200) {
+          this.$message.success('角色分配成功')
+          this.dialogFormVisible = false
+          this.$emit('watchChild')
+        }
+      })
+    },
+    handleCheckChange() {
+      console.log('handleCheckChange')
+    },
+    // 点击取消
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .el-dialog{
+    min-width:350px !important;
+  }
+  .el-tree{
+    max-height:300px;
+  }
+  .el-select{
+    width: 100%;
+  }
+</style>

diff --git a/src/api/phone.js b/src/api/phone.js
new file mode 100644
index 0000000..09f21e5
--- /dev/null
+++ b/src/api/phone.js
@@ -0,0 +1,36 @@
+// 分机管理接口
+import request from '@/utils/request'
+
+// 分机列表
+export function phoneList(params) {
+  return request({
+    url: '/extensionPhone/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加分机
+export function addPhone(params) {
+  return request({
+    url: '/extensionPhone/add',
+    method: 'post',
+    params
+  })
+}
+// 更新分机
+export function updatePhone(params) {
+  return request({
+    url: '/extensionPhone/update',
+    method: 'post',
+    params
+  })
+}
+// 绑定坐席
+export function bindSeats(params) {
+  return request({
+    url: '/extensionPhone/bindUsers',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index 18700f3..8b512d5 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -13,6 +13,12 @@
   },
   children: [
     {
+      path: '/phone',
+      name: 'Phone',
+      component: () => import('@/views/phoneManage/phoneManage'),
+      meta: { title: '分机管理', icon: 'tree', permission: ['/phoneManage'] }
+    },
+    {
       path: '/resource',
       name: 'Resource',
       component: () => import('@/views/system/resource/listResource'),
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index c046487..73383e0 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -26,6 +26,22 @@
       'communications',
       'area'
     ])
+  },
+  mounted() {
+    this.fetchCaseRemind()
+  },
+  methods: {
+    fetchCaseRemind() {
+      // TODO: 调用后台接口
+      
+      this.$notify.warning({
+        title: '待办',
+        dangerouslyUseHTMLString: true,
+        message: '您有1条待办事件<br/>您有2条待办督办',
+        duration: 0,
+        position: 'bottom-right'
+      })
+    }
   }
 }
 </script>
diff --git a/src/views/phoneManage/bindSeats.vue b/src/views/phoneManage/bindSeats.vue
new file mode 100644
index 0000000..1e01718
--- /dev/null
+++ b/src/views/phoneManage/bindSeats.vue
@@ -0,0 +1,112 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" :title="titleText" width="330px" append-to-body>
+    <el-scrollbar>
+      <el-tree
+        v-loading="loading"
+        ref="tree"
+        :props="defaultProps"
+        :data="dataList"
+        :default-expanded-keys="defaultExpanded"
+        :default-checked-keys="defaultChecked"
+        :default-expand-all="defaultExpandAll"
+        show-checkbox
+        check-strictly
+        node-key="id"
+        @check-change="handleCheckChange"/>
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+// import { toTreeList, getShowItem } from '@/utils/structure'
+import { getUserSimpleList } from '@/api/system/user'
+import { bindSeats } from '@/api/phone'
+
+export default {
+  name: 'BindSeats',
+  data() {
+    return {
+      extensionPhoneId: '', // 分机id
+      extensionPhoneName: '', // 分机名称
+      ids: [], // 选中项id
+      dialogFormVisible: false, // 对话框是否显示
+      defaultProps: {
+        label: 'name',
+        children: 'children'
+      },
+      dataList: null, // 列表数据
+      defaultExpanded: [], // 默认展开的项
+      defaultChecked: [], // 默认选中的树
+      loading: false, // 加载动态效果
+      defaultExpandAll: true // 是否展开树
+    }
+  },
+  computed: {
+    titleText: function() {
+      return '绑定坐席'
+    }
+  },
+  created: function() {
+    // this.fetchUserList()
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogFormVisible, row) {
+      this.loading = true
+      this.extensionPhoneId = row.id
+      this.extensionPhoneName = row.phonenumber
+      const checked = row.seatsIds.split(',')
+      this.defaultChecked = checked
+      this.dialogFormVisible = dialogFormVisible
+      this.fetchUserList()
+    },
+    // 获取坐席员列表
+    fetchUserList() {
+      const params = {
+        roleTips: 'receiver,monitor'
+      }
+      getUserSimpleList(params).then(response => {
+        if (response.code === 200) {
+          this.dataList = response.data
+          this.loading = false
+        }
+      })
+    },
+    saveData: function() {
+      this.ids = this.$refs.tree.getCheckedKeys()
+      bindSeats(this.extensionPhoneId, this.ids).then(response => {
+        if (response.code === 200) {
+          this.$message.success('角色分配成功')
+          this.dialogFormVisible = false
+          this.$emit('watchChild')
+        }
+      })
+    },
+    handleCheckChange() {
+      console.log('handleCheckChange')
+    },
+    // 点击取消
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .el-dialog{
+    min-width:350px !important;
+  }
+  .el-tree{
+    max-height:300px;
+  }
+  .el-select{
+    width: 100%;
+  }
+</style>
diff --git a/src/views/phoneManage/editPhone.vue b/src/views/phoneManage/editPhone.vue
new file mode 100644
index 0000000..d90a736
--- /dev/null
+++ b/src/views/phoneManage/editPhone.vue
@@ -0,0 +1,146 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="phoneForm" size="small" label-position="right" label-width="90px">
+      <el-row :gutter="20" type="flex" justify="center">
+        <el-col :span="16" c>
+          <el-form-item label="分机号码" prop="phonenumber">
+            <el-input v-model.trim="phoneForm.phonenumber" :disabled="disabled" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" type="flex" justify="center">
+        <el-col :span="16">
+          <el-form-item label="备注" prop="message">
+            <el-input v-model.trim="phoneForm.message" :disabled="disabled" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { addPhone, updatePhono } from '@/api/phone'
+
+export default {
+  name: 'EditPhone',
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update
+      phoneForm: {
+        id: '',
+        phonenumber: '',
+        message: ''
+      }, // 表单
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        info: '详情'
+      }, // 表头显示标题
+      rules: {
+        phonenumber: [{ required: true, message: '电话号码不能为空', trigger: ['blur', 'change'] }]
+      }, // 前端校验规则
+      roleName: '',
+      disabled: false,
+      deptShow: true,
+      btnLoading: false // 保存按钮的加载中状态
+    }
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
+      if (dialogStatus === 'create') { // 如果是新增，清除验证
+        this.disabled = false
+        this.resetForm()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (dialogStatus === 'update' || dialogStatus === 'info') { // 如果是修改，将row中数据填写到输入框中
+        this.phoneForm = {
+          id: row.id,
+          phonenumber: row.phonenumber,
+          message: row.message
+        }
+        if (dialogStatus === 'info') {
+          this.disabled = true
+        } else {
+          this.disabled = false
+        }
+      }
+    },
+    // 重置表单
+    resetForm() {
+      this.phoneForm = {
+        id: '',
+        phonenumber: '',
+        message: ''
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.phoneForm)
+        if (valid) {
+          this.btnLoading = true
+          addPhone(this.phoneForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('新增成功')
+              this.$emit('refresh')
+              this.dialogFormVisible = false
+            }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
+          })
+        }
+      })
+    },
+    // 修改数据
+    updateData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.btnLoading = true
+          updatePhono(this.phoneForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('refresh')
+              this.dialogFormVisible = false
+            }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .el-dialog{
+    width:700px
+  }
+  .el-select{
+    width: 100%;
+  }
+</style>

diff --git a/src/api/phone.js b/src/api/phone.js
new file mode 100644
index 0000000..09f21e5
--- /dev/null
+++ b/src/api/phone.js
@@ -0,0 +1,36 @@
+// 分机管理接口
+import request from '@/utils/request'
+
+// 分机列表
+export function phoneList(params) {
+  return request({
+    url: '/extensionPhone/listPage',
+    method: 'get',
+    params
+  })
+}
+
+// 添加分机
+export function addPhone(params) {
+  return request({
+    url: '/extensionPhone/add',
+    method: 'post',
+    params
+  })
+}
+// 更新分机
+export function updatePhone(params) {
+  return request({
+    url: '/extensionPhone/update',
+    method: 'post',
+    params
+  })
+}
+// 绑定坐席
+export function bindSeats(params) {
+  return request({
+    url: '/extensionPhone/bindUsers',
+    method: 'post',
+    params
+  })
+}
diff --git a/src/router/modules/system.js b/src/router/modules/system.js
index 18700f3..8b512d5 100644
--- a/src/router/modules/system.js
+++ b/src/router/modules/system.js
@@ -13,6 +13,12 @@
   },
   children: [
     {
+      path: '/phone',
+      name: 'Phone',
+      component: () => import('@/views/phoneManage/phoneManage'),
+      meta: { title: '分机管理', icon: 'tree', permission: ['/phoneManage'] }
+    },
+    {
       path: '/resource',
       name: 'Resource',
       component: () => import('@/views/system/resource/listResource'),
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index c046487..73383e0 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -26,6 +26,22 @@
       'communications',
       'area'
     ])
+  },
+  mounted() {
+    this.fetchCaseRemind()
+  },
+  methods: {
+    fetchCaseRemind() {
+      // TODO: 调用后台接口
+      
+      this.$notify.warning({
+        title: '待办',
+        dangerouslyUseHTMLString: true,
+        message: '您有1条待办事件<br/>您有2条待办督办',
+        duration: 0,
+        position: 'bottom-right'
+      })
+    }
   }
 }
 </script>
diff --git a/src/views/phoneManage/bindSeats.vue b/src/views/phoneManage/bindSeats.vue
new file mode 100644
index 0000000..1e01718
--- /dev/null
+++ b/src/views/phoneManage/bindSeats.vue
@@ -0,0 +1,112 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" :title="titleText" width="330px" append-to-body>
+    <el-scrollbar>
+      <el-tree
+        v-loading="loading"
+        ref="tree"
+        :props="defaultProps"
+        :data="dataList"
+        :default-expanded-keys="defaultExpanded"
+        :default-checked-keys="defaultChecked"
+        :default-expand-all="defaultExpandAll"
+        show-checkbox
+        check-strictly
+        node-key="id"
+        @check-change="handleCheckChange"/>
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+// import { toTreeList, getShowItem } from '@/utils/structure'
+import { getUserSimpleList } from '@/api/system/user'
+import { bindSeats } from '@/api/phone'
+
+export default {
+  name: 'BindSeats',
+  data() {
+    return {
+      extensionPhoneId: '', // 分机id
+      extensionPhoneName: '', // 分机名称
+      ids: [], // 选中项id
+      dialogFormVisible: false, // 对话框是否显示
+      defaultProps: {
+        label: 'name',
+        children: 'children'
+      },
+      dataList: null, // 列表数据
+      defaultExpanded: [], // 默认展开的项
+      defaultChecked: [], // 默认选中的树
+      loading: false, // 加载动态效果
+      defaultExpandAll: true // 是否展开树
+    }
+  },
+  computed: {
+    titleText: function() {
+      return '绑定坐席'
+    }
+  },
+  created: function() {
+    // this.fetchUserList()
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogFormVisible, row) {
+      this.loading = true
+      this.extensionPhoneId = row.id
+      this.extensionPhoneName = row.phonenumber
+      const checked = row.seatsIds.split(',')
+      this.defaultChecked = checked
+      this.dialogFormVisible = dialogFormVisible
+      this.fetchUserList()
+    },
+    // 获取坐席员列表
+    fetchUserList() {
+      const params = {
+        roleTips: 'receiver,monitor'
+      }
+      getUserSimpleList(params).then(response => {
+        if (response.code === 200) {
+          this.dataList = response.data
+          this.loading = false
+        }
+      })
+    },
+    saveData: function() {
+      this.ids = this.$refs.tree.getCheckedKeys()
+      bindSeats(this.extensionPhoneId, this.ids).then(response => {
+        if (response.code === 200) {
+          this.$message.success('角色分配成功')
+          this.dialogFormVisible = false
+          this.$emit('watchChild')
+        }
+      })
+    },
+    handleCheckChange() {
+      console.log('handleCheckChange')
+    },
+    // 点击取消
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .el-dialog{
+    min-width:350px !important;
+  }
+  .el-tree{
+    max-height:300px;
+  }
+  .el-select{
+    width: 100%;
+  }
+</style>
diff --git a/src/views/phoneManage/editPhone.vue b/src/views/phoneManage/editPhone.vue
new file mode 100644
index 0000000..d90a736
--- /dev/null
+++ b/src/views/phoneManage/editPhone.vue
@@ -0,0 +1,146 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="phoneForm" size="small" label-position="right" label-width="90px">
+      <el-row :gutter="20" type="flex" justify="center">
+        <el-col :span="16" c>
+          <el-form-item label="分机号码" prop="phonenumber">
+            <el-input v-model.trim="phoneForm.phonenumber" :disabled="disabled" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" type="flex" justify="center">
+        <el-col :span="16">
+          <el-form-item label="备注" prop="message">
+            <el-input v-model.trim="phoneForm.message" :disabled="disabled" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { addPhone, updatePhono } from '@/api/phone'
+
+export default {
+  name: 'EditPhone',
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update
+      phoneForm: {
+        id: '',
+        phonenumber: '',
+        message: ''
+      }, // 表单
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        info: '详情'
+      }, // 表头显示标题
+      rules: {
+        phonenumber: [{ required: true, message: '电话号码不能为空', trigger: ['blur', 'change'] }]
+      }, // 前端校验规则
+      roleName: '',
+      disabled: false,
+      deptShow: true,
+      btnLoading: false // 保存按钮的加载中状态
+    }
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
+      if (dialogStatus === 'create') { // 如果是新增，清除验证
+        this.disabled = false
+        this.resetForm()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (dialogStatus === 'update' || dialogStatus === 'info') { // 如果是修改，将row中数据填写到输入框中
+        this.phoneForm = {
+          id: row.id,
+          phonenumber: row.phonenumber,
+          message: row.message
+        }
+        if (dialogStatus === 'info') {
+          this.disabled = true
+        } else {
+          this.disabled = false
+        }
+      }
+    },
+    // 重置表单
+    resetForm() {
+      this.phoneForm = {
+        id: '',
+        phonenumber: '',
+        message: ''
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.phoneForm)
+        if (valid) {
+          this.btnLoading = true
+          addPhone(this.phoneForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('新增成功')
+              this.$emit('refresh')
+              this.dialogFormVisible = false
+            }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
+          })
+        }
+      })
+    },
+    // 修改数据
+    updateData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.btnLoading = true
+          updatePhono(this.phoneForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('refresh')
+              this.dialogFormVisible = false
+            }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .el-dialog{
+    width:700px
+  }
+  .el-select{
+    width: 100%;
+  }
+</style>
diff --git a/src/views/phoneManage/phoneManage.vue b/src/views/phoneManage/phoneManage.vue
new file mode 100644
index 0000000..9a834a9
--- /dev/null
+++ b/src/views/phoneManage/phoneManage.vue
@@ -0,0 +1,179 @@
+<template>
+  <app-container>
+    <search-area :need-clear="false" :need-search-more="false" :size="size" type="default" search-more-type="default" @search="search">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" :size="size" placeholder="关键字" clearable/>
+      </search-item>
+      <el-button slot="btns" class="filter-item" style="" size="small" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
+      <el-button slot="btns" class="filter-item" style="" size="small" type="primary" icon="el-icon-delete" @click="del">删除</el-button>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :size="size"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption">
+      <template slot="columns">
+        <el-table-column label="操作" align="center">
+          <template slot-scope="scope">
+            <!--<el-button type="text" size="small" @click.stop="detail(scope.row)">详情</el-button>-->
+            <!--<el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>-->
+            <el-button type="text" size="small" @click.stop="bind(scope.row)">绑定坐席</el-button>
+            <el-button type="text" size="small" @click.stop="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <edit-phone ref="editdialog" @refresh="fetchData"/>
+    <bind-seats ref="bindseat" @refresh="fetchData"/>
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '@/components/layout/AppContainer'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import NormalTable from '@/components/NomalTable'
+import { phoneList, delPhone } from '@/api/phone'
+import EditPhone from './editPhone'
+import BindSeats from './bindSeats'
+
+export default {
+  name: 'PhoneManage',
+  components: { BindSeats, SearchArea, SearchItem, EditPhone, AppContainer, NormalTable },
+  data() {
+    return {
+      modularId: '',
+      status: '1',
+      list: [],
+      total: 0,
+      listLoading: true, // 列表加载动画
+      multipleSelection: [], // 多选选中项
+      listQuery: {
+        keywords: '',
+        offset: 1,
+        limit: 100,
+        sort: '',
+        order: ''
+      }, // 筛选条件
+      columns: [
+        {
+          text: '分机号',
+          value: 'phoneNumber',
+          align: 'center'
+        },
+        {
+          text: '已绑定坐席',
+          value: 'seats',
+          align: 'center'
+        },
+        {
+          text: '备注',
+          value: 'messsage',
+          align: 'center'
+        }
+      ], // 显示列
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultipleSelection: false // 需要多选列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      },
+      size: 'small'
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    search() {
+      this.fetchData(false)
+    },
+    // 获取数据
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      this.listLoading = true
+      phoneList(this.listQuery).then(response => {
+        if (response.code === 200) {
+          // response.data.rows = [
+          //   { 'id': '1', 'phoneNumber': '6042', 'seats': '张三', 'seatsIds': '1', 'message': '测试分机' }
+          // ]
+          this.list = response.data.rows
+          this.total = response.data.total
+          this.listLoading = false
+        }
+      })
+    },
+    detail(row) {
+      this.$refs.editdialog.initDialog('info', true, row)
+    },
+    // 添加分机
+    add(row) {
+      this.$refs.editdialog.initDialog('create', true, row)
+    },
+    // 编辑分机
+    edit(row) {
+      this.$refs.editdialog.initDialog('update', true, row)
+    },
+    // 绑定坐席
+    bind(row) {
+      this.$refs.bindseat.initDialog(true, row)
+    },
+    // 删除分机
+    del(row) {
+      this.$confirm(
+        '确定要删除该分机吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        delPhone(row.secondIndex).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    watchChild() {
+      console.log('watchChild')
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .btn-div{
+    margin-bottom: 10px;
+  }
+</style>