diff --git a/README.en.md b/README.en.md
new file mode 100644
index 0000000..71b754b
--- /dev/null
+++ b/README.en.md
@@ -0,0 +1,36 @@
+# 大娃-VUE
+
+#### Description
+大娃前端
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Instructions
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Contribution
+
+1.  Fork the repository
+2.  Create Feat_xxx branch
+3.  Commit your code
+4.  Create Pull Request
+
+
+#### Gitee Feature
+
+1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
+2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
+3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
+4.  The most valuable open source project [GVP](https://gitee.com/gvp)
+5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
+6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
diff --git a/src/api/course/course.js b/src/api/course/course.js
new file mode 100644
index 0000000..1c6d574
--- /dev/null
+++ b/src/api/course/course.js
@@ -0,0 +1,67 @@
+import request from '@/utils/request'
+
+const courseApi = {
+//   add: 'sys/menu/add',
+  get: '/courseManagement/course/details',
+//   update: 'sys/menu/update',
+//   del: 'sys/menu/delete',
+//   updateStatus: 'sys/menu/updateStatus',
+  list: '/courseManagement/course/listPage'
+}
+
+// export function menuAdd (params) {
+//   return request({
+//     url: menuApi.add,
+//     method: 'post',
+//     data: params
+//   })
+// }
+// export function menuGet (params) {
+//   return request({
+//     url: menuApi.get,
+//     method: 'post',
+//     data: params
+//   })
+// }
+// export function menuUpdate (params) {
+//   return request({
+//     url: menuApi.update,
+//     method: 'post',
+//     data: params
+//   })
+// }
+// export function menuDelete (params) {
+//   return request({
+//     url: menuApi.del,
+//     method: 'post',
+//     data: params
+//   })
+// }
+
+// 查询课程列表
+export function getCourseList (params) {
+  return request({
+    url: courseApi.list,
+    method: 'get',
+    params: params
+  })
+}
+
+// 查看课程详情
+export function getCourseDetails (params) {
+  return request({
+    url:courseApi.get,
+    method:'get',
+    params:params
+  })
+}
+
+
+
+// export function menuUpdateStatus (params) {
+//   return request({
+//     url: menuApi.updateStatus,
+//     method: 'post',
+//     data: params
+//   })
+// }
diff --git a/src/api/course/customCourse.js b/src/api/course/customCourse.js
new file mode 100644
index 0000000..b2dc4e7
--- /dev/null
+++ b/src/api/course/customCourse.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+const projectApi = {
+//   add: 'sys/menu/add',
+//   get: 'sys/menu/get',
+//   update: 'sys/menu/update',
+//   del: 'sys/menu/delete',
+//   updateStatus: 'sys/menu/updateStatus',
+  list: 'courseManagement/customCourse/listPage'
+}
+
+// export function menuAdd (params) {
+//   return request({
+//     url: menuApi.add,
+//     method: 'post',
+//     data: params
+//   })
+// }
+// export function menuGet (params) {
+//   return request({
+//     url: menuApi.get,
+//     method: 'post',
+//     data: params
+//   })
+// }
+// export function menuUpdate (params) {
+//   return request({
+//     url: menuApi.update,
+//     method: 'post',
+//     data: params
+//   })
+// }
+// export function menuDelete (params) {
+//   return request({
+//     url: menuApi.del,
+//     method: 'post',
+//     data: params
+//   })
+// }
+export function getcustomCourseList (params) {
+  return request({
+    url: customApi.list,
+    method: 'get',
+    params: params
+  })
+}
+// export function menuUpdateStatus (params) {
+//   return request({
+//     url: menuApi.updateStatus,
+//     method: 'post',
+//     data: params
+//   })
+// }
diff --git a/src/components/OrgTree/Index.vue b/src/components/OrgTree/Index.vue
new file mode 100644
index 0000000..7a6d8c4
--- /dev/null
+++ b/src/components/OrgTree/Index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="organization-popover">
+    <!-- 气泡框位置 placement="bottomLeft" -->
+    <!-- 触发行为 trigger="click" -->
+    <!-- 卡片类名 overlayClassName="popover-tree" 注意这里的css类要放到index.html才会生效-->
+    <!-- 隐藏后是否销毁 :destroyTooltipOnHide="true" -->
+    <a-popover placement="bottomLeft" trigger="click" overlayClassName="popover-tree" :destroyTooltipOnHide="true">
+      <template slot="content" id="popover-tree">
+        <a-input placeholder="输入关键字进行过滤" @change="onChange" allow-clear v-show="treeData.length != 0"></a-input>
+        <!-- 树数据源 :tree-data="treeData" -->
+        <!-- 是否自动展开父节点 :auto-expand-parent="false" -->
+        <!-- 是否节点占据一行 :blockNode="true" -->
+        <!-- 是否展示连接线 showLine 默认false -->
+        <!-- 替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段 replaceFields -->
+        <!-- 默认选中的树节点 defaultSelectedKeys -->
+        <!-- 展开指定的树节点 :expanded-keys="expandedKeys" -->
+        <!-- 点击树节点触发 :select="selectTree" -->
+        <!-- 展开/收起节点时触发 @expand="onExpand" -->
+        <a-tree :tree-data="treeData" :auto-expand-parent="autoExpandParent" :blockNode="true" :defaultSelectedKeys="defaultSelectedKeys" :expanded-keys="expandedKeys" @select="selectTree" @expand="onExpand"></a-tree>
+        <a-empty v-show="treeData.length == 0" description="没有找到组织机构树数据" :image-style="{height: '60px', marginTop: '10px'}" />
+      </template>
+      <a-button class="organization-tree-button" type="primary">组织机构树
+        <a-icon type="down" />
+      </a-button>
+    </a-popover>
+    <div class="organization-tree-organizationName">
+      <p class="">{{ selectTitle || '请选择组织机构树' }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+// 组件使用方法
+// 1. 引入 import orgTree from '@/components/OrgTree/Index'
+// 2. 注册 components: { orgTree },
+// 3. 在需要展示的位置放置组件
+//    <org-tree defaultOrganizationId="000100020001" startOrganizationId="00010002" @getSelectTreeKey="getSelectTreeKey"></org-tree>
+//    说明
+//      :defaultOrganizationId 传入默认组织机构ID，可为空，会检查传入的组织结构ID是否在组织机构树中，如不存在则会忽略
+//      :startOrganizationId 传入展示组织机构树的起始节点，可为空，但一旦传入会去组织机构树中匹配，如果匹配不到则不展示组织机构树 [满足控权场景]
+//      @getSelectTreeKey 当选中某一个组织机构数节点时的回调，传入默认组织机构ID时也会触发回调
+//
+//    回调函数示例
+//      getSelectTreeKey(key) {
+//        this.organizationId = key;
+//      }
+export default {
+  props: {
+    defaultOrganizationId: String, // 默认显示的组织机构节点
+    startOrganizationId: String, // 组织机构数从那个节点开始显示
+  },
+  data() {
+    return {
+      // 组织机构树的数据，后续应该从localStorage取
+      treeData: [],
+      filterText: null, // 搜索关键字
+      selectTitle: "", // 选择的组织机构数节点的标题
+      selectKey: "", // 选择的组织机构数节点的Key
+      autoExpandParent: true, // 是否自动展开父节点
+      defaultSelectedKeys: [], // 默认选中的树节点
+      expandedKeys: [], // 展开指定的树节点
+    };
+  },
+  created: function () {
+    // 组织机构树数据源过滤
+    const listData = [
+      {
+        title: '三峡大学',
+        key: '0001',
+        children: [
+          { title: '三峡大学文学院', key: '00010001' },
+          {
+            title: '三峡大学水利学院', key: '00010002', children: [
+              { title: '三峡大学水利学院第一学院', key: '000100020001' },
+              { title: '三峡大学水利学院第二学院', key: '000100020002' },
+              { title: '三峡大学水利学院第三学院', key: '000100020003' },
+              { title: '三峡大学水利学院第四学院', key: '000100020004' },
+              { title: '三峡大学水利学院第五学院', key: '000100020005' },
+              { title: '三峡大学水利学院第六学院', key: '000100020006' }
+            ]
+          },
+        ]
+      }
+    ];
+    if (!this.startOrganizationId) {
+      this.treeData = listData;
+    } else {
+      let currentNode = this.getCurrentNode(this.startOrganizationId, listData);
+      if (currentNode) this.treeData.push(currentNode);
+    }
+
+
+    // 检查传入的默认显示组织机构节点，如果正确则显示并回调
+    if (this.defaultOrganizationId) {
+      let currentNode = this.getCurrentNode(this.defaultOrganizationId, this.treeData);
+      if (currentNode) {
+        this.defaultSelectedKeys.push(this.defaultOrganizationId);
+        this.selectTitle = currentNode.title;
+        this.selectKey = this.defaultOrganizationId;
+        this.$emit('getSelectTreeKey', this.selectKey);
+      }
+    }
+    console.log(this.defaultSelectedKeys)
+  },
+  methods: {
+    // 点击组织机构数节点时调用
+    selectTree(selectedKeys, e) {
+      this.selectKey = e.node.eventKey;
+      this.selectTitle = e.node.title;
+      this.$emit('getSelectTreeKey', this.selectKey);
+    },
+    // 展开/收起节点时触发
+    onExpand(expandedKeys) {
+      this.expandedKeys = expandedKeys;
+      this.autoExpandParent = false;
+    },
+    // 筛选组织机构数方法
+    getParentKey(value, tree) {
+      if (!value) return;
+
+      for (let i = 0; i < tree.length; i++) {
+        const node = tree[i];
+
+        if (node.children) {
+          if (node.children.some(item => item.title.indexOf(value) > -1)) {
+            this.expandedKeys.push(node.key);
+          }
+
+          this.getParentKey(value, node.children);
+        }
+      }
+    },
+    // 获取组织机构树Key的Title
+    getCurrentNode(key, tree) {
+      if (!key) return null;
+
+      for (let i = 0; i < tree.length; i++) {
+        const node = tree[i];
+
+        if (node.key === key) return node;
+
+        if (node.children) {
+          return this.getCurrentNode(key, node.children);
+        }
+      }
+
+      return null;
+    },
+    // 搜索框内容发生变化时调用
+    onChange(e) {
+      const value = e.target.value;
+      const this_ = this;
+      this.expandedKeys = [];
+      this.getParentKey(value, this.treeData);
+      // console.log(this.expandedKeys);
+      this.filterText = value;
+    },
+  },
+}
+</script>
+
+<style scoped>
+.organization-popover {
+  display: flex;
+  border: 1px solid #ebeef5;
+  height: 40px;
+  margin-top: 8px;
+}
+.organization-popover > .organization-tree-organizationName {
+  background-color: #fff;
+  flex: 1;
+}
+.organization-popover > .organization-tree-organizationName > p {
+  margin: 0;
+  padding: 0 20px;
+  line-height: 40px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.organization-tree-button {
+  width: 164px;
+  height: 40px;
+  line-height: 40px;
+  float: left;
+  padding: 0px;
+  font-size: 14px;
+  position: relative;
+  margin-top: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/archives/user/Index.vue b/src/views/archives/user/Index.vue
new file mode 100644
index 0000000..2df4e90
--- /dev/null
+++ b/src/views/archives/user/Index.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+
+    <!-- 搜索区 -->
+    <a-space>
+      人员姓名:
+      <a-input style="width: 180px" v-model="organizationId"></a-input>
+      <a-button type="primary">查询</a-button>
+      <a-button type="primary">导出</a-button>
+    </a-space>
+
+    <org-tree defaultOrganizationId="000100020001" startOrganizationId="00010002" @getSelectTreeKey="getSelectTreeKey"></org-tree>
+
+    <!-- <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row>
+          <a-col :span="4">
+            <a-form-item label="人员姓名">
+
+            </a-form-item>
+          </a-col>
+
+        </a-row>
+      </a-form>
+    </div> -->
+
+  </div>
+</template>
+
+<script>
+import orgTree from '@/components/OrgTree/Index'
+
+export default {
+  components: { orgTree },
+  data() {
+    return {
+      organizationId: ''
+    }
+  },
+  methods: {
+    getSelectTreeKey(key) {
+      this.organizationId = key;
+    }
+  }
+}
+</script>
+
+<style scoped>
+a {
+  width: 100px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/course/CourseList.vue b/src/views/course/CourseList.vue
new file mode 100644
index 0000000..ed1966b
--- /dev/null
+++ b/src/views/course/CourseList.vue
@@ -0,0 +1,198 @@
+<template>
+  <div>
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="6" :sm="24">
+            <a-form-item label="课程名称">
+              <a-input v-model="queryParam.courseName" style="width: 100%" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="(!advanced && 8) || 24" :sm="24">
+            <span
+              class="table-page-search-submitButtons"
+              :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
+            >
+              <a-button type="primary" icon="search"  @click="$refs.table.refresh(true)">查询</a-button>
+              <a-button style="margin-left: 8px" icon="redo" @click="() => (queryParam = {})">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="handleEdit()">新建</a-button>
+      <a-button type="primary" icon="minus" @click="handleEdit()">删除</a-button>
+      <!-- <a-button type="dashed" @click="tableOption">{{ (optionAlertShow && '关闭') || '开启' }} alert</a-button> -->
+      <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /> </a-button>
+      </a-dropdown>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      rowKey="key"
+      :columns="columns"
+      :data="loadData"
+      :alert="options.alert"
+      :rowSelection="options.rowSelection"
+    >
+      
+        <template slot="action" slot-scope="text, record">
+          <a href="javascript:;" @click="handleEdit(record)">详情</a>
+          <a-divider type="vertical" />
+          <a href="javascript:;" @click="handleDetail(record)">课程</a>
+          <a-divider type="vertical" />
+          <a-popconfirm title="是否删除?" @confirm="() => handleDelete(record)">
+            <a href="javascript:;">删除</a>
+            <a-divider type="vertical" />
+          </a-popconfirm>
+          <router-link :to="'/dictionary/dictionaryItem/list/' + record.dictionaryCode">题库</router-link>
+        </template>
+      
+    </s-table>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { STable } from '@/components'
+import { getCourseList } from '@/api/course/course'
+
+export default {
+  name: 'TableList',
+  components: {
+    STable,
+  },
+  data() {
+    return {
+      mdl: {},
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'index',
+          width: 60,
+          customRender: (text, record, index) => {
+	          return index + 1
+	        }
+        },
+        {
+          title: '课程编号',
+          dataIndex: 'id',
+          align: 'center',
+        },
+        {
+          title:'课程名称',
+          dataIndex:'courseName',
+          align:'center'
+        },
+        {
+          title: '课时/分',
+          dataIndex: 'hour',
+          align:'center'
+        },
+        {
+          title: '数量',
+          dataIndex: 'questionCount',
+          align:'center'
+        },
+        {
+          title: '操作',
+          key: 'operation',
+          width: 300,
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return getCourseList(Object.assign(parameter, this.queryParam))
+          .then(res => {
+            return res
+          })
+      },
+
+      selectedRowKeys: [],
+      selectedRows: [],
+
+      // custom table alert & rowSelection
+      options: {
+        alert: {
+          show: true,
+          clear: () => {
+            this.selectedRowKeys = []
+          },
+        },
+        rowSelection: {
+          selectedRowKeys: this.selectedRowKeys,
+          onChange: this.onSelectChange,
+        },
+      },
+      optionAlertShow: false,
+    }
+  },
+  created() {
+    this.tableOption()
+    getRoleList({ t: new Date() })
+  },
+  methods: {
+    tableOption() {
+      if (!this.optionAlertShow) {
+        this.options = {
+          alert: {
+            show: true,
+            clear: () => {
+              this.selectedRowKeys = []
+            },
+          },
+          rowSelection: {
+            selectedRowKeys: this.selectedRowKeys,
+            onChange: this.onSelectChange,
+          },
+        }
+        this.optionAlertShow = true
+      } else {
+        this.options = {
+          alert: false,
+          rowSelection: null,
+        }
+        this.optionAlertShow = false
+      }
+    },
+
+    handleEdit(record) {
+      this.$emit('onEdit', record)
+    },
+    handleOk() {},
+
+    onSelectChange(selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    toggleAdvanced() {
+      this.advanced = !this.advanced
+    },
+
+    resetSearchForm() {
+      this.queryParam = {
+        date: moment(new Date()),
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+ 
+</style>
\ No newline at end of file
diff --git a/src/views/course/courseDetail.vue b/src/views/course/courseDetail.vue
new file mode 100644
index 0000000..d5f01d2
--- /dev/null
+++ b/src/views/course/courseDetail.vue
@@ -0,0 +1,27 @@
+<template>
+  <a-descriptions title="User Info">
+    <a-descriptions-item label="UserName">
+      Zhou Maomao
+    </a-descriptions-item>
+    <a-descriptions-item label="Telephone">
+      1810000000
+    </a-descriptions-item>
+    <a-descriptions-item label="Live">
+      Hangzhou, Zhejiang
+    </a-descriptions-item>
+    <a-descriptions-item label="Remark">
+      empty
+    </a-descriptions-item>
+    <a-descriptions-item label="Address">
+      No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
+    </a-descriptions-item>
+  </a-descriptions>
+</template>
+
+
+
+<script>
+    import moment from 'moment'
+    import { STable } from '@/components'
+    import { getCourseList } from '@/api/course/course'
+</script>
\ No newline at end of file
diff --git a/src/views/course/customCourseList.vue b/src/views/course/customCourseList.vue
new file mode 100644
index 0000000..06fcab8
--- /dev/null
+++ b/src/views/course/customCourseList.vue
@@ -0,0 +1,265 @@
+<template>
+  <div>
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="项目名">
+              <a-input v-model="queryParam.projectName" style="width: 100%" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="项目状态">
+              <a-select v-model="queryParam.status" placeholder="请选择" default-value="null" weight="20px">
+                <a-select-option value="null">全部</a-select-option>
+                <a-select-option value="1">运行中</a-select-option>
+                <a-select-option value="2">已结束</a-select-option>
+                <a-select-option value="1">未发布</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="开始时间">
+              <a-date-picker v-model="queryParam.stateDate" style="width: 100%" placeholder="请输入开始时间" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="结束时间">
+              <a-date-picker v-model="queryParam.endDate" style="width: 100%" placeholder="请输入结束时间" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="培训方式">
+              <a-select v-model="queryParam.trainWay" placeholder="请选择" default-value="null" weight="20px">
+                <a-select-option value="null">全部</a-select-option>
+                <a-select-option value="1">培训</a-select-option>
+                <a-select-option value="2">考试</a-select-option>
+                <a-select-option value="3">培训-练习</a-select-option>
+                <a-select-option value="4">培训-练习-考试</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <!-- <template v-if="advanced">
+            <a-col :md="8" :sm="24">
+              <a-form-item label="调用次数">
+                <a-input-number v-model="queryParam.callNo" style="width: 100%" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="更新日期">
+                <a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="使用状态">
+                <a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="使用状态">
+                <a-select placeholder="请选择" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </template> -->
+          <a-col :md="(!advanced && 8) || 24" :sm="24">
+            <span
+              class="table-page-search-submitButtons"
+              :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
+            >
+              <a-button type="primary" icon="search"  @click="$refs.table.refresh(true)">查询</a-button>
+              <a-button style="margin-left: 8px" icon="redo" @click="() => (queryParam = {})">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="handleEdit()">新建</a-button>
+      <a-button type="primary" icon="minus" @click="handleEdit()">删除</a-button>
+      <!-- <a-button type="dashed" @click="tableOption">{{ (optionAlertShow && '关闭') || '开启' }} alert</a-button> -->
+      <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
+          <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /> </a-button>
+      </a-dropdown>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      rowKey="key"
+      :columns="columns"
+      :data="loadData"
+      :alert="options.alert"
+      :rowSelection="options.rowSelection"
+    >
+      <span slot="serial" slot-scope="text, record, index">
+        {{ index + 1 }}
+      </span>
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a @click="handleEdit(record)">编辑</a>
+          <a-divider type="vertical" />
+        </template>
+        <a-dropdown>
+          <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
+          <a-menu slot="overlay">
+            <a-menu-item>
+              <a href="javascript:;">详情</a>
+            </a-menu-item>
+            <a-menu-item v-if="$auth('table.disable')">
+              <a href="javascript:;">禁用</a>
+            </a-menu-item>
+            <a-menu-item v-if="$auth('table.delete')">
+              <a href="javascript:;">删除</a>
+            </a-menu-item>
+          </a-menu>
+        </a-dropdown>
+      </span>
+    </s-table>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { STable } from '@/components'
+import {  getcustomCourseList } from '@/api/course/customCourse'
+
+export default {
+  name: 'TableList',
+  components: {
+    STable,
+  },
+  data() {
+    return {
+      mdl: {},
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+      columns: [
+        {
+          title: '序号',
+          width: 60,
+          scopedSlots: { customRender: 'serial' },
+        },
+        {
+          title: '课程编号',
+          dataIndex: 'ID',
+          key: 'id'
+        },
+        {
+          title: '课程名称',
+          dataIndex: 'courseName',
+        },
+        {
+          title: '课时/分',
+          dataIndex: 'hors',
+          needTotal: true,
+        },
+        {
+          title: '课件大小',
+          dataIndex: 'description',
+        },
+        {
+          title: '操作',
+          key: 'operation',
+          width: 100,
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return getcustomCourseList(Object.assign(parameter, this.queryParam))
+          .then(res => {
+            return res
+          })
+      },
+
+      selectedRowKeys: [],
+      selectedRows: [],
+
+      // custom table alert & rowSelection
+      options: {
+        alert: {
+          show: true,
+          clear: () => {
+            this.selectedRowKeys = []
+          },
+        },
+        rowSelection: {
+          selectedRowKeys: this.selectedRowKeys,
+          onChange: this.onSelectChange,
+        },
+      },
+      optionAlertShow: false,
+    }
+  },
+  created() {
+    this.tableOption()
+    getRoleList({ t: new Date() })
+  },
+  methods: {
+    tableOption() {
+      if (!this.optionAlertShow) {
+        this.options = {
+          alert: {
+            show: true,
+            clear: () => {
+              this.selectedRowKeys = []
+            },
+          },
+          rowSelection: {
+            selectedRowKeys: this.selectedRowKeys,
+            onChange: this.onSelectChange,
+          },
+        }
+        this.optionAlertShow = true
+      } else {
+        this.options = {
+          alert: false,
+          rowSelection: null,
+        }
+        this.optionAlertShow = false
+      }
+    },
+
+    handleEdit(record) {
+      this.$emit('onEdit', record)
+    },
+    handleOk() {},
+
+    onSelectChange(selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    toggleAdvanced() {
+      this.advanced = !this.advanced
+    },
+
+    resetSearchForm() {
+      this.queryParam = {
+        date: moment(new Date()),
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+ 
+</style>
\ No newline at end of file
diff --git a/src/views/project/AddClass.vue b/src/views/project/AddClass.vue
new file mode 100644
index 0000000..036daba
--- /dev/null
+++ b/src/views/project/AddClass.vue
@@ -0,0 +1,36 @@
+<template>
+<div></div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》'
+
+export default {
+//import引入的组件需要注入到对象中才能使用
+components: {},
+props: {},
+data() {
+//这里存放数据
+return {};
+},
+//计算属性 类似于data概念
+computed: {},
+//监控data中的数据变化
+watch: {},
+//方法集合
+methods: {},
+created() {},  //生命周期 - 创建完成（可以访问当前this实例）
+mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
+beforeCreate() {}, //生命周期 - 创建之前
+beforeMount() {}, //生命周期 - 挂载之前
+beforeUpdate() {}, //生命周期 - 更新之前
+updated() {}, //生命周期 - 更新之后
+beforeDestroy() {}, //生命周期 - 销毁之前
+destroyed() {}, //生命周期 - 销毁完成
+activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+
+</script>
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/project/ProjectDetail.vue b/src/views/project/ProjectDetail.vue
new file mode 100644
index 0000000..3240ab7
--- /dev/null
+++ b/src/views/project/ProjectDetail.vue
@@ -0,0 +1,359 @@
+<template>
+  <page-header-wrapper title="项目基础信息">
+    <template v-slot:content>
+      <a-descriptions size="small" :column="isMobile ? 1 : 2">
+        <a-descriptions-item label="项目名称">曲丽丽</a-descriptions-item>
+
+        <a-descriptions-item label="培训类型">2017-07-07</a-descriptions-item>
+        <a-descriptions-item label="培训种类"><a href="">12421</a></a-descriptions-item>
+        <a-descriptions-item label="培训方式">2017-07-07</a-descriptions-item>
+
+        <a-descriptions-item label="培训时间">XX 服务</a-descriptions-item>
+        <a-descriptions-item label="练习类型">2017-07-07</a-descriptions-item>
+        <a-descriptions-item label="考试时间">2017-07-07</a-descriptions-item>
+        <a-descriptions-item label="补考">
+          <a-radio :default-checked="false" :disabled="disabled"> Disabled </a-radio>
+          <a-radio default-checked :disabled="disabled"> Disabled </a-radio>
+        </a-descriptions-item>
+        <a-descriptions-item label="备注">请于两个工作日内确认</a-descriptions-item>
+      </a-descriptions>
+    </template>
+
+    <template v-slot:extraContent>
+      <a-row class="status-list">
+        <a-col :xs="12" :sm="12">
+          <div class="text">状态</div>
+          <div class="heading">待审批</div>
+        </a-col>
+      </a-row>
+    </template>
+
+    <a-card :bordered="false" title="流程进度">
+      <a-steps :direction="(isMobile && 'vertical') || 'horizontal'" :current="1" progressDot>
+        <a-step>
+          <template v-slot:title>
+            <span>创建项目</span>
+          </template>
+          <template v-slot:description>
+            <div class="antd-pro-pages-profile-advanced-style-stepDescription">
+              曲丽丽<a-icon type="dingding" style="margin-left: 8px" />
+              <div>2016-12-12 12:32</div>
+            </div>
+          </template>
+        </a-step>
+        <a-step>
+          <template v-slot:title>
+            <span>部门初审</span>
+          </template>
+          <template v-slot:description>
+            <div class="antd-pro-pages-profile-advanced-style-stepDescription">
+              周毛毛<a-icon type="dingding" style="color: rgb(0, 160, 233); margin-left: 8px" />
+              <div><a>催一下</a></div>
+            </div>
+          </template>
+        </a-step>
+        <a-step title="财务复核" />
+        <a-step title="完成" />
+      </a-steps>
+    </a-card>
+
+    <a-card style="margin-top: 24px" :bordered="false" title="用户信息">
+      <a-descriptions>
+        <a-descriptions-item label="用户姓名">付晓晓</a-descriptions-item>
+        <a-descriptions-item label="会员卡号">32943898021309809423</a-descriptions-item>
+        <a-descriptions-item label="身份证">3321944288191034921</a-descriptions-item>
+        <a-descriptions-item label="联系方式">18112345678</a-descriptions-item>
+        <a-descriptions-item label="联系地址">浙江省杭州市西湖区黄姑山路工专路交叉路口</a-descriptions-item>
+      </a-descriptions>
+      <a-descriptions title="信息组">
+        <a-descriptions-item label="某某数据">725</a-descriptions-item>
+        <a-descriptions-item label="该数据更新时间">2018-08-08</a-descriptions-item>
+        <a-descriptions-item></a-descriptions-item>
+        <a-descriptions-item label="某某数据">725</a-descriptions-item>
+        <a-descriptions-item label="该数据更新时间">2018-08-08</a-descriptions-item>
+        <a-descriptions-item></a-descriptions-item>
+      </a-descriptions>
+      <a-card type="inner" title="多层信息组">
+        <a-descriptions title="组名称" size="small">
+          <a-descriptions-item label="负责人">林东东</a-descriptions-item>
+          <a-descriptions-item label="角色码">1234567</a-descriptions-item>
+          <a-descriptions-item label="所属部门">XX公司-YY部</a-descriptions-item>
+          <a-descriptions-item label="过期时间">2018-08-08</a-descriptions-item>
+          <a-descriptions-item label="描述"
+            >这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...</a-descriptions-item
+          >
+        </a-descriptions>
+        <a-divider style="margin: 16px 0" />
+        <a-descriptions title="组名称" size="small" :col="1">
+          <a-descriptions-item label="学名">
+            Citrullus lanatus (Thunb.) Matsum. et
+            Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..</a-descriptions-item
+          >
+        </a-descriptions>
+        <a-divider style="margin: 16px 0" />
+        <a-descriptions title="组名称" size="small" :col="2">
+          <a-descriptions-item label="负责人">付小小</a-descriptions-item>
+          <a-descriptions-item label="角色码">1234567</a-descriptions-item>
+        </a-descriptions>
+      </a-card>
+    </a-card>
+
+    <a-card style="margin-top: 24px" :bordered="false" title="用户近半年来电记录">
+      <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
+    </a-card>
+
+    <!-- 操作 -->
+    <a-card
+      style="margin-top: 24px"
+      :bordered="false"
+      :tabList="operationTabList"
+      :activeTabKey="operationActiveTabKey"
+      @tabChange="
+        (key) => {
+          this.operationActiveTabKey = key
+        }
+      "
+    >
+      <a-table
+        v-if="operationActiveTabKey === '1'"
+        :columns="operationColumns"
+        :dataSource="operation1"
+        :pagination="false"
+      >
+        <template slot="status" slot-scope="status">
+          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter" />
+        </template>
+      </a-table>
+      <a-table
+        v-if="operationActiveTabKey === '2'"
+        :columns="operationColumns"
+        :dataSource="operation2"
+        :pagination="false"
+      >
+        <template slot="status" slot-scope="status">
+          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter" />
+        </template>
+      </a-table>
+      <a-table
+        v-if="operationActiveTabKey === '3'"
+        :columns="operationColumns"
+        :dataSource="operation3"
+        :pagination="false"
+      >
+        <template slot="status" slot-scope="status">
+          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter" />
+        </template>
+      </a-table>
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+import { baseMixin } from '@/store/app-mixin'
+
+export default {
+  name: 'Advanced',
+  mixins: [baseMixin],
+  data() {
+    return {
+      tabList: [
+        { key: 'detail', tab: '详情' },
+        { key: 'rule', tab: '规则' },
+      ],
+      tabActiveKey: 'detail',
+
+      operationTabList: [
+        {
+          key: '1',
+          tab: '操作日志一',
+        },
+        {
+          key: '2',
+          tab: '操作日志二',
+        },
+        {
+          key: '3',
+          tab: '操作日志三',
+        },
+      ],
+      operationActiveTabKey: '1',
+
+      operationColumns: [
+        {
+          title: '操作类型',
+          dataIndex: 'type',
+          key: 'type',
+        },
+        {
+          title: '操作人',
+          dataIndex: 'name',
+          key: 'name',
+        },
+        {
+          title: '执行结果',
+          dataIndex: 'status',
+          key: 'status',
+          scopedSlots: { customRender: 'status' },
+        },
+        {
+          title: '操作时间',
+          dataIndex: 'updatedAt',
+          key: 'updatedAt',
+        },
+        {
+          title: '备注',
+          dataIndex: 'remark',
+          key: 'remark',
+        },
+      ],
+      operation1: [
+        {
+          key: 'op1',
+          type: '订购关系生效',
+          name: '曲丽丽',
+          status: 'agree',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '-',
+        },
+        {
+          key: 'op2',
+          type: '财务复审',
+          name: '付小小',
+          status: 'reject',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '不通过原因',
+        },
+        {
+          key: 'op3',
+          type: '部门初审',
+          name: '周毛毛',
+          status: 'agree',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '-',
+        },
+        {
+          key: 'op4',
+          type: '提交订单',
+          name: '林东东',
+          status: 'agree',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '很棒',
+        },
+        {
+          key: 'op5',
+          type: '创建订单',
+          name: '汗牙牙',
+          status: 'agree',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '-',
+        },
+      ],
+      operation2: [
+        {
+          key: 'op2',
+          type: '财务复审',
+          name: '付小小',
+          status: 'reject',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '不通过原因',
+        },
+        {
+          key: 'op3',
+          type: '部门初审',
+          name: '周毛毛',
+          status: 'agree',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '-',
+        },
+        {
+          key: 'op4',
+          type: '提交订单',
+          name: '林东东',
+          status: 'agree',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '很棒',
+        },
+      ],
+      operation3: [
+        {
+          key: 'op2',
+          type: '财务复审',
+          name: '付小小',
+          status: 'reject',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '不通过原因',
+        },
+        {
+          key: 'op3',
+          type: '部门初审',
+          name: '周毛毛',
+          status: 'agree',
+          updatedAt: '2017-10-03  19:23:12',
+          remark: '-',
+        },
+      ],
+    }
+  },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        agree: '成功',
+        reject: '驳回',
+      }
+      return statusMap[status]
+    },
+    statusTypeFilter(type) {
+      const statusTypeMap = {
+        agree: 'success',
+        reject: 'error',
+      }
+      return statusTypeMap[type]
+    },
+  },
+  methods: {
+    handleTabChange(key) {
+      console.log('')
+      this.tabActiveKey = key
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.detail-layout {
+  margin-left: 44px;
+}
+.text {
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.heading {
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 20px;
+}
+
+.no-data {
+  color: rgba(0, 0, 0, 0.25);
+  text-align: center;
+  line-height: 64px;
+  font-size: 16px;
+
+  i {
+    font-size: 24px;
+    margin-right: 16px;
+    position: relative;
+    top: 3px;
+  }
+}
+
+.mobile {
+  .detail-layout {
+    margin-left: unset;
+  }
+  .text {
+  }
+  .status-list {
+    text-align: left;
+  }
+}
+</style>
diff --git a/src/views/project/ProjectForm.vue b/src/views/project/ProjectForm.vue
new file mode 100644
index 0000000..12eaf19
--- /dev/null
+++ b/src/views/project/ProjectForm.vue
@@ -0,0 +1,131 @@
+<template>
+  <page-header-wrapper :title="新增项目">
+    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :layout="vertical">
+      <a-form-model-item label="项目名称">
+        <a-input v-model="form.projectName" v-decorator="[
+            'projectName',
+            {
+              rules: [{ required: true, message: '项目名称为必填' }],
+            },
+          ]"/>
+      </a-form-model-item>
+      <a-form-model-item label="培训种类">
+        <a-select v-model="form.trainClass" placeholder="--请选择--">
+          <a-select-option value="shanghai"> Zone one </a-select-option>
+          <a-select-option value="beijing"> Zone two </a-select-option>
+        </a-select>
+      </a-form-model-item>
+      <a-form-model-item label="培训类型">
+        <a-select v-model="form.trainType" placeholder="--请选择--">
+          <a-select-option value="1"> 必修课 </a-select-option>
+          <a-select-option value="2"> 选修课 </a-select-option>
+        </a-select>
+      </a-form-model-item>
+      <a-form-model-item label="培训方式">
+        <a-select v-model="form.trainWay" placeholder="--请选择--">
+          <a-select-option value="1"> 培训 </a-select-option>
+          <a-select-option value="2"> 考试 </a-select-option>
+          <a-select-option value="3"> 培训-练习 </a-select-option>
+          <a-select-option value="4"> 培训-练习-考试 </a-select-option>
+        </a-select>
+      </a-form-model-item>
+      <a-form-model-item label="人员类型">
+        <a-select v-model="form.personType" placeholder="--请选择--">
+          <a-select-option v-for="item in personType" :key="item.id"> {{ item.name }} </a-select-option>
+        </a-select>
+      </a-form-model-item>
+      <!-- 时间选择器呢 -->
+      <a-form-item label="培训时间" style="margin-bottom: 0">
+        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
+          <a-date-picker v-model="form.trainSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
+        </a-form-item>
+        <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
+        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
+          <a-date-picker v-model="form.trainEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
+        </a-form-item>
+      </a-form-item>
+      <!-- 时间选择器 -->
+      <a-form-item v-if="['2', '3', '4'].includes(form.trainWay)" label="练习时间" style="margin-bottom: 0">
+        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
+          <a-date-picker v-model="form.practiceSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
+        </a-form-item>
+        <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
+        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
+          <a-date-picker v-model="form.practiceEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
+        </a-form-item>
+      </a-form-item>
+      <!-- 时间选择器 -->
+      <a-form-item v-if="['2', '3', '4'].includes(form.trainWay)" label="考试时间" style="margin-bottom: 0">
+        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
+          <a-date-picker v-model="form.examSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
+        </a-form-item>
+        <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
+        <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
+          <a-date-picker v-model="form.examEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
+        </a-form-item>
+      </a-form-item>
+
+      <!-- 考试次数 -->
+      <a-form-item v-if="['2', '3', '4'].includes(form.trainWay)" label="考试次数" style="margin-bottom: 0">
+        <a-form-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }">
+          <a-input-number v-model="form.examNumber" :min="0" style="width: 100%" />
+        </a-form-item>
+        <span> 补考次数: </span>
+        <a-form-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }">
+          <a-input-number v-model="form.resitNumber" :min="0" style="width: 100%" />
+        </a-form-item>
+        <a-form-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }">
+          <a-button type="primary" @click="javascript;"> 随机补考 </a-button>
+        </a-form-item>
+      </a-form-item>
+
+      <a-form-model-item label="模拟考试" v-if="['2', '3', '4'].includes(form.trainWay)">
+        <a-radio-group v-model="form.mockExam">
+          <a-radio value="1"> 允许 </a-radio>
+          <a-radio value="0"> 不允许 </a-radio>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item label="备注">
+        <a-input v-model="form.remark" type="textarea" />
+      </a-form-model-item>
+      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
+        <a-button type="primary" @click="toNext"> 下一步 </a-button>
+        <a-button style="margin-left: 10px"> 取消 </a-button>
+      </a-form-model-item>
+    </a-form-model>
+  </page-header-wrapper>
+</template>
+<script>
+import {getPersonType} from '@/api/project/project'
+
+export default {
+  data() {
+    return {
+      labelCol: { span: 4 },
+      wrapperCol: { span: 14 },
+      form: {
+        projectName: '',
+      },
+    }
+  },
+  components: {
+      getPersonType,
+  },
+  created: {
+    
+  },
+  methods: {
+    //获取字典值
+    getPersonType() {
+      return getPersonType(Object.assign(parameter)).then((res) => {
+        return res
+      })
+    },
+
+    //下一步，跳转页面带上from对象
+    toNext() {
+      console.log('toNext', this.form)
+    },
+  },
+}
+</script>
diff --git a/src/views/project/ProjectUnitSelect.vue b/src/views/project/ProjectUnitSelect.vue
new file mode 100644
index 0000000..6c7318c
--- /dev/null
+++ b/src/views/project/ProjectUnitSelect.vue
@@ -0,0 +1,163 @@
+<template>
+  <page-header-wrapper title="请选择受训单位">
+    <a-form-model :model="form">
+      <a-form-model-item :wrapper-col="{ span: 14, offset: 4,}" >
+        <a-button type="primary" @click="toNext"> 下一步 </a-button>
+        <a-button style="margin-left: 10px"> 取消 </a-button>
+      </a-form-model-item>
+
+      <!-- showSearch -->
+      <!-- height: '500px',overflowY: 'auto' -->
+
+      <a-transfer
+        class="tree-transfer"
+        :data-source="dataSource"
+        :titles="['全部单位列表', '已经选中单位']"
+        :target-keys="targetKeys"
+        :render="(item) => item.title"
+        :operations="['选  中', '取  消']"
+        :show-select-all="true"
+        :filter-option="filterOption"
+        @change="onChange"
+      >
+        <template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }">
+          <!--  checkStrictly -->
+          <a-tree
+            v-if="direction === 'left'"
+            blockNode
+            checkable
+            defaultExpandAll
+            :checkedKeys="[...selectedKeys, ...targetKeys]"
+            :treeData="treeData"
+            @check="
+              (_, props) => {
+                onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
+              }
+            "
+            @select="
+              (_, props) => {
+                onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
+              }
+            "
+          />
+        </template>
+      </a-transfer>
+    </a-form-model>
+  </page-header-wrapper>
+</template>
+
+
+<script>
+const treeData = [
+  {
+    title: '三峡大学',
+    key: '0001',
+    children: [
+      { title: '三峡大学文学院', key: '00010001' },
+      {
+        title: '三峡大学水利学院',
+        key: '00010002',
+        children: [
+          { title: '三峡大学水利学院第一学院', key: '000100020001' },
+          { title: '三峡大学水利学院第二学院', key: '000100020002' },
+          { title: '三峡大学水利学院第三学院', key: '000100020003' },
+          { title: '三峡大学水利学院第四学院', key: '000100020004' },
+          { title: '三峡大学水利学院第五学院', key: '000100020005' },
+          { title: '三峡大学水利学院第六学院', key: '000100020006' },
+          { title: '三峡大学水利学院第一学院', key: '000100020007' },
+          { title: '三峡大学水利学院第二学院', key: '000100020008' },
+          { title: '三峡大学水利学院第三学院', key: '000100020009' },
+          { title: '三峡大学水利学院第四学院', key: '000100020010' },
+          { title: '三峡大学水利学院第五学院', key: '000100020011' },
+          { title: '三峡大学水利学院第六学院', key: '000100020012' },
+          { title: '三峡大学水利学院第一学院', key: '000100020013' },
+          { title: '三峡大学水利学院第二学院', key: '000100020014' },
+          { title: '三峡大学水利学院第三学院', key: '000100020015' },
+          { title: '三峡大学水利学院第四学院', key: '000100020016' },
+          { title: '三峡大学水利学院第五学院', key: '000100020017' },
+          { title: '三峡大学水利学院第六学院', key: '000100020018' },
+        ],
+      },
+    ],
+  },
+]
+
+const transferDataSource = []
+function flatten(list = []) {
+  console.log('执行了flatten函数：list', list)
+  list.forEach((item) => {
+    transferDataSource.push(item)
+    flatten(item.children)
+  })
+}
+flatten(JSON.parse(JSON.stringify(treeData)))
+
+function isChecked(selectedKeys, eventKey) {
+  console.log('执行了isChecked函数：', eventKey, selectedKeys)
+  return selectedKeys.indexOf(eventKey) !== -1
+}
+
+function handleTreeData(data, targetKeys = []) {
+  console.log('执行了handleTreeData函数：', data, targetKeys)
+  data.forEach((item) => {
+    item['disabled'] = targetKeys.includes(item.key)
+    if (item.children) {
+      handleTreeData(item.children, targetKeys)
+    }
+  })
+  return data
+}
+
+export default {
+  data() {
+    return {
+      form: {},
+      targetKeys: [],
+      dataSource: transferDataSource,
+
+      // 加载数据方法 必须为 Promise 对象
+      loadData: (parameter) => {
+        console.log('加载数据方法', parameter)
+        return transferDataSource
+        // return getProjectList(Object.assign(parameter, this.queryParam)).then((res) => {
+        //   return res
+        // })
+      },
+    }
+  },
+  computed: {
+    treeData() {
+      return handleTreeData(treeData, this.targetKeys)
+    },
+  },
+  methods: {
+    onChange(targetKeys) {
+      console.log('Target Keys:', targetKeys)
+      this.targetKeys = targetKeys
+      // this.form = targetKeys
+    },
+    onChecked(_, e, checkedKeys, itemSelect) {
+      const { eventKey } = e.node
+      itemSelect(eventKey, !isChecked(checkedKeys, eventKey))
+    },
+    //搜索使用
+    filterOption(value, tree) {
+      console.log('filterOption:', value, tree)
+      // getParentKey(value, tree) {
+      if (!value) return
+
+      for (let i = 0; i < tree.length; i++) {
+        const node = tree[i]
+
+        if (node.children) {
+          if (node.children.some((item) => item.title.indexOf(value) > -1)) {
+            this.expandedKeys.push(node.key)
+          }
+
+          this.filterOption(value, node.children)
+        }
+      }
+    },
+  },
+}
+</script>
\ No newline at end of file