diff --git a/base-vue/package.json b/base-vue/package.json
index 5c71841..58fe1cb 100644
--- a/base-vue/package.json
+++ b/base-vue/package.json
@@ -14,6 +14,7 @@
     "build": "gulp"
   },
   "dependencies": {
+    "@riophae/vue-treeselect": "^0.4.0",
     "axios": "0.17.1",
     "babel-plugin-component": "0.10.1",
     "babel-polyfill": "6.26.0",
diff --git a/base-vue/src/views/modules/contract/contract-add-or-update.vue b/base-vue/src/views/modules/contract/contract-add-or-update.vue
new file mode 100644
index 0000000..4504801
--- /dev/null
+++ b/base-vue/src/views/modules/contract/contract-add-or-update.vue
@@ -0,0 +1,191 @@
+<template>
+  <el-dialog
+    title="合同基本信息"
+    :close-on-click-modal="false"
+    :visible.sync="visible">
+    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="114px">
+      <el-row>
+        <el-col :span="9">
+          <el-form-item label="合同类型">
+            <el-select v-model="dataForm.type" placeholder="合同类型">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="9">
+          <el-form-item label="工单编号">
+            <el-input v-model="dataForm.code" placeholder="工单编号"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否主合同">
+            <el-switch
+              v-model="dataForm.isS"
+              active-color="#13ce66"
+              inactive-color="#ff4949">
+            </el-switch>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="9">
+          <el-form-item label="关联主合同编号">
+            <el-input v-model="dataForm.code" placeholder="关联主合同编号"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="9">
+          <el-form-item label="客户">
+            <el-select v-model="dataForm.type" placeholder="客户">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="9">
+          <el-form-item label="保修期">
+            <el-input v-model="dataForm.code" placeholder="保修期"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="9">
+          <el-form-item label="付款方式">
+            <el-select v-model="dataForm.type" placeholder="付款方式">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row type="flex" justify="space-between">
+        <el-col :span="6">
+          <el-button type="primary">新增一行</el-button>
+        </el-col>
+        <el-col :span="9">
+          <el-form-item label="总计">
+            <el-input v-model="dataForm.code" placeholder="总计"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table
+      :data="dataList"
+      border
+      style="width: 100%;"
+      max-height="200">
+      <el-table-column
+        type="selection"
+        header-align="center"
+        align="center"
+        width="50">
+      </el-table-column>
+      <el-table-column
+        prop="code"
+        header-align="center"
+        align="center"
+        label="物料编号">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="物料名称">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="型号">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="单价">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="价格系数">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="价格系数">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="对外价格">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="数量">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="总价">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="总价">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="备注">
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="70"
+        label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" size="small">删除行</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        type: '',
+        code: '',
+        isS: true
+      },
+      dataList: [{code: '100010'}, {code: '100010'}, {code: '100010'}]
+    }
+  },
+  methods: {
+    init (id) {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+      })
+    },
+    // 表单提交
+    dataFormSubmit () {}
+  }
+}
+</script>
\ No newline at end of file
diff --git a/base-vue/src/views/modules/contract/contract.vue b/base-vue/src/views/modules/contract/contract.vue
new file mode 100644
index 0000000..c4beeda
--- /dev/null
+++ b/base-vue/src/views/modules/contract/contract.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="mod-order">
+    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form-item label="合同类型">
+        <el-select v-model="dataForm.type" placeholder="合同类型">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="合同编号">
+        <el-input v-model="dataForm.number" placeholder="合同编号" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="客户名称">
+        <el-input v-model="dataForm.name" placeholder="客户名称" clearable></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getDataList()">查询</el-button>
+        <el-button type="primary" @click="addOrUpdateHandle">新增</el-button>
+        <el-button type="danger">删除</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      @selection-change="selectionChangeHandle"
+      style="width: 100%;">
+      <el-table-column
+        type="selection"
+        header-align="center"
+        align="center"
+        width="50">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="合同编号">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="合同类型">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="是否主合同">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="客户名称">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="关联主合同号">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="是否验收">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="生成时间">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="验收时间">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="备注">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="质保期限(月)">
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="150"
+        label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="assignHandle(scope.row.id)">模板生成</el-button>
+          <el-button type="text" size="small">上传附近</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+  </div>
+</template>
+
+<script>
+import AddOrUpdate from './contract-add-or-update'
+export default {
+  components: {
+    AddOrUpdate
+  },
+  data () {
+    return {
+      dataForm: {
+        type: '',
+        number: '',
+        name: ''
+      },
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false
+    }
+  },
+  activated () {
+    this.getDataList()
+  },
+  methods: {
+    // 获取数据列表
+    getDataList () {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/sys/role/list'),
+        method: 'get',
+        params: this.$http.adornParams({
+          'page': this.pageIndex,
+          'limit': this.pageSize,
+          'roleName': this.dataForm.roleName
+        })
+      }).then(({data}) => {
+        if (data && data.code === 0) {
+          this.dataList = data.page.list
+          this.totalPage = data.page.totalCount
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+        }
+        this.dataListLoading = false
+      })
+    },
+    // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+    // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.getDataList()
+    },
+    // 多选
+    selectionChangeHandle (val) {
+      this.dataListSelections = val
+    },
+    // 新增
+    addOrUpdateHandle (id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    assignHandle (id) {}
+  }
+}
+</script>
\ No newline at end of file
diff --git a/base-vue/src/views/modules/order/order-add-or-update.vue b/base-vue/src/views/modules/order/order-add-or-update.vue
new file mode 100644
index 0000000..5429df8
--- /dev/null
+++ b/base-vue/src/views/modules/order/order-add-or-update.vue
@@ -0,0 +1,70 @@
+<template>
+  <el-dialog
+    title="工单基本信息"
+    :close-on-click-modal="false"
+    :visible.sync="visible">
+    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="140px">
+      <el-form-item label="车型">
+        <el-select v-model="dataForm.type" placeholder="车型">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="工单编号">
+        <el-input v-model="dataForm.code" placeholder="工单编号"></el-input>
+      </el-form-item>
+      <el-form-item label="故障类别">
+        <el-select v-model="dataForm.type" placeholder="故障类别">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="关联主合同编号">
+        <el-input v-model="dataForm.code" placeholder="关联主合同编号"></el-input>
+      </el-form-item>
+      <el-form-item label="客户">
+        <el-select v-model="dataForm.type" placeholder="客户">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="故障描述">
+        <el-input type="textarea" :rows="3" placeholder="故障描述" v-model="dataForm.code"></el-input>
+      </el-form-item>
+      <el-form-item label="客户对接人">
+        <el-input v-model="dataForm.code" placeholder="客户对接人"></el-input>
+      </el-form-item>
+      <el-form-item label="客户联系电话">
+        <el-input v-model="dataForm.code" placeholder="客户联系电话"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        type: '',
+        code: ''
+      }
+    }
+  },
+  methods: {
+    init (id) {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+      })
+    },
+    // 表单提交
+    dataFormSubmit () {}
+  }
+}
+</script>
\ No newline at end of file
diff --git a/base-vue/src/views/modules/order/order.vue b/base-vue/src/views/modules/order/order.vue
new file mode 100644
index 0000000..640e620
--- /dev/null
+++ b/base-vue/src/views/modules/order/order.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="mod-order">
+    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form-item label="工单类型">
+        <el-select v-model="dataForm.type" placeholder="工单类型">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="工单编号">
+        <el-input v-model="dataForm.number" placeholder="工单编号" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="客户名称">
+        <el-input v-model="dataForm.name" placeholder="客户名称" clearable></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getDataList()">查询</el-button>
+        <el-button type="primary" @click="addOrUpdateHandle">新增</el-button>
+        <el-button type="danger">删除</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      @selection-change="selectionChangeHandle"
+      style="width: 100%;">
+      <el-table-column
+        type="selection"
+        header-align="center"
+        align="center"
+        width="50">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="工单编号">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="车型类型">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="客户名称">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="合同号">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="故障分类">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="是否验收">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="工单状态">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="生成时间">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="创建人">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="处理人">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="关闭时间">
+      </el-table-column>
+      <el-table-column
+        prop="roleName"
+        header-align="center"
+        align="center"
+        label="附件资料">
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="150"
+        label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="assignHandle(scope.row.id)">指派</el-button>
+          <el-button type="text" size="small">关闭</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+  </div>
+</template>
+
+<script>
+import AddOrUpdate from './order-add-or-update'
+export default {
+  components: {
+    AddOrUpdate
+  },
+  data () {
+    return {
+      dataForm: {
+        type: '',
+        number: '',
+        name: ''
+      },
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false
+    }
+  },
+  activated () {
+    this.getDataList()
+  },
+  methods: {
+    // 获取数据列表
+    getDataList () {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/sys/role/list'),
+        method: 'get',
+        params: this.$http.adornParams({
+          'page': this.pageIndex,
+          'limit': this.pageSize,
+          'roleName': this.dataForm.roleName
+        })
+      }).then(({data}) => {
+        if (data && data.code === 0) {
+          this.dataList = data.page.list
+          this.totalPage = data.page.totalCount
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+        }
+        this.dataListLoading = false
+      })
+    },
+    // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+    // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.getDataList()
+    },
+    // 多选
+    selectionChangeHandle (val) {
+      this.dataListSelections = val
+    },
+    // 新增
+    addOrUpdateHandle (id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    assignHandle (id) {}
+  }
+}
+</script>
\ No newline at end of file
diff --git a/base-vue/src/views/modules/sys/dept-add-or-update.vue b/base-vue/src/views/modules/sys/dept-add-or-update.vue
new file mode 100644
index 0000000..b4266f7
--- /dev/null
+++ b/base-vue/src/views/modules/sys/dept-add-or-update.vue
@@ -0,0 +1,194 @@
+<template>
+  <el-dialog
+    :title="!id ? '新增部门信息' : '修改部门信息'"
+    :close-on-click-modal="false"
+    :visible.sync="visible">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+      <el-form-item label="部门编码" prop="code">
+        <el-input v-model="dataForm.code" placeholder="部门编码"></el-input>
+      </el-form-item>
+      <el-form-item label="部门名称" prop="name">
+        <el-input v-model="dataForm.name" placeholder="部门名称"></el-input>
+      </el-form-item>
+      <el-form-item label="部门排序" prop="dept_sort">
+        <el-input-number
+          v-model.number="dataForm.dept_sort"
+          :min="0"
+          :max="999"
+          controls-position="right"
+        />
+      </el-form-item>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="顶级部门" prop="isTop">
+            <el-radio-group v-model="dataForm.isTop" style="width: 140px">
+              <el-radio label="1">是</el-radio>
+              <el-radio label="0">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="状态" prop="is_used">
+            <el-switch
+              v-model="dataForm.is_used"
+              active-color="#409EFF"
+              inactive-color="#F56C6C"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item v-if="dataForm.isTop === '0'" label="上级部门" prop="pid">
+        <treeselect
+          v-model="dataForm.pid"
+          :load-options="loadDepts"
+          :options="depts"
+          :normalizer="normalizer"
+          placeholder="选择部门类目"
+        />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  import Treeselect, { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
+  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+  export default {
+    data () {
+      return {
+        visible: false,
+        id: 0,
+        dataForm: {
+          code: null,
+          name: null,
+          dept_sort: 999,
+          isTop: '1',
+          is_used: true,
+          ext_id: null,
+          sub_count: 0,
+          pid: null
+        },
+        depts: [],
+        dataRule: {
+          name: [
+            { required: true, message: '参数值不能为空', trigger: 'blur' }
+          ],
+          dept_sort: [
+            { required: true, message: '参数值不能为空', trigger: 'blur', type: 'number' }
+          ]
+        }
+      }
+    },
+    components: {
+      Treeselect
+    },
+    methods: {
+      init (row) {
+        this.visible = true
+        this.$nextTick(() => {
+          this.$refs['dataForm'].resetFields()
+          if (row) {
+            this.id = row.dept_id
+            this.dataForm = row
+            if (this.dataForm.pid !== null) {
+              this.dataForm.isTop = '0'
+            } else {
+              this.dataForm.isTop = '1'
+            }
+          }
+          if (this.dataForm.pid != null) {
+            this.getSupDepts(this.dataForm.pid)
+          } else {
+            this.getDepts()
+          }
+        })
+      },
+      getSupDepts(ids) {
+        const data = ids.length || ids.length === 0 ? ids : Array.of(ids)
+        this.$http({
+          url: this.$http.adornUrl('/api/dept/superior'),
+          method: 'post',
+          params: this.$http.adornParams(data)
+        }).then(({res}) => {
+          const date = res.content
+          this.buildDepts(date)
+          this.depts = date
+        })
+      },
+      buildDepts(depts) {
+        depts.forEach(data => {
+          if (data.children) {
+            this.buildDepts(data.children)
+          }
+          if (data.has_children && !data.children) {
+            data.children = null
+          }
+        })
+      },
+      getDepts() {
+        this.$http({
+          url: this.$http.adornUrl('/api/dept/vo'),
+          method: 'get',
+          params: this.$http.adornParams({is_used: true})
+        }).then(({data}) => {
+          if (data && data.code === 200) {
+            this.depts = data.content.map(function(obj) {
+              if (obj.has_children) {
+                obj.children = null
+              }
+              return obj
+            })
+          }
+        })
+      },
+      // 获取弹窗内部门数据
+      loadDepts({ action, parentNode, callback }) {
+        if (action === LOAD_CHILDREN_OPTIONS) {
+          this.$http({
+            url: this.$http.adornUrl('/api/dept/vo'),
+            method: 'get',
+            params: this.$http.adornParams({is_used: true, pid: parentNode.dept_id})
+          }).then(({res}) => {
+            parentNode.children = res.content.map(function(obj) {
+              obj.children = null
+              return obj
+            })
+            setTimeout(() => {
+              callback()
+            }, 100)
+          })
+        }
+      },
+      // 表单提交
+      dataFormSubmit () {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            this.$http({
+              url: this.$http.adornUrl('/api/dept'),
+              method: `${!this.id ? 'POST' : 'PUT'}`,
+              data: this.$http.adornData(this.dataForm)
+            }).then(({data}) => {
+              if (data && data.code === 200) {
+                this.$message({
+                  message: '操作成功',
+                  type: 'success',
+                  duration: 1500,
+                  onClose: () => {
+                    this.visible = false
+                    this.$emit('refreshDataList')
+                  }
+                })
+              } else {
+                this.$message.error(data.msg)
+              }
+            })
+          }
+        })
+      }
+    }
+  }
+</script>
diff --git a/base-vue/src/views/modules/sys/dept.vue b/base-vue/src/views/modules/sys/dept.vue
new file mode 100644
index 0000000..f2cefb9
--- /dev/null
+++ b/base-vue/src/views/modules/sys/dept.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="dept-menu">
+    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form-item>
+        <el-input 
+          v-model="dataForm.name"
+          clearable
+          placeholder="输入部门名称搜索">
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-select
+          v-model="dataForm.is_used"
+          clearable
+          placeholder="状态">
+          <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getDataList()">查询</el-button>
+        <el-button v-if="isAuth('sys:dept:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+        <el-button v-if="isAuth('sys:dept:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      v-loading="dataListLoading"
+      border
+      lazy
+      :load="getDeptDatas"
+      :default-sort="{prop: 'dept_sort', order: 'ascending'}"
+      :tree-props="{children: 'children', hasChildren: 'has_children'}"
+      :data="dataList"
+      row-key="dept_id"
+      @selection-change="selectionChangeHandle"
+      style="width: 100%;">
+      <el-table-column
+        type="selection"
+        header-align="center"
+        align="center"
+        width="50">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        header-align="center"
+        align="center"
+        label="名称">
+      </el-table-column>
+      <el-table-column
+        prop="dept_sort"
+        header-align="center"
+        align="center"
+        label="排序">
+      </el-table-column>
+      <el-table-column
+        prop="is_used"
+        header-align="center"
+        align="center"
+        label="状态">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.is_used"
+            :disabled="scope.row.id === 1"
+            active-color="#409EFF"
+            inactive-color="#F56C6C"
+            @change="changeEnabled(scope.row, scope.row.is_used)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="create_time"
+        header-align="center"
+        align="center"
+        label="创建日期">
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="150"
+        label="操作">
+        <template slot-scope="scope">
+          <el-button v-if="isAuth('sys:dept:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
+          <el-button v-if="isAuth('sys:dept:delete')" type="text" size="small" @click="deleteHandle(scope.row.dept_id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+  </div>
+</template>
+
+<script>
+import AddOrUpdate from './dept-add-or-update'
+export default {
+  data () {
+    return {
+      dataForm: {
+        name: '',
+        is_used: ''
+      },
+      enabledTypeOptions: [
+        { key: true, display_name: '启用' },
+        { key: false, display_name: '禁用' }
+      ],
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  activated () {
+    this.getDataList()
+  },
+  methods: {
+    // 获取数据列表
+    getDataList () {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/api/dept/vo'),
+        method: 'get',
+        params: this.$http.adornParams({
+          'page': this.pageIndex,
+          'size': this.pageSize,
+          'sort': 'id,desc',
+          'name': this.dataForm.name,
+          'is_used': this.dataForm.is_used
+        })
+      }).then(({data}) => {
+        if (data && data.code === 200) {
+          this.dataList = data.content
+          this.totalPage = data.totalElements
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+        }
+        this.dataListLoading = false
+      })
+    },
+    // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+    // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.getDataList()
+    },
+    // 多选
+    selectionChangeHandle (val) {
+      this.dataListSelections = val
+    },
+    // 新增 / 修改
+    addOrUpdateHandle (row) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(row)
+      })
+    },
+    // 删除
+    deleteHandle (id) {
+      var ids = id ? [id] : this.dataListSelections.map(item => {
+        return item.dept_id
+      })
+      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl('/api/dept'),
+          method: 'DELETE',
+          data: this.$http.adornData(ids)
+        }).then(({data}) => {
+          if (data && data.code === 200) {
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getDataList()
+              }
+            })
+          } else {
+            this.$message.error(data.msg)
+          }
+        })
+      }).catch(() => {})
+    },
+    // 表格渲染  :load="getDeptDatas" 点击事件 row-key需要指定唯一的数据id
+    getDeptDatas(tree, treeNode, resolve) {
+      const params = { pid: tree.dept_id }
+      setTimeout(() => {
+        this.$http({
+          url: this.$http.adornUrl('/api/dept/vo'),
+          method: 'get',
+          data: this.$http.adornData(params)
+        }).then(({res}) => {
+          resolve(res.content)
+        })
+      }, 100)
+    }
+  }
+}
+</script>
\ No newline at end of file