最后更新

Signed-off-by: yovinchen <gzh298255@gmail.com>
Signed-off-by: YoVinchen <gzh298255@gmail.com>

package.json

@@ -14,6 +14,8 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
+    "@form-create/element-ui": "^2.5.17",
+    "@form-create/designer": "^1.0.8",
     "axios": "0.18.1",
     "core-js": "3.6.5",
     "element-ui": "2.13.2",

src/api/process/process.js

@@ -0,0 +1,14 @@
+import request from '@/utils/request'
+
+const api_name = '/admin/process'
+
+export default {
+
+  getPageList(page, limit, searchObj) {
+    return request({
+      url: `${api_name}/${page}/${limit}`,
+      method: 'get',
+      params: searchObj // url查询字符串或表单键值对
+    })
+  }
+}

src/api/process/processTemplate.js

@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+const api_name = '/admin/process/processTemplate'
+
+export default {
+
+  getPageList(page, limit) {
+    return request({
+      url: `${api_name}/${page}/${limit}`,
+      method: 'get'
+    })
+  },
+  getById(id) {
+    return request({
+      url: `${api_name}/get/${id}`,
+      method: 'get'
+    })
+  },
+
+  save(role) {
+    return request({
+      url: `${api_name}/save`,
+      method: 'post',
+      data: role
+    })
+  },
+
+  updateById(role) {
+    return request({
+      url: `${api_name}/update`,
+      method: 'put',
+      data: role
+    })
+  },
+  removeById(id) {
+    return request({
+      url: `${api_name}/remove/${id}`,
+      method: 'delete'
+    })
+  },
+  publish(id) {
+    return request({
+      url: `${api_name}/publish/${id}`,
+      method: 'get'
+    })
+  }
+}

src/api/process/processType.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+const api_name = '/admin/process/processType'
+
+export default {
+  findAll() {
+    return request({
+      url: `${api_name}/findAll`,
+      method: 'get'
+    })
+  },
+  getPageList(page, limit) {
+    return request({
+      url: `${api_name}/${page}/${limit}`,
+      method: 'get'
+    })
+  },
+  getById(id) {
+    return request({
+      url: `${api_name}/get/${id}`,
+      method: 'get'
+    })
+  },
+  save(role) {
+    return request({
+      url: `${api_name}/save`,
+      method: 'post',
+      data: role
+    })
+  },
+  updateById(role) {
+    return request({
+      url: `${api_name}/update`,
+      method: 'put',
+      data: role
+    })
+  },
+  removeById(id) {
+    return request({
+      url: `${api_name}/remove/${id}`,
+      method: 'delete'
+    })
+  }
+}

src/api/system/sysMenu.js

@@ -23,7 +23,7 @@ export default {
   removeById(id) {
     return request({
       url: `${api_name}/remove/${id}`,
-      method: "delete"
+      method: 'delete'
     })
   },
 
@@ -33,7 +33,7 @@ export default {
   save(sysMenu) {
     return request({
       url: `${api_name}/save`,
-      method: "post",
+      method: 'post',
       data: sysMenu
     })
   },
@@ -44,7 +44,7 @@ export default {
   updateById(sysMenu) {
     return request({
       url: `${api_name}/update`,
-      method: "put",
+      method: 'put',
       data: sysMenu
     })
   },
@@ -65,7 +65,7 @@ export default {
   doAssign(assginMenuVo) {
     return request({
       url: `${api_name}/doAssign`,
-      method: "post",
+      method: 'post',
       data: assginMenuVo
     })
   }

src/api/wechat/menu.js

@@ -0,0 +1,54 @@
+import request from '@/utils/request'
+
+const api_name = '/admin/wechat/menu'
+
+export default {
+  removeMenu() {
+    return request({
+      url: `${api_name}/removeMenu`,
+      method: `delete`
+    })
+  },
+  syncMenu() {
+    return request({
+      url: `${api_name}/syncMenu`,
+      method: `get`
+    })
+  },
+  findMenuInfo() {
+    return request({
+      url: `${api_name}/findMenuInfo`,
+      method: `get`
+    })
+  },
+
+  save(menu) {
+    return request({
+      url: `${api_name}/save`,
+      method: `post`,
+      data: menu
+    })
+  },
+
+  getById(id) {
+    return request({
+      url: `${api_name}/get/${id}`,
+      method: `get`
+    })
+  },
+
+  updateById(menu) {
+    return request({
+      url: `${api_name}/update`,
+      method: `put`,
+      data: menu
+    })
+  },
+
+  removeById(id) {
+    return request({
+      url: `${api_name}/remove/${id}`,
+      method: 'delete'
+    })
+  }
+}

src/layout/components/Sidebar/index.vue

@@ -31,7 +31,7 @@ export default {
       'sidebar'
     ]),
     routes() {
-      //return this.$router.options.routes
+      // return this.$router.options.routes
       return this.$router.options.routes.concat(global.antRouter)
     },
     activeMenu() {

src/main.js

@@ -1,22 +1,23 @@
 import Vue from 'vue'
 
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
-
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import locale from 'element-ui/lib/locale/lang/en' // lang i18n
-
 import '@/styles/index.scss' // global css
-
 import App from './App'
 import store from './store'
 import router from './router'
 
 import '@/icons' // icon
 import '@/permission' // permission control
-
-//新增
+// 新增
 import hasBtnPermission from '@/utils/btn-permission'
+import formCreate from '@form-create/element-ui'
+import FcDesigner from '@form-create/designer'
+
+Vue.use(formCreate)
+Vue.use(FcDesigner)
 Vue.prototype.$hasBP = hasBtnPermission
 /**
  * If you don't want to use mock-server

src/permission.js

@@ -7,15 +7,16 @@ import 'nprogress/nprogress.css' // 水平进度条样式
 import getPageTitle from '@/utils/get-page-title' // 获取应用头部标题的函数
 import Layout from '@/layout'
 import ParentView from '@/components/ParentView'
-const _import = require('./router/_import_'+process.env.NODE_ENV) // 获取组件的方法
+
+const _import = require('./router/_import_' + process.env.NODE_ENV) // 获取组件的方法
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 const whiteList = ['/login'] // no redirect whitelist
 router.beforeEach(async(to, from, next) => {
   NProgress.start()
-// set page title
+  // set page title
   document.title = getPageTitle(to.meta.title)
-// determine whether the user has logged in
+  // determine whether the user has logged in
   const hasToken = getToken()
   if (hasToken) {
     if (to.path === '/login') {
@@ -37,14 +38,14 @@ router.beforeEach(async(to, from, next) => {
           const menus = filterAsyncRouter(store.getters.menus)// 1.过滤路由
           console.log(menus)
           router.addRoutes(menus) // 2.动态添加路由
-          let lastRou = [{ path: '*', redirect: '/404', hidden: true }]
+          const lastRou = [{ path: '*', redirect: '/404', hidden: true }]
           router.addRoutes(lastRou)
           global.antRouter = menus // 3.将路由数据传递给全局变量，做侧边栏菜单渲染工作
           next({
             ...to,
             replace: true
           })
-          //next()
+          // next()
         } catch (error) {
           // remove token and go to login page to re-login
           console.log(error)
@@ -81,7 +82,6 @@ function filterAsyncRouter(asyncRouterMap) {
         try {
           route.component = _import(route.component)// 导入组件
         } catch (error) {
-          debugger
           console.log(error)
           route.component = _import('dashboard/index')// 导入组件
         }

src/router/index.js

@@ -55,8 +55,7 @@ export const constantRoutes = [
     }]
   }
 
-
-  //添加我们的路由
+  // 添加我们的路由
   // {
   //   path: '/system',
   //   component: Layout,
@@ -105,7 +104,6 @@ export const constantRoutes = [
   //   ]
   // },
 
-
   // 404 page must be placed at the end !!!
   // { path: '*', redirect: '/404', hidden: true }
 ]

src/views/processMgr/process/list.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="app-container">
+
+    <div class="search-div">
+      <el-form label-width="70px" size="small">
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="关 键 字">
+              <el-input
+                v-model="searchObj.keyword"
+                placeholder="审批编号/标题/手机号码/姓名"
+                style="width: 95%"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="状态">
+              <el-select
+                v-model="searchObj.status"
+                placeholder="请选状态"
+                style="width: 100%;"
+              >
+                <el-option
+                  v-for="item in statusList"
+                  :key="item.status"
+                  :label="item.name"
+                  :value="item.status"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="操作时间">
+              <el-date-picker
+                v-model="createTimes"
+                end-placeholder="结束时间"
+                range-separator="至"
+                start-placeholder="开始时间"
+                style="margin-right: 10px;width: 100%;"
+                type="datetimerange"
+                value-format="yyyy-MM-dd HH:mm:ss"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row style="display:flex">
+          <el-button :loading="loading" icon="el-icon-search" size="mini" type="primary" @click="fetchData()">搜索
+          </el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
+        </el-row>
+      </el-form>
+    </div>
+    <!-- 列表 -->
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      border
+      stripe
+      style="width: 100%;margin-top: 10px;"
+    >
+
+      <el-table-column
+        align="center"
+        label="序号"
+        width="70"
+      >
+        <template slot-scope="scope">
+          {{ (page - 1) * limit + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column label="审批编号" prop="processCode" width="130" />
+      <el-table-column label="标题" prop="title" width="180" />
+      <el-table-column label="用户" prop="name" />
+      <el-table-column label="审批类型" prop="processTypeName" />
+      <el-table-column label="审批模板" prop="processTemplateName" />
+      <el-table-column label="描述" prop="description" width="180" />
+      <el-table-column label="状态">
+        <template slot-scope="scope">
+          {{ scope.row.status === 1 ? '审批中' : scope.row.status === 2 ? '完成' : '驳回' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" prop="createTime" width="160" />
+
+      <el-table-column align="center" label="操作" width="120">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" @click="show(scope.row.id)">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页组件 -->
+    <el-pagination
+      :current-page="page"
+      :page-size="limit"
+      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
+      :total="total"
+      layout="sizes, prev, pager, next, jumper, ->, total, slot"
+      style="padding: 30px 0; text-align: center;"
+      @current-change="fetchData"
+      @size-change="changeSize"
+    />
+  </div>
+</template>
+
+<script>
+import api from '@/api/process/process'
+
+export default {
+  data() {
+    return {
+      listLoading: true, // 数据是否正在加载
+      list: null, // banner列表
+      total: 0, // 数据库中的总记录数
+      page: 1, // 默认页码
+      limit: 10, // 每页记录数
+      searchObj: {}, // 查询表单对象
+      statusList: [
+        { 'status': '1', 'name': '进行中' },
+        { 'status': '2', 'name': '已完成' },
+        { 'status': '-1', 'name': '驳回' }
+      ],
+      createTimes: []
+    }
+  },
+
+  // 生命周期函数：内存准备完毕，页面尚未渲染
+  created() {
+    console.log('list created......')
+    this.fetchData()
+  },
+
+  // 生命周期函数：内存准备完毕，页面渲染成功
+  mounted() {
+    console.log('list mounted......')
+  },
+
+  methods: {
+    // 当页码发生改变的时候
+    changeSize(size) {
+      console.log(size)
+      this.limit = size
+      this.fetchData(1)
+    },
+
+    // 加载banner列表数据
+    fetchData(page = 1) {
+      console.log('翻页。。。' + page)
+      // 异步获取远程数据（ajax）
+      this.page = page
+
+      if (this.createTimes && this.createTimes.length === 2) {
+        this.searchObj.createTimeBegin = this.createTimes[0]
+        this.searchObj.createTimeEnd = this.createTimes[1]
+      }
+
+      api.getPageList(this.page, this.limit, this.searchObj).then(
+        response => {
+          this.list = response.data.records
+          this.total = response.data.total
+
+          // 数据加载并绑定成功
+          this.listLoading = false
+        }
+      )
+    },
+
+    // 重置查询表单
+    resetData() {
+      console.log('重置查询表单')
+      this.searchObj = {}
+      this.fetchData()
+    },
+
+    show(id) {
+      console.log(id)
+    }
+  }
+}
+</script>

src/views/processSet/processTemplate/list.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="app-container">
+    <!-- 工具条 -->
+    <div class="tools-div">
+      <el-button
+        :disabled="$hasBP('bnt.processTemplate.templateSet') === false"
+        icon="el-icon-plus"
+        size="mini"
+        type="success"
+        @click="add()"
+      >添加审批设置
+      </el-button>
+    </div>
+    <!-- 列表 -->
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      border
+      stripe
+      style="width: 100%;margin-top: 10px;"
+    >
+      <el-table-column
+        align="center"
+        label="序号"
+        width="70"
+      >
+        <template slot-scope="scope">
+          {{ (page - 1) * limit + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      iconPath
+      <el-table-column label="审批名称" prop="name" />
+      <el-table-column label="图标">
+        <template slot-scope="scope">
+          <img :src="scope.row.iconUrl" style="width: 30px;height: 30px;vertical-align: text-bottom;">
+        </template>
+      </el-table-column>
+      <el-table-column label="审批类型" prop="processTypeName" />
+      <el-table-column label="描述" prop="description" />
+      <el-table-column label="创建时间" prop="createTime" />
+      <el-table-column label="更新时间" prop="updateTime" />
+      <el-table-column align="center" label="操作" width="250">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" @click="show(scope.row)">查看审批设置</el-button>
+          <el-button
+            v-if="scope.row.status === 0"
+            :disabled="$hasBP('bnt.processTemplate.templateSet') === false"
+            size="mini"
+            type="text"
+            @click="edit(scope.row.id)"
+          >修改审批设置
+          </el-button>
+          <el-button
+            v-if="scope.row.status === 0"
+            :disabled="$hasBP('bnt.processTemplate.remove') === false"
+            size="mini"
+            type="text"
+            @click="removeDataById(scope.row.id)"
+          >删除
+          </el-button>
+          <el-button
+            v-if="scope.row.status === 0"
+            :disabled="$hasBP('bnt.processTemplate.publish') === false"
+            size="mini"
+            type="text"
+            @click="publish(scope.row.id)"
+          >发布
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <el-pagination
+      :current-page="page"
+      :page-size="limit"
+      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
+      :total="total"
+      layout="sizes, prev, pager, next, jumper, ->, total, slot"
+      style="padding: 30px 0; text-align: center;"
+      @current-change="fetchData"
+      @size-change="changeSize"
+    />
+
+    <el-dialog :visible.sync="formDialogVisible" title="查看审批设置" width="35%">
+      <h3>基本信息</h3>
+      <el-divider />
+      <el-form ref="flashPromotionForm" label-width="150px" size="small" style="padding-right: 40px;">
+        <el-form-item label="审批类型" style="margin-bottom: 0px;">{{ processTemplate.processTypeName }}</el-form-item>
+        <el-form-item label="名称" style="margin-bottom: 0px;">{{ processTemplate.name }}</el-form-item>
+        <el-form-item label="创建时间" style="margin-bottom: 0px;">{{ processTemplate.createTime }}</el-form-item>
+      </el-form>
+      <h3>表单信息</h3>
+      <el-divider />
+      <div>
+        <form-create
+          :option="option"
+          :rule="rule"
+        />
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="formDialogVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+<script>
+import api from '@/api/process/processTemplate'
+
+export default {
+  data() {
+    return {
+      listLoading: true, // 数据是否正在加载
+      list: null, // banner列表
+      total: 0, // 数据库中的总记录数
+      page: 1, // 默认页码
+      limit: 10, // 每页记录数
+      searchObj: {}, // 查询表单对象
+      rule: [],
+      option: {},
+      processTemplate: {},
+      formDialogVisible: false
+    }
+  },
+  // 生命周期函数：内存准备完毕，页面尚未渲染
+  created() {
+    this.fetchData()
+  },
+  // 生命周期函数：内存准备完毕，页面渲染成功
+  mounted() {
+  },
+  methods: {
+    // 发布
+    publish(id) {
+      api.publish(id).then(response => {
+        this.$message.success('发布成功')
+        this.fetchData(this.page)
+      })
+    },
+    // 查看审批模版
+    show(row) {
+      this.rule = JSON.parse(row.formProps)
+      this.option = JSON.parse(row.formOptions)
+      this.processTemplate = row
+      this.formDialogVisible = true
+    },
+    // 当页码发生改变的时候
+    changeSize(size) {
+      this.limit = size
+      this.fetchData(1)
+    },
+    // 加载banner列表数据
+    fetchData(page = 1) {
+      // 异步获取远程数据（ajax）
+      this.page = page
+      api.getPageList(this.page, this.limit, this.searchObj).then(
+        response => {
+          this.list = response.data.records
+          this.total = response.data.total
+          // 数据加载并绑定成功
+          this.listLoading = false
+        }
+      )
+    },
+    // 重置查询表单
+    resetData() {
+      this.searchObj = {}
+      this.fetchData()
+    },
+    // 根据id删除数据
+    removeDataById(id) {
+      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => { // promise
+        // 点击确定，远程调用ajax
+        return api.removeById(id)
+      }).then((response) => {
+        this.fetchData(this.page)
+        this.$message.success(response.message)
+      }).catch(() => {
+        this.$message.info('取消删除')
+      })
+    },
+    add() {
+      this.$router.push('/processSet/templateSet')
+    },
+    edit(id) {
+      this.$router.push('/processSet/templateSet?id=' + id)
+    }
+  }
+}
+</script>

src/views/processSet/processTemplate/templateSet.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="app-container">
+    <el-steps :active="stepIndex" finish-status="success">
+      <el-step title="基本设置" />
+      <el-step title="表单设置" />
+      <el-step title="流程设置" />
+    </el-steps>
+
+    <div class="tools-div">
+      <el-button v-if="stepIndex > 1" icon="el-icon-check" round size="small" type="primary" @click="pre()">上一步
+      </el-button>
+      <el-button icon="el-icon-check" round size="small" type="primary" @click="next()">{{
+        stepIndex === 3 ? '提交保存' : '下一步'
+      }}
+      </el-button>
+      <el-button size="small" type="primary" @click="back()">返回</el-button>
+    </div>
+
+    <!-- 第一步 -->
+    <div v-show="stepIndex === 1" style="margin-top: 20px;">
+      <el-form ref="flashPromotionForm" label-width="150px" size="small" style="padding-right: 40px;">
+        <el-form-item label="审批类型">
+          <el-select v-model="processTemplate.processTypeId" placeholder="请选择审批类型">
+            <el-option v-for="item in processTypeList" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="审批名称">
+          <el-input v-model="processTemplate.name" />
+        </el-form-item>
+        <el-form-item label="审批图标">
+          <el-select v-model="processTemplate.iconUrl" placeholder="请选择审批图标">
+            <el-option v-for="item in iconUrlList" :label="item.iconUrl" :value="item.iconUrl">
+              <img :src="item.iconUrl" style="width: 30px;height: 30px;vertical-align: text-bottom;">
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="描述">
+          <el-input v-model="processTemplate.description" />
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 第二步 -->
+    <div v-show="stepIndex == 2" style="margin-top: 20px;">
+      <!--表单构建器-->
+      <fc-designer ref="designer" class="form-build" />
+    </div>
+
+    <!-- 第三步 -->
+    <div v-show="stepIndex == 3" style="margin-top: 20px;">
+      <el-upload
+        :before-upload="beforeUpload"
+        :file-list="fileList"
+        :headers="uploadHeaders"
+        :on-success="onUploadSuccess"
+        action="/dev-api/admin/process/processTemplate/uploadProcessDefinition"
+        class="upload-demo"
+        drag
+        multiple="false"
+      >
+        <i class="el-icon-upload" />
+        <div class="el-upload__text">将Activiti流程设计文件拖到此处，或<em>点击上传</em></div>
+        <div slot="tip" class="el-upload__tip">只能上传zip压缩文件，且不超过2048kb</div>
+      </el-upload>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from '@/api/process/processTemplate'
+import processTypeApi from '@/api/process/processType'
+import store from '@/store'
+import ElOption from 'element-ui/packages/select/src/option.vue'
+
+const defaultForm = {
+  id: '',
+  name: '',
+  iconUrl: '',
+  formProps: '',
+  formOptions: '',
+  processDefinitionKey: '',
+  processDefinitionPath: '',
+  description: ''
+}
+export default {
+  components: { ElOption },
+  data() {
+    return {
+      stepIndex: 1,
+      processTypeList: [],
+      processTemplate: defaultForm,
+      iconUrlList: [
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1t695CFYqK1RjSZLeXXbXppXa-102-102.png', tag: '请假' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1bHOWCSzqK1RjSZFjXXblCFXa-112-112.png', tag: '出差' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1cbCYCPTpK1RjSZKPXXa3UpXa-112-112.png', tag: '机票出差' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1cbCYCPTpK1RjSZKPXXa3UpXa-112-112.png', tag: '机票改签' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1e76lCOLaK1RjSZFxXXamPFXa-112-112.png', tag: '外出' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1Yfa0CG6qK1RjSZFmXXX0PFXa-112-112.png', tag: '补卡申请' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1Y8PlCNjaK1RjSZKzXXXVwXXa-112-112.png', tag: '加班' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB11X99CNTpK1RjSZFKXXa2wXXa-102-102.png', tag: '居家隔离' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1_YG.COrpK1RjSZFhXXXSdXXa-102-102.png', tag: '请假' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB13ca1CMDqK1RjSZSyXXaxEVXa-102-102.png', tag: '调岗' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1U9iBCSzqK1RjSZPcXXbTepXa-102-102.png', tag: '离职' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB11pS_CFzqK1RjSZSgXXcpAVXa-102-102.png', tag: '费用申请' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1t695CFYqK1RjSZLeXXbXppXa-102-102.png', tag: '用章申请' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB13f_aCQzoK1RjSZFlXXai4VXa-102-102.png', tag: '携章外出' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1_YG.COrpK1RjSZFhXXXSdXXa-102-102.png', tag: '学期内分期' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1_YG.COrpK1RjSZFhXXXSdXXa-102-102.png', tag: '特殊学费' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1Yfa0CG6qK1RjSZFmXXX0PFXa-112-112.png', tag: '充值卡申领' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1e76lCOLaK1RjSZFxXXamPFXa-112-112.png', tag: '礼品申领' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1FNG.CMHqK1RjSZFgXXa7JXXa-102-102.png', tag: '邮寄快递申请' },
+        {
+          iconUrl: 'https://gw.alicdn.com/imgextra/i3/O1CN01LLn0YV1LhBXs7T2iO_!!6000000001330-2-tps-120-120.png',
+          tag: '合同审批'
+        },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1e76lCOLaK1RjSZFxXXamPFXa-112-112.png', tag: '合同借阅' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1e76lCOLaK1RjSZFxXXamPFXa-112-112.png', tag: '魔点临时开门权限' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1bHOWCSzqK1RjSZFjXXblCFXa-112-112.png', tag: '北京科技园车证审批' },
+        { iconUrl: 'https://gw.alicdn.com/tfs/TB1e76lCOLaK1RjSZFxXXamPFXa-112-112.png', tag: '魔点访客提前预约审批' }
+      ],
+
+      uploadHeaders: {
+        'token': store.getters.token
+      },
+      fileList: []
+    }
+  },
+
+  created() {
+    const id = this.$route.query.id
+    console.log(id)
+    if (id > 0) {
+      this.fetchDataById(id)
+    }
+    this.fetchProcessTypeData()
+  },
+
+  methods: {
+    pre() {
+      this.stepIndex -= 1
+    },
+
+    next() {
+      if (this.stepIndex === 2) {
+        this.processTemplate.formProps = JSON.stringify(this.$refs.designer.getRule())
+        this.processTemplate.formOptions = JSON.stringify(this.$refs.designer.getOption())
+        console.log(JSON.stringify(this.processTemplate))
+      }
+      if (this.stepIndex === 3) {
+        this.saveOrUpdate()
+      }
+
+      this.stepIndex += 1
+    },
+
+    fetchProcessTypeData() {
+      processTypeApi.findAll().then(response => {
+        this.processTypeList = response.data
+      })
+    },
+    fetchDataById(id) {
+      api.getById(id).then(response => {
+        this.processTemplate = response.data
+        // 给表单设计器赋值
+        this.$refs.designer.setRule(JSON.parse(this.processTemplate.formProps))
+        this.$refs.designer.setOption(JSON.parse(this.processTemplate.formOptions))
+        this.fileList = [{
+          name: this.processTemplate.processDefinitionPath,
+          url: this.processTemplate.processDefinitionPath
+        }]
+      })
+    },
+
+    saveOrUpdate() {
+      this.saveBtnDisabled = true // 防止表单重复提交
+      if (!this.processTemplate.id) {
+        this.saveData()
+      } else {
+        this.updateData()
+      }
+    },
+
+    // 新增
+    saveData() {
+      api.save(this.processTemplate).then(response => {
+        this.$router.push('/processSet/processTemplate')
+      })
+    },
+
+    // 根据id更新记录
+    updateData() {
+      api.updateById(this.processTemplate).then(response => {
+        this.$router.push('/processSet/processTemplate')
+      })
+    },
+
+    // 文件上传限制条件
+    beforeUpload(file) {
+      const isZip = file.type === 'application/x-zip-compressed'
+      const isLt2M = file.size / 1024 / 1024 < 2
+
+      if (!isZip) {
+        this.$message.error('文件格式不正确!')
+        return false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传大小不能超过 2MB!')
+        return false
+      }
+      return true
+    },
+
+    // 上传成功的回调
+    onUploadSuccess(res, file) {
+      // 填充上传文件列表
+      this.processTemplate.processDefinitionPath = res.data.processDefinitionPath
+      this.processTemplate.processDefinitionKey = res.data.processDefinitionKey
+    },
+
+    back() {
+      this.$router.push('/processSet/processTemplate')
+    }
+  }
+}
+</script>

src/views/processSet/processType/list.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="app-container">
+    <!-- 工具条 -->
+    <div class="tools-div">
+      <el-button
+        :disabled="$hasBP('bnt.processType.add') === false"
+        icon="el-icon-plus"
+        size="mini"
+        type="success"
+        @click="add"
+      >添 加
+      </el-button>
+    </div>
+    <!-- banner列表 -->
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      border
+      stripe
+      style="width: 100%;margin-top: 10px;"
+    >
+      <el-table-column
+        type="selection"
+        width="55"
+      />
+      <el-table-column
+        align="center"
+        label="序号"
+        width="70"
+      >
+        <template slot-scope="scope">
+          {{ (page - 1) * limit + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column label="类型名称" prop="name" />
+      <el-table-column label="描述" prop="description" />
+      <el-table-column label="创建时间" prop="createTime" />
+      <el-table-column label="更新时间" prop="updateTime" />
+      <el-table-column align="center" label="操作" width="200">
+        <template slot-scope="scope">
+          <el-button
+            :disabled="$hasBP('bnt.processType.update') === false"
+            size="mini"
+            type="text"
+            @click="edit(scope.row.id)"
+          >修改
+          </el-button>
+          <el-button
+            :disabled="$hasBP('bnt.processType.remove') === false"
+            size="mini"
+            type="text"
+            @click="removeDataById(scope.row.id)"
+          >删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <el-pagination
+      :current-page="page"
+      :page-size="limit"
+      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
+      :total="total"
+      layout="sizes, prev, pager, next, jumper, ->, total, slot"
+      style="padding: 30px 0; text-align: center;"
+      @current-change="fetchData"
+      @size-change="changeSize"
+    />
+    <el-dialog :visible.sync="dialogVisible" title="添加/修改" width="40%">
+      <el-form ref="flashPromotionForm" label-width="150px" size="small" style="padding-right: 40px;">
+        <el-form-item label="类型名称">
+          <el-input v-model="processType.name" />
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input v-model="processType.description" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveOrUpdate()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import api from '@/api/process/processType'
+
+const defaultForm = {
+  id: '',
+  name: '',
+  description: ''
+}
+export default {
+  data() {
+    return {
+      listLoading: true, // 数据是否正在加载
+      list: null, // banner列表
+      total: 0, // 数据库中的总记录数
+      page: 1, // 默认页码
+      limit: 10, // 每页记录数
+      searchObj: {}, // 查询表单对象
+      dialogVisible: false,
+      processType: defaultForm,
+      saveBtnDisabled: false
+    }
+  },
+  // 生命周期函数：内存准备完毕，页面尚未渲染
+  created() {
+    this.fetchData()
+  },
+  // 生命周期函数：内存准备完毕，页面渲染成功
+  mounted() {
+  },
+  methods: {
+    // 当页码发生改变的时候
+    changeSize(size) {
+      console.log(size)
+      this.limit = size
+      this.fetchData(1)
+    },
+    // 加载列表数据
+    fetchData(page = 1) {
+      this.page = page
+      api.getPageList(this.page, this.limit, this.searchObj).then(response => {
+        this.list = response.data.records
+        this.total = response.data.total
+        // 数据加载并绑定成功
+        this.listLoading = false
+      })
+    },
+    // 重置查询表单
+    resetData() {
+      console.log('重置查询表单')
+      this.searchObj = {}
+      this.fetchData()
+    },
+    // 根据id删除数据
+    removeDataById(id) {
+      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => { // promise
+        // 点击确定，远程调用ajax
+        return api.removeById(id)
+      }).then((response) => {
+        this.fetchData(this.page)
+        this.$message.success(response.message)
+      }).catch(() => {
+        this.$message.info('取消删除')
+      })
+    },
+    add() {
+      this.dialogVisible = true
+      this.processType = Object.assign({}, defaultForm)
+    },
+    edit(id) {
+      this.dialogVisible = true
+      this.fetchDataById(id)
+    },
+    fetchDataById(id) {
+      api.getById(id).then(response => {
+        this.processType = response.data
+      })
+    },
+    saveOrUpdate() {
+      this.saveBtnDisabled = true // 防止表单重复提交
+      if (!this.processType.id) {
+        this.saveData()
+      } else {
+        this.updateData()
+      }
+    },
+    // 新增
+    saveData() {
+      api.save(this.processType).then(response => {
+        this.$message.success(response.message || '操作成功')
+        this.dialogVisible = false
+        this.fetchData(this.page)
+      })
+    },
+    // 根据id更新记录
+    updateData() {
+      api.updateById(this.processType).then(response => {
+        this.$message.success(response.message || '操作成功')
+        this.dialogVisible = false
+        this.fetchData(this.page)
+      })
+    }
+  }
+}
+</script>

src/views/system/sysMenu/list.vue

@@ -21,16 +21,16 @@
       style="width: 100%;margin-bottom: 20px;margin-top: 10px;"
     >
 
-      <el-table-column label="菜单名称" prop="name" width="160"/>
+      <el-table-column label="菜单名称" prop="name" width="160" />
       <el-table-column label="图标">
         <template slot-scope="scope">
-          <i :class="scope.row.icon"/>
+          <i :class="scope.row.icon" />
         </template>
       </el-table-column>
-      <el-table-column label="权限标识" prop="perms" width="160"/>
-      <el-table-column label="路由地址" prop="path" width="120"/>
-      <el-table-column label="组件路径" prop="component" width="160"/>
-      <el-table-column label="排序" prop="sortValue" width="60"/>
+      <el-table-column label="权限标识" prop="perms" width="160" />
+      <el-table-column label="路由地址" prop="path" width="120" />
+      <el-table-column label="组件路径" prop="component" width="160" />
+      <el-table-column label="排序" prop="sortValue" width="60" />
       <el-table-column label="状态" width="80">
         <template slot-scope="scope">
           <el-switch
@@ -39,7 +39,7 @@
           />
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" prop="createTime" width="160"/>
+      <el-table-column label="创建时间" prop="createTime" width="160" />
       <el-table-column align="center" fixed="right" label="操作" width="180">
         <template slot-scope="scope">
           <el-button
@@ -73,7 +73,7 @@
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
       <el-form ref="dataForm" :model="sysMenu" label-width="150px" size="small" style="padding-right: 40px;">
         <el-form-item v-if="sysMenu.id === ''" label="上级部门">
-          <el-input v-model="sysMenu.parentName" disabled="true"/>
+          <el-input v-model="sysMenu.parentName" disabled="true" />
         </el-form-item>
         <el-form-item label="菜单类型" prop="type">
           <el-radio-group v-model="sysMenu.type" :disabled="typeDisabled">
@@ -83,47 +83,47 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="菜单名称" prop="name">
-          <el-input v-model="sysMenu.name"/>
+          <el-input v-model="sysMenu.name" />
         </el-form-item>
         <el-form-item v-if="sysMenu.type !== 2" label="图标" prop="icon">
           <el-select v-model="sysMenu.icon" clearable>
             <el-option v-for="item in iconList" :key="item.class" :label="item.class" :value="item.class">
               <span style="float: left;">
-                <i :class="item.class"/>  <!-- 如果动态显示图标，这里添加判断 -->
+                <i :class="item.class" />  <!-- 如果动态显示图标，这里添加判断 -->
               </span>
               <span style="padding-left: 6px;">{{ item.class }}</span>
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="排序">
-          <el-input-number v-model="sysMenu.sortValue" :min="0" controls-position="right"/>
+          <el-input-number v-model="sysMenu.sortValue" :min="0" controls-position="right" />
         </el-form-item>
         <el-form-item prop="path">
           <span slot="label">
             <el-tooltip content="访问的路由地址，如：`sysUser`" placement="top">
-              <i class="el-icon-question"/>
+              <i class="el-icon-question" />
             </el-tooltip>
             路由地址
           </span>
-          <el-input v-model="sysMenu.path" placeholder="请输入路由地址"/>
+          <el-input v-model="sysMenu.path" placeholder="请输入路由地址" />
         </el-form-item>
         <el-form-item v-if="sysMenu.type !== 0" prop="component">
           <span slot="label">
             <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
-              <i class="el-icon-question"/>
+              <i class="el-icon-question" />
             </el-tooltip>
             组件路径
           </span>
-          <el-input v-model="sysMenu.component" placeholder="请输入组件路径"/>
+          <el-input v-model="sysMenu.component" placeholder="请输入组件路径" />
         </el-form-item>
         <el-form-item v-if="sysMenu.type === 2">
-          <el-input v-model="sysMenu.perms" maxlength="100" placeholder="请输入权限标识"/>
+          <el-input v-model="sysMenu.perms" maxlength="100" placeholder="请输入权限标识" />
           <span slot="label">
             <el-tooltip
               content="控制器中定义的权限字符，如：@PreAuthorize(hasAuthority('bnt.sysRole.list'))"
               placement="top"
             >
-              <i class="el-icon-question"/>
+              <i class="el-icon-question" />
             </el-tooltip>
             权限字符
           </span>
@@ -248,7 +248,6 @@ export default {
 
     // 根据id删除数据
     removeDataById(id) {
-      // debugger
       this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -269,7 +268,6 @@ export default {
 
     // -------------
     add(row) {
-      debugger
       this.typeDisabled = false
       this.dialogTitle = '添加下级节点'
       this.dialogVisible = true
@@ -300,7 +298,6 @@ export default {
     },
 
     edit(row) {
-      debugger
       this.dialogTitle = '修改节点'
       this.dialogVisible = true
 

src/views/system/sysRole/assignAuth.vue

@@ -4,8 +4,8 @@
       授权角色：{{ $route.query.roleName }}
     </div>
     <el-tree
-      style="margin: 20px 0"
       ref="tree"
+      style="margin: 20px 0"
       :data="sysMenuList"
       node-key="id"
       show-checkbox
@@ -14,14 +14,14 @@
     />
     <div style="padding: 20px 20px;">
       <el-button :loading="loading" type="primary" icon="el-icon-check" size="mini" @click="save">保存</el-button>
-      <el-button @click="$router.push('/system/sysRole')" size="mini" icon="el-icon-refresh-right">返回</el-button>
+      <el-button icon="el-icon-refresh-right" size="mini" @click="$router.push('/system/sysRole')">返回</el-button>
     </div>
   </div>
 </template>
 <script>
 import api from '@/api/system/sysMenu'
 export default {
-  name: 'roleAuth',
+  name: 'RoleAuth',
 
   data() {
     return {
@@ -30,8 +30,8 @@ export default {
       defaultProps: {
         children: 'children',
         label: 'name'
-      },
-    };
+      }
+    }
   },
 
   created() {
@@ -56,7 +56,7 @@ export default {
     /*
     得到所有选中的id列表
     */
-    getCheckedIds (auths, initArr = []) {
+    getCheckedIds(auths, initArr = []) {
       return auths.reduce((pre, item) => {
         if (item.select && item.children.length === 0) {
           pre.push(item.id)
@@ -71,14 +71,13 @@ export default {
     保存权限列表
     */
     save() {
-      debugger
-      //获取到当前子节点
-      //const checkedNodes = this.$refs.tree.getCheckedNodes()
-      //获取到当前子节点及父节点
-      const allCheckedNodes = this.$refs.tree.getCheckedNodes(false, true);
-      let idList = allCheckedNodes.map(node => node.id);
+      // 获取到当前子节点
+      // const checkedNodes = this.$refs.tree.getCheckedNodes()
+      // 获取到当前子节点及父节点
+      const allCheckedNodes = this.$refs.tree.getCheckedNodes(false, true)
+      const idList = allCheckedNodes.map(node => node.id)
       console.log(idList)
-      let assginMenuVo = {
+      const assginMenuVo = {
         roleId: this.$route.query.id,
         menuIdList: idList
       }
@@ -86,9 +85,9 @@ export default {
       api.doAssign(assginMenuVo).then(result => {
         this.loading = false
         this.$message.success(result.$message || '分配权限成功')
-        this.$router.push('/system/sysRole');
+        this.$router.push('/system/sysRole')
       })
     }
   }
-};
+}
 </script>

src/views/system/sysRole/list.vue

@@ -220,7 +220,6 @@ export default {
     },
     // 根据id删除数据
     removeDataById(id) {
-      // debugger
       this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',

src/views/system/sysUser/list.vue

@@ -6,7 +6,7 @@
         <el-row>
           <el-col :span="8">
             <el-form-item label="关 键 字">
-              <el-input v-model="searchObj.keyword" placeholder="用户名/姓名/手机号码" style="width: 95%"/>
+              <el-input v-model="searchObj.keyword" placeholder="用户名/姓名/手机号码" style="width: 95%" />
             </el-form-item>
           </el-col>
           <el-col :span="8">
@@ -63,11 +63,11 @@
         </template>
       </el-table-column>
 
-      <el-table-column label="用户名" prop="username" width="100"/>
-      <el-table-column label="姓名" prop="name" width="70"/>
-      <el-table-column label="手机" prop="phone" width="120"/>
-      <el-table-column label="岗位" prop="postName" width="100"/>
-      <el-table-column label="部门" prop="deptName" width="100"/>
+      <el-table-column label="用户名" prop="username" width="100" />
+      <el-table-column label="姓名" prop="name" width="70" />
+      <el-table-column label="手机" prop="phone" width="120" />
+      <el-table-column label="岗位" prop="postName" width="100" />
+      <el-table-column label="部门" prop="deptName" width="100" />
       <el-table-column label="所属角色" width="130">
         <template slot-scope="scope">
           <span v-for="item in scope.row.roleList" :key="item.id" style="margin-right: 10px;">{{ item.roleName }}</span>
@@ -81,7 +81,7 @@
           />
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" prop="createTime" width="160"/>
+      <el-table-column label="创建时间" prop="createTime" width="160" />
 
       <el-table-column align="center" fixed="right" label="操作" width="180">
         <template slot-scope="scope">
@@ -128,16 +128,16 @@
     <el-dialog :visible.sync="dialogVisible" title="添加/修改" width="40%">
       <el-form ref="dataForm" :model="sysUser" label-width="100px" size="small" style="padding-right: 40px;">
         <el-form-item label="用户名" prop="username">
-          <el-input v-model="sysUser.username"/>
+          <el-input v-model="sysUser.username" />
         </el-form-item>
         <el-form-item v-if="!sysUser.id" label="密码" prop="password">
-          <el-input v-model="sysUser.password" type="password"/>
+          <el-input v-model="sysUser.password" type="password" />
         </el-form-item>
         <el-form-item label="姓名" prop="name">
-          <el-input v-model="sysUser.name"/>
+          <el-input v-model="sysUser.name" />
         </el-form-item>
         <el-form-item label="手机" prop="phone">
-          <el-input v-model="sysUser.phone"/>
+          <el-input v-model="sysUser.phone" />
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
@@ -149,13 +149,13 @@
     <el-dialog :visible.sync="dialogRoleVisible" title="分配角色">
       <el-form label-width="80px">
         <el-form-item label="用户名">
-          <el-input :value="sysUser.username" disabled/>
+          <el-input :value="sysUser.username" disabled />
         </el-form-item>
 
         <el-form-item label="角色列表">
           <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选
           </el-checkbox>
-          <div style="margin: 15px 0;"/>
+          <div style="margin: 15px 0;" />
           <el-checkbox-group v-model="userRoleIds" @change="handleCheckedChange">
             <el-checkbox v-for="role in allRoles" :key="role.id" :label="role.id">{{ role.roleName }}</el-checkbox>
           </el-checkbox-group>
@@ -230,11 +230,10 @@ export default {
 
     // 加载banner列表数据
     fetchData(page = 1) {
-      debugger
       this.page = page
       console.log('翻页。。。' + this.page)
 
-      if (this.createTimes && this.createTimes.length == 2) {
+      if (this.createTimes && this.createTimes.length === 2) {
         this.searchObj.createTimeBegin = this.createTimes[0]
         this.searchObj.createTimeEnd = this.createTimes[1]
       }
@@ -261,7 +260,6 @@ export default {
 
     // 根据id删除数据
     removeDataById(id) {
-      // debugger
       this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -333,7 +331,7 @@ export default {
 
     getRoles() {
       roleApi.getRoles(this.sysUser.id).then(response => {
-        const {allRolesList, assginRoleList} = response.data
+        const { allRolesList, assginRoleList } = response.data
         this.allRoles = allRolesList
         this.userRoleIds = assginRoleList.map(item => item.id)
         this.checkAll = allRolesList.length === assginRoleList.length
@@ -355,7 +353,7 @@ export default {
     角色列表选中项发生改变的监听
     */
     handleCheckedChange(value) {
-      const {userRoleIds, allRoles} = this
+      const { userRoleIds, allRoles } = this
       this.checkAll = userRoleIds.length === allRoles.length && allRoles.length > 0
       this.isIndeterminate = userRoleIds.length > 0 && userRoleIds.length < allRoles.length
     },

src/views/wechat/menu/list.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="app-container">
+
+    <!-- 工具条 -->
+    <div class="tools-div">
+      <el-button class="btn-add" size="mini" @click="add">添 加</el-button>
+      <el-button class="btn-add" size="mini" @click="syncMenu">同步菜单</el-button>
+      <el-button class="btn-add" size="mini" @click="removeMenu">删除菜单</el-button>
+    </div>
+
+    <el-table
+      :data="list"
+      style="width: 100%;margin-bottom: 20px;"
+      row-key="id"
+      border
+      default-expand-all
+      :tree-props="{children: 'children'}"
+    >
+
+      <el-table-column label="名称" prop="name" width="350" />
+      <el-table-column label="类型" width="100">
+        <template slot-scope="scope">
+          {{ scope.row.type == 'view' ? '链接' : scope.row.type == 'click' ? '事件' : '' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="菜单URL" prop="url" />
+      <el-table-column label="菜单KEY" prop="meunKey" width="130" />
+      <el-table-column label="排序号" prop="sort" width="70" />
+      <el-table-column label="操作" width="170" align="center">
+        <template slot-scope="scope">
+          <el-button v-if="scope.row.parentId > 0" type="text" size="mini" @click="edit(scope.row.id)">修改</el-button>
+          <el-button v-if="scope.row.parentId > 0" type="text" size="mini" @click="removeDataById(scope.row.id)">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
+      <el-form ref="flashPromotionForm" label-width="150px" size="small" style="padding-right: 40px;">
+
+        <el-form-item label="选择一级菜单">
+          <el-select
+            v-model="menu.parentId"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in list"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="菜单名称">
+          <el-input v-model="menu.name" />
+        </el-form-item>
+        <el-form-item label="菜单类型">
+          <el-radio-group v-model="menu.type">
+            <el-radio label="view">链接</el-radio>
+            <el-radio label="click">事件</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="menu.type == 'view'" label="链接">
+          <el-input v-model="menu.url" />
+        </el-form-item>
+        <el-form-item v-if="menu.type == 'click'" label="菜单KEY">
+          <el-input v-model="menu.meunKey" />
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input v-model="menu.sort" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" size="small" @click="saveOrUpdate()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import menuApi from '@/api/wechat/menu'
+
+const defaultForm = {
+  id: null,
+  parentId: 1,
+  name: '',
+  nameId: null,
+  sort: 1,
+  type: 'view',
+  meunKey: '',
+  url: ''
+}
+export default {
+
+  // 定义数据
+  data() {
+    return {
+      list: [],
+      dialogVisible: false,
+      menu: defaultForm,
+      saveBtnDisabled: false
+    }
+  },
+
+  // 当页面加载时获取数据
+  created() {
+    this.fetchData()
+  },
+
+  methods: {
+    removeMenu() {
+      menuApi.removeMenu().then(response => {
+        this.$message.success('菜单已删除')
+      })
+    },
+    syncMenu() {
+      this.$confirm('你确定上传菜单吗, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        return menuApi.syncMenu()
+      }).then((response) => {
+        this.$message.success(response.message)
+      }).catch(error => {
+        console.log('error', error)
+        if (error === 'cancel') {
+          this.$message.info('取消上传')
+        }
+      })
+    },
+    // 调用api层获取数据库中的数据
+    fetchData() {
+      console.log('加载列表')
+      menuApi.findMenuInfo().then(response => {
+        this.list = response.data
+        console.log(this.list)
+      })
+    },
+
+    // 根据id删除数据
+    removeDataById(id) {
+      // debugger
+      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => { // promise
+        // 点击确定，远程调用ajax
+        return menuApi.removeById(id)
+      }).then((response) => {
+        this.fetchData(this.page)
+        this.$message.success(response.message || '删除成功')
+      }).catch(() => {
+        this.$message.info('取消删除')
+      })
+    },
+
+    // -------------
+    add() {
+      this.dialogVisible = true
+      this.menu = Object.assign({}, defaultForm)
+    },
+
+    edit(id) {
+      this.dialogVisible = true
+      this.fetchDataById(id)
+    },
+
+    fetchDataById(id) {
+      menuApi.getById(id).then(response => {
+        this.menu = response.data
+      })
+    },
+
+    saveOrUpdate() {
+      this.saveBtnDisabled = true // 防止表单重复提交
+
+      if (!this.menu.id) {
+        this.saveData()
+      } else {
+        this.updateData()
+      }
+    },
+
+    // 新增
+    saveData() {
+      menuApi.save(this.menu).then(response => {
+        this.$message.success(response.message || '操作成功')
+        this.dialogVisible = false
+        this.fetchData(this.page)
+      })
+    },
+
+    // 根据id更新记录
+    updateData() {
+      menuApi.updateById(this.menu).then(response => {
+        this.$message.success(response.message || '操作成功')
+        this.dialogVisible = false
+        this.fetchData(this.page)
+      })
+    }
+  }
+}
+</script>