Initial commit

.browserslistrc

+> 1%
+last 2 versions
+not ie <= 8

.gitignore

+.DS_Store
+node_modules
+/dist
+example.html
+favicon.ico
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

.prettierrc

+{
+    "tabWidth": 2,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "semi": false
+  }
\ No newline at end of file

LICENSE

+MIT License
+
+Copyright (c) 2016 vue-manage-system
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file

README.md

+# vue-manage-system #
+<a href="https://github.com/vuejs/vue">
+    <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
+  </a>
+  <a href="https://github.com/ElemeFE/element">
+    <img src="https://img.shields.io/badge/element--ui-2.8.2-brightgreen.svg" alt="element-ui">
+  </a>
+  <a href="https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE">
+    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
+  </a>
+  <a href="https://github.com/lin-xin/vue-manage-system/releases">
+    <img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release">
+  </a>
+  <a href="http://blog.gdfengshuo.com/example/work/#/donate">
+    <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
+  </a>
+
+基于Vue.js + Element UI 的后台管理系统解d决方案。[线上地址](http://blog.gdfengshuo.com/example/work/)
+
+本项目基于vue-cli3构建，如果是vue-cli2的请下载[旧版本V3.2.0](https://github.com/lin-xin/vue-manage-system/releases/tag/V3.2.0)
+
+> React + Ant Design 的版本正在开发中，仓库地址：[react-manage-system](https://github.com/lin-xin/react-manage-system)
+
+[English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md)
+
+## 项目截图 ##
+### 登录
+![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms3.png)
+
+### 默认皮肤 ###
+![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png)
+
+### 浅绿色皮肤 ###
+![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)
+
+## 赞赏
+请作者喝杯咖啡吧！(微信号：linxin_20)
+
+![微信扫一扫](http://blog.gdfengshuo.com/images/weixin.jpg)
+
+## 前言 ##
+之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。
+
+该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
+（已经升级到 vue-cli@3.2.3，请更新依赖）
+
+## 功能 ##
+- [x] Element UI
+- [x] 登录/注销
+- [x] Dashboard
+- [x] 表格
+- [x] Tab选项卡
+- [x] 表单
+- [x] 图表 :bar_chart:
+- [x] 富文本编辑器
+- [x] markdown编辑器
+- [x] 图片拖拽/裁剪上传
+- [x] 支持切换主题色 :sparkles:
+- [x] 列表拖拽排序
+- [x] 权限测试
+- [x] 404 / 403
+- [x] 三级菜单
+- [x] 自定义图标
+- [x] 可拖拽弹窗
+- [x] 国际化
+
+## 安装步骤 ##
+```
+git clone https://github.com/lin-xin/vue-manage-system.git      // 把模板下载到本地
+cd vue-manage-system    // 进入模板目录
+npm install         // 安装项目依赖，等待安装完成之后，安装失败可用 cnpm 或 yarn
+
+// 开启服务器，浏览器访问 http://localhost:8080
+npm run serve
+
+// 执行构建命令，生成的dist文件夹放在服务器下即可访问
+npm run build
+```
+## 组件使用说明与演示 ##
+
+### vue-schart ###
+vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart)
+<p><a href="https://www.npmjs.com/package/vue-schart"><img src="https://img.shields.io/npm/dm/vue-schart.svg" alt="Downloads"></a></p>
+
+```html
+<template>
+    <div>
+        <schart  class="wrapper"
+				:canvasId="canvasId"
+				:type="type"
+				:data="data"
+				:options="options"
+		></schart>
+    </div>
+</template>
+	
+<script>
+    import Schart from 'vue-schart';        // 导入Schart组件
+    export default {
+        data: function(){
+            return {
+                canvasId: 'myCanvas',       // canvas的id
+                type: 'bar',                // 图表类型
+                data: [
+                    {name: '2014', value: 1342},
+                    {name: '2015', value: 2123},
+                    {name: '2016', value: 1654},
+                    {name: '2017', value: 1795},
+                ],
+                options: {                  // 图表可选参数
+                    title: 'Total sales of stores in recent years'
+                }
+            }
+        },
+        components: {
+            Schart
+        }
+    }
+</script>
+<style>
+.wrapper{
+	width: 7rem;
+	height: 5rem;
+}
+</style>
+```
+
+## 其他注意事项 ##
+### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？ ###
+
+举个栗子，我不想用 Vue-Quill-Editor 这个组件，那我需要分四步走。
+
+第一步：删除该组件的路由，在目录 src/router/index.js 中，找到引入改组件的路由，删除下面这段代码。
+
+```JavaScript
+{
+    // 富文本编辑器组件
+    path: '/editor',
+    component: resolve => require(['../components/page/VueEditor.vue'], resolve) 
+},
+```
+
+第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。
+
+第三步：删除该页面的入口。在目录 src/components/common/Sidebar.vue 中，找到该入口，删除下面这段代码。
+	
+```js
+{
+	index: 'editor',
+	title: '富文本编辑器'
+},
+```
+
+第四步：卸载该组件。执行以下命令：
+	
+	npm un vue-quill-editor -S
+
+完成。
+
+### 二、如何切换主题色呢？ ###
+
+第一步：打开 src/main.js 文件，找到引入 element 样式的地方，换成浅绿色主题。
+
+```javascript
+import 'element-ui/lib/theme-default/index.css';    // 默认主题
+// import '../static/css/theme-green/index.css';       // 浅绿色主题
+```
+
+第二步：打开 src/App.vue 文件，找到 style 标签引入样式的地方，切换成浅绿色主题。
+
+```javascript
+@import "../static/css/main.css";
+@import "../static/css/color-dark.css";     /*深色主题*/
+/*@import "../static/css/theme-green/color-green.css";   !*浅绿色主题*!*/
+```
+
+第三步：打开 src/components/common/Sidebar.vue 文件，找到 el-menu 标签，把 background-color/text-color/active-text-color 属性去掉即可。
+
+## License
+
+[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)
\ No newline at end of file

babel.config.js

+module.exports = {
+  presets: [
+    '@vue/app'
+  ],
+  'ignore':['./src/static/webVideoCtrl.js']
+}

package.json

+{
+  "name": "vue-manage-system",
+  "version": "4.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "npm run serve",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "@antv/g6": "^3.0.7-beta.1",
+    "axios": "^0.18.0",
+    "babel-polyfill": "^6.26.0",
+    "dg-table": "^0.2.0",
+    "echarts": "^4.3.0",
+    "element-theme-chalk": "^2.11.1",
+    "element-ui": "^2.13.0",
+    "file-saver": "^2.0.2",
+    "font-awesome": "^4.7.0",
+    "ginkgo-map": "^1.0.2",
+    "js-md5": "^0.7.3",
+    "jszip": "^3.2.2",
+    "less-loader": "^5.0.0",
+    "mavon-editor": "^2.6.17",
+    "quill": "^1.3.7",
+    "svg-progress-bar": "^0.1.17",
+    "vcolorpicker": "^0.1.8",
+    "vue": "^2.6.10",
+    "vue-amap": "^0.5.10",
+    "vue-circleprogressbar": "^2.0.0",
+    "vue-cropperjs": "^3.0.0",
+    "vue-i18n": "^8.10.0",
+    "vue-quill-editor": "^3.0.6",
+    "vue-router": "^3.0.1",
+    "vue-schart": "^1.0.0",
+    "vuedraggable": "^2.17.0",
+    "xlsx": "^0.15.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.2.0",
+    "@vue/cli-service": "^3.2.0",
+    "less": "^3.10.3",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^8.0.0",
+    "script-loader": "^0.7.2",
+    "vue-template-compiler": "^2.5.21",
+    "vuex": "^3.1.1",
+    "webpack-cli": "^3.3.6"
+  }
+}

postcss.config.js

+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

public/config.js

+window.urlConfig = {
+    url: "http://192.168.6.131:10122/",
+    url2: "http://192.168.6.131:10123/",
+
+  }

public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css">
+    <title>监测报表输出系统</title>
+    <script>document.write("<script src='./config.js?ver="+ new Date().getTime() + "'><\/script>"); </script>
+
+  </head>
+  <!-- <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> -->
+  <body>
+    <noscript>
+      <strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

+<template>
+    <div id="app">
+        <router-view></router-view>
+    </div>
+</template>
+<style>
+    @import "./assets/css/main.css";
+    @import "./assets/css/color-dark.css";     /*深色主题*/
+    img{
+        width:24px;
+        height: 36px;
+    }
+    /*@import "./assets/css/theme-green/color-green.css";   浅绿色主题*/
+    /* ---------------基础建模 BasedOnModeling------------- */
+    /* Material_classification_maintenance  物料分类维护 */
+    /* material_maintenance  物料维护
+        {Corresponding_material_classification   对应物料分类}
+     */
+    /* factory_maintenance 工厂维护 */
+    /* Maintenance_workshop  车间维护 */
+    /* Production_line_maintenance 生产线维护 */
+    /* Section_maintenance 工段维护 */
+    /* Vehicle_classification 载具分类 */
+    /* Vehicle_maintenance 载具维护 */
+    /* factory_model 工厂建模 */
+
+    /* ----------------工艺建模 ProcessModeling--------------- */
+
+    /* Station_maintenance  工位维护 */
+    /* Standard_procedure_maintenance  标准工序维护 */
+    /* Product_process  产品工艺流程 */
+
+
+    /* ----------------车间维护 Workshop_task--------------------- */
+
+    /* production_order   生产订单
+        {
+            scdd_maintain  维护
+            scdd_affirm  确认
+            scdd_close  关闭
+            scdd_transmit 下达
+        }
+    
+     */
+</style>
\ No newline at end of file

src/api/api.js

+import Vue from 'vue'
+import {axios} from './axios';
+// import store from "../store/state";
+// const base = store.api1
+const urlConfig = require("urlConfig");
+let base=urlConfig.url
+let base2=urlConfig.url2 // 系统管理
+export const Login = params => { return axios.get(`${base}api/Login/Login`, { params: params }).then(res => res.data); };
+export const GetGuid = params => { return axios.get(`${base}api/GetGuid/GetGuid`, { params: params }).then(res => res.data); };
+export const GetImportTemplatePath = params => { return axios.get(`${base}api/ImportTemplate/GetImportTemplatePath`, { params: params }).then(res => res.data); };
+export const GetVerCode = params => { return axios.get(`${base}api/System/GetVerCode`, params).then(res => res.data);};
+
+// 样本类型
+export const GetSampleType = params => { return axios.post(`${base}api/SampleType/GetSampleType`,params).then(res => res.data)};
+export const SaveSampleType = params => { return axios.post(`${base}api/SampleType/SaveSampleType`,params).then(res => res.data)};
+export const DelSampleType = params => { return axios.post(`${base}api/SampleType/DelSampleType`,params).then(res => res.data)};
+export const ImportSampleType = params => { return axios.post(`${base}api/SampleType/ImportSampleType`,params).then(res => res.data)};
+// 肿瘤类型
+export const GetTumorsType = params => { return axios.post(`${base}api/TumorsType/GetTumorsType`,params).then(res => res.data)};
+export const SaveTumorsType = params => { return axios.post(`${base}api/TumorsType/SaveTumorsType`,params).then(res => res.data)};
+export const DelTumorsType = params => { return axios.post(`${base}api/TumorsType/DelTumorsType`,params).then(res => res.data)};
+export const ImportTumorsType = params => { return axios.post(`${base}api/TumorsType/ImportTumorsType`,params).then(res => res.data)};
+// 把药库
+export const GetTargetedMedicine = params => { return axios.post(`${base}api/TargetedMedicine/GetTargetedMedicine`,params).then(res => res.data)};
+export const SaveTargetedMedicine = params => { return axios.post(`${base}api/TargetedMedicine/SaveTargetedMedicine`,params).then(res => res.data)};
+export const DelTargetedMedicine = params => { return axios.post(`${base}api/TargetedMedicine/DelTargetedMedicine`,params).then(res => res.data)};
+export const ImportTargetedMedicine = params => { return axios.post(`${base}api/TargetedMedicine/ImportTargetedMedicine`,params).then(res => res.data)};
+// PMID
+export const GetPMID = params => { return axios.post(`${base}api/PMID/GetPMID`,params).then(res => res.data)};
+export const SavePMID = params => { return axios.post(`${base}api/PMID/SavePMID`,params).then(res => res.data)};
+export const DelPMID = params => { return axios.post(`${base}api/PMID/DelPMID`,params).then(res => res.data)};
+export const ImportPMID = params => { return axios.post(`${base}api/PMID/ImportPMID`,params).then(res => res.data)};
+// 基因库
+export const GetGene = params => { return axios.post(`${base}api/Gene/GetGene`,params).then(res => res.data)};
+export const SaveGene = params => { return axios.post(`${base}api/Gene/SaveGene`,params).then(res => res.data)};
+export const DelGene = params => { return axios.post(`${base}api/Gene/DelGene`,params).then(res => res.data)};
+export const ImportGene = params => { return axios.post(`${base}api/Gene/ImportGene`,params).then(res => res.data)};
+// 样本质控情况
+export const GetSampleControl = params => { return axios.post(`${base}api/SampleControl/GetSampleControl`,params).then(res => res.data)};
+export const SaveSampleControl = params => { return axios.post(`${base}api/SampleControl/SaveSampleControl`,params).then(res => res.data)};
+export const DelSampleControl = params => { return axios.post(`${base}api/SampleControl/DelSampleControl`,params).then(res => res.data)};
+export const ImportSampleControl = params => { return axios.post(`${base}api/SampleControl/ImportSampleControl`,params).then(res => res.data)};
+// 受检者基本信息
+export const GetClientInfo = params => { return axios.post(`${base}api/ClientInfo/GetClientInfo`,params).then(res => res.data)};
+export const SaveClientInfo = params => { return axios.post(`${base}api/ClientInfo/SaveClientInfo`,params).then(res => res.data)};
+export const DelClientInfo = params => { return axios.post(`${base}api/ClientInfo/DelClientInfo`,params).then(res => res.data)};
+export const ImportClientInfo = params => { return axios.post(`${base}api/ClientInfo/ImportClientInfo`,params).then(res => res.data)};
+export const GetClientInfoDetail = params => { return axios.get(`${base}api/ClientInfo/GetClientInfoDetail`, { params: params }).then(res => res.data); };
+// 基因检测结果
+export const GetGeneResult = params => { return axios.post(`${base}api/GeneDetectionResult/GetGene`,params).then(res => res.data)};
+export const SaveGeneResult = params => { return axios.post(`${base}api/GeneDetectionResult/SaveGene`,params).then(res => res.data)};
+export const DelGeneResult = params => { return axios.post(`${base}api/GeneDetectionResult/DelGene`,params).then(res => res.data)};
+export const ImportGeneResult = params => { return axios.post(`${base}api/GeneDetectionResult/ImportGene`,params).then(res => res.data)};
+// 遗传风险
+export const GetGeneticRisks = params => { return axios.post(`${base}api/GeneticRisks/GetGeneticRisks`,params).then(res => res.data)};
+export const SaveGeneticRisks = params => { return axios.post(`${base}api/GeneticRisks/SaveGeneticRisks`,params).then(res => res.data)};
+export const DelGeneticRisks = params => { return axios.post(`${base}api/GeneticRisks/DelGeneticRisks`,params).then(res => res.data)};
+export const ImportGeneticRisks = params => { return axios.post(`${base}api/GeneticRisks/ImportGeneticRisks`,params).then(res => res.data)};
+// tmb
+export const GetTMBGrade = params => { return axios.post(`${base}api/TMBGrade/GetTMBGrade`,params).then(res => res.data)};
+export const SaveTMBGrade = params => { return axios.post(`${base}api/TMBGrade/SaveTMBGrade`,params).then(res => res.data)};
+export const DelTMBGrade = params => { return axios.post(`${base}api/TMBGrade/DelTMBGrade`,params).then(res => res.data)};
+// MIS
+export const GetMISReport = params => { return axios.post(`${base}api/MISReport/GetMISReport`,params).then(res => res.data)};
+export const SaveMISReport = params => { return axios.post(`${base}api/MISReport/SaveMISReport`,params).then(res => res.data)};
+export const DelMISReport = params => { return axios.post(`${base}api/MISReport/DelMISReport`,params).then(res => res.data)};
+// 知情同意书
+export const GetInformedConsentTxt = params => { return axios.get(`${base}api/InformedConsent/GetInformedConsentTxt`, { params: params }).then(res => res.data); };
+export const SaveInformedConsentTxt = params => { return axios.post(`${base}api/InformedConsent/SaveInformedConsentTxt`,params).then(res => res.data)};
+// 靶药参考文献
+export const GetTargetedMedicineTxt = params => { return axios.get(`${base}api/TargetedMedicineReferences/GetTargetedMedicineReferencesTxt`, { params: params }).then(res => res.data); };
+export const SaveTargetedMedicineTxt = params => { return axios.post(`${base}api/TargetedMedicineReferences/SaveTargetedMedicineReferencesTxt`,params).then(res => res.data)};
+// 化药参考文献
+export const GetChemicalDrugTxt = params => { return axios.get(`${base}api/ChemicalDrugReferences/GetChemicalDrugReferencesTxt`, { params: params }).then(res => res.data); };
+export const SaveChemicalDrugTxt = params => { return axios.post(`${base}api/ChemicalDrugReferences/SaveChemicalDrugReferencesTxt`,params).then(res => res.data)};
+// 相关基因列表
+export const GetGeneCorrelation = params => { return axios.post(`${base}api/GeneCorrelation/GetGeneCorrelation`,params).then(res => res.data)};
+export const SaveGeneCorrelation = params => { return axios.post(`${base}api/GeneCorrelation/SaveGeneCorrelation`,params).then(res => res.data)};
+export const DelGeneCorrelation = params => { return axios.post(`${base}api/GeneCorrelation/DelGeneCorrelation`,params).then(res => res.data)};
+export const ImportGeneCorrelation = params => { return axios.post(`${base}api/GeneCorrelation/ImportGeneCorrelation`,params).then(res => res.data)};
+// 代码表
+export const GetAllSonCodeTable = params => { return axios.get(`${base}api/CodeTable/GetAllSonCodeTable`, { params: params }).then(res => res.data); };
+export const GetAllCodeTable = params => { return axios.post(`${base}api/CodeTable/GetAllCodeTable`,params).then(res => res.data)};
+export const DelCodeTable = params => { return axios.post(`${base}api/CodeTable/DelCodeTable`,params).then(res => res.data)};
+export const SaveORUpdateCodeTable = params => { return axios.post(`${base}api/CodeTable/SaveORUpdateCodeTable`,params).then(res => res.data)};
+export const GetSonCodeTable = params => { return axios.post(`${base}api/CodeTable/GetSonCodeTable`,params).then(res => res.data)};
+export const SaveORUpdateSonCodeTable = params => { return axios.post(`${base}api/CodeTable/SaveORUpdateSonCodeTable`,params).then(res => res.data)};
+export const DelSonCodeTable = params => { return axios.post(`${base}api/CodeTable/DelSonCodeTable`,params).then(res => res.data)};
+
+
+
+export const GetMenu = params => { return axios.get(`${base2}api/MenuPermission/GetMenu`, { params: params }).then(res => res.data); };
+
+// 权限管理
+//菜单授权
+export const getDutyList = params => { return axios.post(`${base2}api/System/Resp_GetAllData`, params); };
+export const getMenuTree = params => { return axios.get(`${base2}api/System/Resp_getMenuTree?`, { params: params }); };
+export const RespDel = params => { return axios.post(`${base2}api/System/Resp_Del`,params).then(res => res.data)};
+export const RespSaveData = params => { return axios.post(`${base2}api/System/Resp_SaveData`,params).then(res => res.data)};
+export const RespAddMenuRespMap = params => { return axios.post(`${base2}api/System/Resp_AddMenuRespMap`,params).then(res => res.data)};
+export const RespResetMenuRespMap = params => { return axios.get(`${base2}api/System/Resp_ResetMenuRespMap`, { params: params }); };
+export const RespGetRespPostList = params => { return axios.post(`${base2}api/System/Resp_GetRespPostList`,params).then(res => res.data)};
+export const PostTreeChoose = params => { return axios.get(`${base2}api/Choose/PostTreeChoose?Name=`,); };
+export const AddPost = params => { return axios.post(`${base2}api/System/Resp_AddPost`,params).then(res => res.data)};
+export const DelRespPost = params => { return axios.post(`${base2}api/System/Resp_DelRespPost`,params).then(res => res.data)};
+// 岗位分类模块 获取列表
+export const Resp_GetRespPostClassList  = params => { return axios.post(`${base2}api/System/Resp_GetRespPostClassList `, params).then(res => res.data)};
+// 树形 PostClass_GetTreeData 
+export const PostClass_GetTreeData = params => { return axios.get(`${base2}api/System/PostClass_GetTreeData`, { params: params }); };
+// 添加岗位分类
+export const Resp_AddPostClass   = params => { return axios.post(`${base2}api/System/Resp_AddPostClass`, params).then(res => res.data)};
+// 删除岗位分类
+export const Resp_DelRespPostClass = params => { return axios.post(`${base2}api/System/Resp_DelRespPostClass`, params).then(res => res.data)};
+
+
+//系统管理
+export const getOrgTree = params => { return axios.get(`${base2}api/Common/GetOrgTree`, { params: params });}
+export const getTableData = params => { return axios.post(`${base2}api/System/GetUserInfoTableByDiv`, params)};
+export const GetUserMenuTree = params => { return axios.get(`${base2}api/System/GetUserMenuTree`, { params: params }).then(res => res.data) };
+export const RestUserMenuResp = params => { return axios.get(`${base2}api/System/RestUserMenuResp`, { params: params } )};
+export const AddUserMenu = params => { return axios.post(`${base2}api/System/AddUserMenu`, params).then(res => res.data)};
+
+export const GetAutoGuid = params => { return axios.get(`${base2}api/Common/GetAutoGuid`, { params: params });}
+export const getMenuList = params => { return axios.get(`${base2}api/System/PortalMenu_GetAllData`, { params: params }); };
+export const addPaperType = params => { return axios.post(`${base2}api/System/PortalMenu_SaveData`,  params).then(res => res.data); };
+export const deleteMenu = params => { return axios.get(`${base2}api/System/PortalMenu_Delete`, { params: params}); };
+export const GetButResourceData = params => { return axios.post(`${base2}api/System/GetButResourceData`, params).then(res => res.data)};
+export const SaveBusiPortalMenuBut = params => { return axios.post(`${base2}api/System/SaveBusiPortalMenuBut`, params).then(res => res.data)};
+// 根据菜单获取按钮列表数据
+export const GetButDataByMenu = params => { return axios.post(`${base2}api/System/GetButDataByMenu`, params).then(res => res.data)};
+// 删除按钮
+export const DeleteBut = params => { return axios.post(`${base2}api/System/DeleteBut`, params).then(res => res.data)};
+
+// 系统管理
+export const SaveButResource = params => { return axios.post(`${base2}api/System/SaveButResource`, params).then(res => res.data)};
+export const DeleteButResource = params => { return axios.post(`${base2}api/System/DeleteButResource`, params).then(res => res.data)};
+
+export const GetSystemLoggingList = params => { return axios.post(`${base2}api/SystemLogging/GetSystemLoggingList`, params).then(res => res.data)};
+export const GetAllAuditLogDetailed = params => { return axios.get(`${base2}api/SystemLogging/GetAllAuditLogDetailed`, { params: params }).then(res => res.data) };
+
+ // 岗位管理
+ export const JobManagement = params => { return axios.get(`${base2}api/Common/GetOrgTree`, { params: params }); };
+ export const getPostDataList = params => { return axios.post(`${base2}api/System/GetPostData`,  params).then(res => res.data); };
+ export const SavePostData = params => { return axios.post(`${base2}api/System/SavePost`,  params).then(res => res.data); };
+ export const deletePostData = params => { return axios.post(`${base2}/api/System/Post_Del`,  params).then(res => res.data); };
+// 组织机构页面接口
+export const getTreeList = params => { return axios.get(`${base2}api/System/Organize_GetTreeData`, params)};
+export const Add = params => { return axios.post(`${base2}api/System/Insert_Organize`, params)};
+export const Modify = params => { return axios.post(`${base2}api/System/Update_Organize`, params)};
+export const Delete = params => { return axios.post(`${base2}api/System/Delete_Organize?organizeoid=${params}`, )};
+// 人员管理接口
+export const AddUser = params => { return axios.post(`${base2}api/System/AddUserInfo`, params)};
+export const getPostTable = params => { return axios.post(`${base2}api/System/GetPostTableByDiv`, params)};
+export const delPersion = params => { return axios.post(`${base2}api/System/DeleteUserInfo`, params)};
+export const getPersionInfo = params => { return axios.get(`${base2}api/System/GetUserInfoByUserOID`, { params: params });}
+export const UpdateUser = params => { return axios.post(`${base2}api/System/UpdateUserInfo`, params)};
+export const UpdatePass = params => { return axios.post(`${base2}api/System/UpdatePasswords`, params)};
+ 
\ No newline at end of file

src/api/axios.js

+import axios from 'axios';
+// 创建 axios 实例
+const service = axios.create({
+   
+})
+// request interceptor
+service.interceptors.request.use(config => {
+var token = localStorage.getItem("token")
+// console.log("11111")
+if (token) {
+    config.headers[ 'api_key' ] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
+}
+return config
+},(error) => {
+return Promise.reject(error)
+})
+
+export {service as axios}

src/api/index.js

+import * as api from './api';
+
+export default api;
\ No newline at end of file

src/api/variable.js

+
+// const BASEURL = "http://120.27.199.219:18000/" //黄强
+const BASEURL = "http://192.168.6.131:10223/" //徐建业
+// const BASEURL = "http://106.15.197.131:12000/" //公司
+const root = BASEURL + 'api/'
+
+export default { root }
\ No newline at end of file

src/assets/css/color-dark.css

+.header{
+    background-color: #409eff;
+}
+.login-wrap{
+    background: #324157;
+}
+.plugins-tips{
+    background: #eef1f6;
+}
+.plugins-tips a{
+    color: #20a0ff;
+}
+.el-upload--text em {
+    color: #20a0ff;
+}
+.pure-button{
+    background: #20a0ff;
+}
+.tags-li.active {
+    border: 1px solid #409EFF;
+    background-color: #409EFF;
+}
+.message-title{
+    color: #20a0ff;
+}
+.collapse-btn:hover{
+    /* background: rgb(40,52,70); */
+}
\ No newline at end of file

src/assets/css/icon.css

+
+    [class*=" el-icon-lx"], [class^=el-icon-lx] {
+        font-family: lx-iconfont!important;
+    }
\ No newline at end of file

src/assets/css/iconfont/demo.css

+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/css/iconfont/demo_index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1206595" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe603;</span>
+                <div class="name">delete</div>
+                <div class="code-name">&amp;#xe603;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe694;</span>
+                <div class="name">箭头</div>
+                <div class="code-name">&amp;#xe694;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe635;</span>
+                <div class="name">circle</div>
+                <div class="code-name">&amp;#xe635;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6da;</span>
+                <div class="name">close</div>
+                <div class="code-name">&amp;#xe6da;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61d;</span>
+                <div class="name">曲线</div>
+                <div class="code-name">&amp;#xe61d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62f;</span>
+                <div class="name">箭头</div>
+                <div class="code-name">&amp;#xe62f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe645;</span>
+                <div class="name">指针</div>
+                <div class="code-name">&amp;#xe645;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe713;</span>
+                <div class="name">保存</div>
+                <div class="code-name">&amp;#xe713;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe93f;</span>
+                <div class="name">move</div>
+                <div class="code-name">&amp;#xe93f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe839;</span>
+                <div class="name">square</div>
+                <div class="code-name">&amp;#xe839;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68d;</span>
+                <div class="name">直线_图形对象_jurassic</div>
+                <div class="code-name">&amp;#xe68d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe83a;</span>
+                <div class="name">square</div>
+                <div class="code-name">&amp;#xe83a;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#iconfont') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-delete"></span>
+            <div class="name">
+              delete
+            </div>
+            <div class="code-name">.icon-delete
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jiantouarrow482"></span>
+            <div class="name">
+              箭头
+            </div>
+            <div class="code-name">.icon-jiantouarrow482
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-circle"></span>
+            <div class="name">
+              circle
+            </div>
+            <div class="code-name">.icon-circle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-close"></span>
+            <div class="name">
+              close
+            </div>
+            <div class="code-name">.icon-close
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-quxian"></span>
+            <div class="name">
+              曲线
+            </div>
+            <div class="code-name">.icon-quxian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jiantou-copy-copy"></span>
+            <div class="name">
+              箭头
+            </div>
+            <div class="code-name">.icon-jiantou-copy-copy
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhizhen"></span>
+            <div class="name">
+              指针
+            </div>
+            <div class="code-name">.icon-zhizhen
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gongdanguanli-gongda"></span>
+            <div class="name">
+              保存
+            </div>
+            <div class="code-name">.icon-gongdanguanli-gongda
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-move"></span>
+            <div class="name">
+              move
+            </div>
+            <div class="code-name">.icon-move
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-square"></span>
+            <div class="name">
+              square
+            </div>
+            <div class="code-name">.icon-square
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jurassic_line"></span>
+            <div class="name">
+              直线_图形对象_jurassic
+            </div>
+            <div class="code-name">.icon-jurassic_line
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-square-copy"></span>
+            <div class="name">
+              square
+            </div>
+            <div class="code-name">.icon-square-copy
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-delete"></use>
+                </svg>
+                <div class="name">delete</div>
+                <div class="code-name">#icon-delete</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jiantouarrow482"></use>
+                </svg>
+                <div class="name">箭头</div>
+                <div class="code-name">#icon-jiantouarrow482</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-circle"></use>
+                </svg>
+                <div class="name">circle</div>
+                <div class="code-name">#icon-circle</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-close"></use>
+                </svg>
+                <div class="name">close</div>
+                <div class="code-name">#icon-close</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-quxian"></use>
+                </svg>
+                <div class="name">曲线</div>
+                <div class="code-name">#icon-quxian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jiantou-copy-copy"></use>
+                </svg>
+                <div class="name">箭头</div>
+                <div class="code-name">#icon-jiantou-copy-copy</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhizhen"></use>
+                </svg>
+                <div class="name">指针</div>
+                <div class="code-name">#icon-zhizhen</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gongdanguanli-gongda"></use>
+                </svg>
+                <div class="name">保存</div>
+                <div class="code-name">#icon-gongdanguanli-gongda</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-move"></use>
+                </svg>
+                <div class="name">move</div>
+                <div class="code-name">#icon-move</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-square"></use>
+                </svg>
+                <div class="name">square</div>
+                <div class="code-name">#icon-square</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jurassic_line"></use>
+                </svg>
+                <div class="name">直线_图形对象_jurassic</div>
+                <div class="code-name">#icon-jurassic_line</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-square-copy"></use>
+                </svg>
+                <div class="name">square</div>
+                <div class="code-name">#icon-square-copy</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

src/assets/css/iconfont/iconfont.css

+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1571023645467'); /* IE9 */
+  src: url('iconfont.eot?t=1571023645467#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAeAAAsAAAAADcQAAAcwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEWgqMFIoHATYCJAM0CxwABCAFhG0HgT8b0gtRlFBSL9lXh1jC1c+FEitZKyeXKN6NY65FRPkWmud/T8UD31zv38kk2eUCoyIG3fNsAcGIqrKtMGSBJX/cIdy0i2BWpZ55zSdmgUyM0gtNLSyEitK904kJhJkI8qZz5dsEkKGtAeME/Lqtauu/9mv1DE3QiPrwdr18k11mzsQbYokhQmkQivv03xAPEVKk1IiVbbJHJy8khqi86P0ElHWVCpk2aAQJpFJcCqjax1hMQJoxSRt6g+J0XnFu2hKZDzLF5AR6HeeC3w/fFKQksog/aNGOgYWgz0fs0UTM0eqwLn4NLk/nALuIiMGAlPCw0vVAjFKDYcrWX5U6jva0MMWP8X6X+xn38+4PvD/n/uL7Pz8IfdjtUe/WBqTrOjvfKGgv5Gj6By+TiwoqEqmisqoSIUdyFUvuZ8wfMWUQLBQHgwwoAwY5UB4k3dBAGBSA5sCgArQYBgnQz5gi5VPoFEU+dzUoB6gbpqjypXeLEqh553QEtAPCS5ImwPE2szIVJILAeSY/6a5Slccoze2H6iND1QSq1RJ6LS4VrpUjB072VW4+Tvnkbi6HW6HAV5xQaJpPxYgUzZ4mgXcKyKRlnmY3QLkUqW6s6foTF7uKV3k6qba4o4AyZNXa5PFuX+zyNUleIgW5pSduiyyPMlDLlgHSsVhOOpciyyKpcYI/oRvh9yci1/favtbrJX0+QyBA+f1VUjSGZDrf660kjaRBqKgbGKnalULHzS6wwtvDdVl+sbHNTbw/ksvX65fvOHIsZh0V+IU64DP0abwQyAgEzKpmz/YKBadLD+ilhwmEQ/nmIylbezB3vzfXsGTNctfm/VuFCONhb6IrcVot0pRsFOTqzcf14hUnOui2nUJItbO3uOz4iSUARW18Z7kzAms6KVc7j+tRRya4FJEsa2oINywBXSMKlBvbDXB3UG3zxCArhaOqlSIyXK26AUsZxxiUmGG8kRxLoUpqHBkbVGgJiUZMRdYqnd7b3nkcvju+1o7AvcDc39x/1z91vXeA8uK22KbAYNUFbSbrgLaWFvxOb2Khy+vwJUG3rzmQYvEEmvyFx5296JNNvS2nmnvCE44eXc/2XMnEVd6uul0Zx6xS58TlqEcPVFnitfEW1cBRmmz9IHWOBtjU7eL9IV6Tc0SD4oqfPONrpJJoS1QivWrA6aDj/yE+9dwdMSA3/Ivu6UA8G3Rqwp7eiOzbFsT/O35cxoR280WiF3EAdiVDe6L4yAkZgqtj3zAQ8Y/u2QCsH5JYhT07EdkXJHzvcwL/8iV9Ivq+BJ8wBoPJdsEvlXfzBfzvt5gAwiO1gMGBC3gSAN96wNfcQdPXMn0yj7dkWm+GqyOrknNAws5xv8Rz7dcW3Tfj8xWr+yeubXxjNUc4OP5++KCYyuoYSrlt+I0YOnG9LciKM8k2r/uP1e8Cew6VRlyPUDukXhe9WDelJel5km94MSb7GKDN1Jiv2kxUPGm61EisGfoH+ujw3G1/ftcvr/LocGQdGJeERUUhP77U6tPmt5HjpR7z8UCRmEUxJIpekQrSbOlK6RLUGiIVJN0R5EIkok/UI+ILKDK+5rphEo80W0H/8rNFHpGz6eAga4t+gr7Fip2eSyZInodFkhWSPIULEAe/T73EG6toWizZQVddTDm/o+HP/P2lKpNUjJ6LlyrVkp1A2tIUIWUkcYwYGRBaOBbPmK0jG8WDB88QZpBNLETHgon3HJMcYNySyLS0ZyMSjFJ4Fvp/TxhhxMq/F7b5rtW+w56aStGU5qKXBY1/ABql8XTyFOIs9BKNM05hfQAgdkHXAKQrMRYAYiW5DzTex36YrAshxvQFoHFa6xgAGj4eLAUHPQ/rW4ONuhSPhz/z/ez/a/LA6Zoe76SVf370zVVlXEB2E0unJ1BOUUJn5qM2ZKBBFeRtjos1Z0VqCxni5yoGpkZwgqGarcSJBGWxio/Z19Lvy8htbJknFjMMg0RBF4iKeqvTtsGQqRgNuaKJUDbI4IsrWuFgQlrCQN8YEDS3CxJ1zyBq7oY6bfsNMm09g1zzgEHZihB6zYq+gZH356CJh4VEQTXBmNlyWlp5eVg9DlrspSYuzQX9RsjZmCiRlZ6Zzw6G5ZCb4gRbhSWb52mC5tgyYpDxMFhayhJWji2GZj69iOet3TIy6KoT081sGZCbigOZ8N74QoQC1foMM1Y5en2evPDz40AWdqVMuIYZLX0jiGPDbJ6QJV1mB/VgubzTjFtptKlgkY2nBI1As0pWGcIgckClIsUiWKv3KgaZ8dIVDUhYdZNBK9Fd5fTlcdk7l72+Wflj1kISYkhDFvJQCMVQCuVQCdVQC3X5NlgKeagpZkzlPGs3cRxbmdslW2xmOHMpFKlC1gbFM+1VdVjXnEozs9Zq7ZfUFDGyHpaHWdhyS6FJqezuUiYt04CXsRVQbJs53blQVWznTDYbY55eypRDRQnd3wgAAAAA') format('woff2'),
+  url('iconfont.woff?t=1571023645467') format('woff'),
+  url('iconfont.ttf?t=1571023645467') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1571023645467#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-delete:before {
+  content: "\e603";
+}
+
+.icon-jiantouarrow482:before {
+  content: "\e694";
+}
+
+.icon-circle:before {
+  content: "\e635";
+}
+
+.icon-close:before {
+  content: "\e6da";
+}
+
+.icon-quxian:before {
+  content: "\e61d";
+}
+
+.icon-jiantou-copy-copy:before {
+  content: "\e62f";
+}
+
+.icon-zhizhen:before {
+  content: "\e645";
+}
+
+.icon-gongdanguanli-gongda:before {
+  content: "\e713";
+}
+
+.icon-move:before {
+  content: "\e93f";
+}
+
+.icon-square:before {
+  content: "\e839";
+}
+
+.icon-jurassic_line:before {
+  content: "\e68d";
+}
+
+.icon-square-copy:before {
+  content: "\e83a";
+}
+

src/assets/css/iconfont/iconfont.js

+!function(c){var t,o='<svg><symbol id="icon-delete" viewBox="0 0 1024 1024"><path d="M924.43026 238.663658 770.369466 238.663658l0-104.254435c0-38.566364-31.397081-69.990051-69.963445-69.990051L323.606259 64.419172c-38.566364 0-69.949118 31.423687-69.949118 69.990051l0 104.3363-154.334018 0.054235c-9.286504 0-18.013259 3.619434-24.595164 10.228969-6.568602 6.5553-10.188037 15.308661-10.160407 24.581861 0 19.173688 15.59621 34.81083 34.783201 34.81083l78.594009-0.013303L177.944761 889.430118c0 38.566364 31.382754 69.990051 69.963445 69.990051l528.225543 0c38.566364 0 69.963445-31.423687 69.963445-69.990051L846.097194 330.860477l-0.163729 0-0.013303-22.560832 78.539774-0.013303c19.188015 0 34.783201-15.637142 34.783201-34.851763C959.213461 254.259868 943.603949 238.663658 924.43026 238.663658zM412.347372 822.007543c-19.188015 0-34.783201-15.637142-34.783201-34.81083L377.399419 414.779771c0-19.173688 15.59621-34.824133 34.797527-34.824133 19.188015 0 34.783201 15.650445 34.783201 34.824133l0.163729 372.361683C447.143876 806.316166 431.521061 821.966611 412.347372 822.007543zM611.842962 822.007543c-19.201318 0-34.81083-15.637142-34.81083-34.81083L576.868403 414.779771c0-19.173688 15.59621-34.824133 34.783201-34.824133 19.201318 0 34.797527 15.650445 34.797527 34.824133l0.163729 372.361683C646.627187 806.316166 631.030977 821.966611 611.842962 822.007543zM323.401598 177.427992c0-23.844058 19.405979-43.210128 43.223431-43.210128l290.763247 0c23.844058 0 43.25106 19.365046 43.25106 43.210128l0 61.277622-377.237737 0.040932L323.401598 177.427992z"  ></path></symbol><symbol id="icon-jiantouarrow482" viewBox="0 0 1024 1024"><path d="M183.75401767 337.40323006l-0.15205624 0.00724077c5.16267146-30.05645055-6.76288239-63.83465864-31.07015883-88.11297198l63.68984318-63.71880627c34.86432411 34.83536102 51.77877086 83.59472936 46.23233841 131.96309593-3.54073821 29.41926248 8.15311089 60.80801534 31.49736446 84.15226891 40.04871789 40.04871789 95.84611802 40.06319944 120.87747179 15.03184567l0.55029879 0.55029878c65.2900541-54.03789218 158.40640053-51.27191672 218.58446858 8.90615133 33.94474588 33.94474588 50.6781733 79.94537954 46.59437708 127.18418546L680.63037263 553.35205711c-1.64365557 20.03522011 3.83760992 40.91036993 14.85082632 59.22228596L778.54011108 695.6332552l48.88246148-88.31571364c1.64365557-2.94699479 4.80063279-5.03233754 7.72590526-5.09026373 2.92527247-0.07240773 4.90924439 1.94052728 4.80787357 4.86579975L834.36647429 808.71965477c-0.04344464 2.02741656-1.09335679 4.20688937-2.79493854 5.90847113-1.70158176 1.70158176-3.88829534 2.75873468-5.92295268 2.80942009l-201.61209564 5.57539555c-1.46263623 0.04344464-2.70080849-0.44168718-3.56246054-1.30333922-0.84717049-0.84717049-1.31782077-2.04189811-1.31057999-3.49729357 0.06516696-2.9180317 2.14326894-6.06776814 5.0975045-7.73314603l88.30847287-48.87522072-58.17961459-58.17961458c-36.00112554-32.75725904-55.39191681-80.16984352-52.46664434-128.49476546l-0.23894552 0.03620387c3.90277688-29.66544878-7.84899841-61.4741665-31.43943827-85.06460637-40.04871789-40.04871789-95.85335879-40.05595867-120.88471257-15.02460488l-0.56478033-0.56478033c-65.26109101 54.03789218-158.38467821 51.2791575-218.56274627-8.89891056C196.11401793 431.2508946 179.40231284 384.92442614 183.75401767 337.40323006z"  ></path></symbol><symbol id="icon-circle" viewBox="0 0 1024 1024"><path d="M511.346619 64.089667c-246.965741 0-447.163319 200.197578-447.163319 447.163319 0 246.966765 200.197578 447.163319 447.163319 447.163319 246.944252 0 447.164343-200.197578 447.164343-447.163319C958.511985 264.287245 758.290871 64.089667 511.346619 64.089667zM511.346619 913.700895c-222.271316 0-402.446885-180.175569-402.446885-402.446885S289.075303 108.806101 511.346619 108.806101c222.271316 0 402.447908 180.175569 402.447908 402.446885S733.617935 913.700895 511.346619 913.700895z"  ></path></symbol><symbol id="icon-close" viewBox="0 0 1024 1024"><path d="M692.992 227.52 512 408.576 331.008 227.52 227.52 331.008 408.576 512 227.52 692.992 331.008 796.48 512 615.424 692.992 796.48 796.48 692.992 615.424 512 796.48 331.008Z"  ></path></symbol><symbol id="icon-quxian" viewBox="0 0 1280 1024"><path d="M1107.52366585 523.92991585c0-26.3671875-26.3671875-52.73437499-52.734375-52.734375-31.640625 0-52.73437499 26.3671875-52.734375 52.734375 0 36.91406251-10.54687499 142.3828125-58.00781251 195.1171875-26.3671875 26.3671875-58.00781251 36.91406251-100.19531249 36.9140625-73.82812499 0-126.5625-200.39062499-168.75000001-342.7734375-52.73437499-205.6640625-105.46875001-395.50781249-242.57812499-395.5078125C237.40647834 17.67991585 147.75804084 318.26585337 89.75022834 513.38304084c-10.54687499 42.1875-21.09375003 79.1015625-31.64062499 100.19531251-10.54687499 26.3671875 5.2734375 58.00781251 31.64062499 68.5546875 26.3671875 10.54687499 58.00781251-5.2734375 68.5546875-31.640625 10.54687499-26.3671875 21.09375003-63.28125002 36.91406251-110.7421875C232.13304085 397.36741585 316.50804084 123.14866585 432.52366585 123.14866585 490.53147834 123.14866585 543.26585334 312.99241585 580.17991585 439.55491584c58.00781251 205.6640625 116.015625 421.875 268.94531249 421.87500002 68.55468748 0 126.5625-21.09375003 168.75-68.55468751 94.92187501-100.1953125 89.64843749-263.671875 89.64843751-268.9453125z"  ></path></symbol><symbol id="icon-jiantou-copy-copy" viewBox="0 0 1000 1000"><path d="M362.57 764.226h364.149c28.44 0 51.491-23.051 51.491-51.491v-364.149c0-28.44-23.051-51.491-51.491-51.491s-51.491 23.051-51.491 51.491v239.829l-349.073-349.073c-20.119-20.119-52.711-20.119-72.831 0s-20.119 52.711 0 72.831l349.073 349.073h-239.829c-14.202-0.001-27.093 5.754-36.415 15.076s-15.094 22.195-15.076 36.415c0 28.44 23.051 51.491 51.491 51.491z"  ></path></symbol><symbol id="icon-zhizhen" viewBox="0 0 1024 1024"><path d="M806.152 553.109q-37.916-0.817-79.102 2.479-35.438 2.479-80.341 8.253t-91.863 18.141l121.131 200.232q8.253 15.662 9.466 32.141t-3.718 31.719-15.24 28.028-25.945 21.015q-14.844 8.253-31.324 9.466t-31.719-3.718-28.028-15.24-21.015-25.945l-101.355-224.938q-41.212 23.888-74.566 51.099t-57.27 51.099q-28.028 27.185-49.438 55.213l-1.661-672.364z"  ></path></symbol><symbol id="icon-gongdanguanli-gongda" viewBox="0 0 1024 1024"><path d="M960.37 364.2v-25.59A60 60 0 0 0 942.59 296L725.88 81.31a60 60 0 0 0-42.36-17.37l-26 0.06H126.88a61.51 61.51 0 0 0-61.51 61.51v772A61.51 61.51 0 0 0 126.88 959h772a61.51 61.51 0 0 0 61.51-61.51V364.2zM811.86 925h-596a1.52 1.52 0 0 1-1.51-1.51V517.81A18.81 18.81 0 0 1 233.18 499h561.38a18.81 18.81 0 0 1 18.81 18.81v405.68a1.52 1.52 0 0 1-1.51 1.51z m114.51-18.81A18.81 18.81 0 0 1 907.56 925h-58.68a1.52 1.52 0 0 1-1.51-1.51v-401A57.49 57.49 0 0 0 789.88 465h-552a57.49 57.49 0 0 0-57.49 57.49v401a1.52 1.52 0 0 1-1.51 1.51h-60.7a18.81 18.81 0 0 1-18.81-18.81V118a20 20 0 0 1 20-20H681.3a25 25 0 0 1 17.64 7.28L919 324.33a25 25 0 0 1 7.36 17.72z m33.34-541.33l-3.57-3.56 3.58 3.55zM535.89 178h-299a56 56 0 0 0-56 56v88a56 56 0 0 0 56 56h299a56 56 0 0 0 56-56v-88a56 56 0 0 0-56-56z m22 148.7a17.29 17.29 0 0 1-17.3 17.3H232.17a17.29 17.29 0 0 1-17.3-17.3v-97.4a17.29 17.29 0 0 1 17.3-17.3h308.4a17.29 17.29 0 0 1 17.3 17.3z"  ></path></symbol><symbol id="icon-move" viewBox="0 0 1024 1024"><path d="M759.568 703.92l199.504-199.488L759.12 304.48l-56.56 56.56L805.504 464H544V200.688l102.912 103.376 56.32-56.576L503.616 48l-200 199.92 57.008 56.576L464 201.568V464H200.608l102.944-102.944-56.576-56.56L47.04 504.432l199.52 199.488 56.56-56.56-103.36-103.36H464v262.416l-103.408-102.928-56.8 56.56L503.616 960 703.04 760.496l-56.128-56.576L544 807.296V544h262.352l-103.36 103.36z" fill="#565D64" ></path></symbol><symbol id="icon-square" viewBox="0 0 1024 1024"><path d="M725.333333 85.333333H298.666667a213.333333 213.333333 0 0 0-213.333334 213.333334v426.666666a213.333333 213.333333 0 0 0 213.333334 213.333334h426.666666a213.333333 213.333333 0 0 0 213.333334-213.333334V298.666667a213.333333 213.333333 0 0 0-213.333334-213.333334z m128 640a128 128 0 0 1-128 128H298.666667a128 128 0 0 1-128-128V298.666667a128 128 0 0 1 128-128h426.666666a128 128 0 0 1 128 128z"  ></path></symbol><symbol id="icon-jurassic_line" viewBox="0 0 1024 1024"><path d="M64 480h896v64H64z" fill="#727272" ></path></symbol><symbol id="icon-square-copy" viewBox="0 0 1024 1024"><path d="M964.54833996 361.15055288L662.84944712 59.45166004a213.333333 213.333333 0 0 0-301.69889424 0l-301.69889284 301.69889284a213.333333 213.333333 0 0 0 0 301.69889424l301.69889284 301.69889284a213.333333 213.333333 0 0 0 301.69889424 0L964.54833996 662.84944712a213.333333 213.333333 0 0 0 0-301.69889424z m-362.03867197 543.05800795a128 128 0 0 1-181.01933598 0L119.79143917 602.50966799a128 128 0 0 1 0-181.01933598L421.49033201 119.79143917a128 128 0 0 1 181.01933598 0l301.69889284 301.69889284a128 128 0 0 1 0 181.01933598z"  ></path></symbol></svg>',e=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(e&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}!function(t){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(t,0);else{var e=function(){document.removeEventListener("DOMContentLoaded",e,!1),t()};document.addEventListener("DOMContentLoaded",e,!1)}else document.attachEvent&&(a=t,l=c.document,i=!1,(n=function(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(n,50)}o()})(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,o())});function o(){i||(i=!0,a())}var a,l,i,n}(function(){var t,e;(t=document.createElement("div")).innerHTML=o,o=null,(e=t.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",function(t,e){e.firstChild?function(t,e){e.parentNode.insertBefore(t,e)}(t,e.firstChild):e.appendChild(t)}(e,document.body))})}(window);
\ No newline at end of file

src/assets/css/iconfont/iconfont.json

+{
+  "id": "1206595",
+  "name": "11",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "256462",
+      "name": "delete",
+      "font_class": "delete",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "608316",
+      "name": "箭头",
+      "font_class": "jiantouarrow482",
+      "unicode": "e694",
+      "unicode_decimal": 59028
+    },
+    {
+      "icon_id": "939435",
+      "name": "circle",
+      "font_class": "circle",
+      "unicode": "e635",
+      "unicode_decimal": 58933
+    },
+    {
+      "icon_id": "1176891",
+      "name": "close",
+      "font_class": "close",
+      "unicode": "e6da",
+      "unicode_decimal": 59098
+    },
+    {
+      "icon_id": "1986972",
+      "name": "曲线",
+      "font_class": "quxian",
+      "unicode": "e61d",
+      "unicode_decimal": 58909
+    },
+    {
+      "icon_id": "2279253",
+      "name": "箭头",
+      "font_class": "jiantou-copy-copy",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "2404404",
+      "name": "指针",
+      "font_class": "zhizhen",
+      "unicode": "e645",
+      "unicode_decimal": 58949
+    },
+    {
+      "icon_id": "7674879",
+      "name": "保存",
+      "font_class": "gongdanguanli-gongda",
+      "unicode": "e713",
+      "unicode_decimal": 59155
+    },
+    {
+      "icon_id": "8827216",
+      "name": "move",
+      "font_class": "move",
+      "unicode": "e93f",
+      "unicode_decimal": 59711
+    },
+    {
+      "icon_id": "8953280",
+      "name": "square",
+      "font_class": "square",
+      "unicode": "e839",
+      "unicode_decimal": 59449
+    },
+    {
+      "icon_id": "10591744",
+      "name": "直线_图形对象_jurassic",
+      "font_class": "jurassic_line",
+      "unicode": "e68d",
+      "unicode_decimal": 59021
+    },
+    {
+      "icon_id": "11123344",
+      "name": "square",
+      "font_class": "square-copy",
+      "unicode": "e83a",
+      "unicode_decimal": 59450
+    }
+  ]
+}

src/assets/css/iconfont/iconfont.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="delete" unicode="&#58883;" d="M924.43026 573.336342 770.369466 573.336342l0 104.254435c0 38.566364-31.397081 69.990051-69.963445 69.990051L323.606259 747.580828c-38.566364 0-69.949118-31.423687-69.949118-69.990051l0-104.3363-154.334018-0.054235c-9.286504 0-18.013259-3.619434-24.595164-10.228969-6.568602-6.5553-10.188037-15.308661-10.160407-24.581861 0-19.173688 15.59621-34.81083 34.783201-34.81083l78.594009 0.013303L177.944761-77.430118c0-38.566364 31.382754-69.990051 69.963445-69.990051l528.225543 0c38.566364 0 69.963445 31.423687 69.963445 69.990051L846.097194 481.139523l-0.163729 0-0.013303 22.560832 78.539774 0.013303c19.188015 0 34.783201 15.637142 34.783201 34.851763C959.213461 557.740132 943.603949 573.336342 924.43026 573.336342zM412.347372-10.007543c-19.188015 0-34.783201 15.637142-34.783201 34.81083L377.399419 397.220229c0 19.173688 15.59621 34.824133 34.797527 34.824133 19.188015 0 34.783201-15.650445 34.783201-34.824133l0.163729-372.361683C447.143876 5.683834 431.521061-9.966611 412.347372-10.007543zM611.842962-10.007543c-19.201318 0-34.81083 15.637142-34.81083 34.81083L576.868403 397.220229c0 19.173688 15.59621 34.824133 34.783201 34.824133 19.201318 0 34.797527-15.650445 34.797527-34.824133l0.163729-372.361683C646.627187 5.683834 631.030977-9.966611 611.842962-10.007543zM323.401598 634.572008c0 23.844058 19.405979 43.210128 43.223431 43.210128l290.763247 0c23.844058 0 43.25106-19.365046 43.25106-43.210128l0-61.277622-377.237737-0.040932L323.401598 634.572008z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="jiantouarrow482" unicode="&#59028;" d="M183.75401767 558.5967699400001l-0.15205624-0.00724077c5.16267146 30.05645055-6.76288239 63.83465864-31.07015883 88.11297198l63.68984318 63.71880627c34.86432411-34.83536102 51.77877086-83.59472936 46.23233841-131.96309593-3.54073821-29.41926248 8.15311089-60.80801534 31.49736446-84.15226891 40.04871789-40.04871789 95.84611802-40.06319944 120.87747179-15.03184567l0.55029879-0.55029878c65.2900541 54.03789218 158.40640053 51.27191672 218.58446858-8.90615133 33.94474588-33.94474588 50.6781733-79.94537954 46.59437708-127.18418546L680.63037263 342.64794288999997c-1.64365557-20.03522011 3.83760992-40.91036993 14.85082632-59.22228596L778.54011108 200.3667448l48.88246148 88.31571364c1.64365557 2.94699479 4.80063279 5.03233754 7.72590526 5.09026373 2.92527247 0.07240773 4.90924439-1.94052728 4.80787357-4.86579975L834.36647429 87.28034522999997c-0.04344464-2.02741656-1.09335679-4.20688937-2.79493854-5.90847113-1.70158176-1.70158176-3.88829534-2.75873468-5.92295268-2.80942009l-201.61209564-5.57539555c-1.46263623-0.04344464-2.70080849 0.44168718-3.56246054 1.30333922-0.84717049 0.84717049-1.31782077 2.04189811-1.31057999 3.49729357 0.06516696 2.9180317 2.14326894 6.06776814 5.0975045 7.73314603l88.30847287 48.87522072-58.17961459 58.17961458c-36.00112554 32.75725904-55.39191681 80.16984352-52.46664434 128.49476546l-0.23894552-0.03620387c3.90277688 29.66544878-7.84899841 61.4741665-31.43943827 85.06460637-40.04871789 40.04871789-95.85335879 40.05595867-120.88471257 15.02460488l-0.56478033 0.56478033c-65.26109101-54.03789218-158.38467821-51.2791575-218.56274627 8.89891056C196.11401793 464.7491054 179.40231284 511.07557386 183.75401767 558.5967699400001z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="circle" unicode="&#58933;" d="M511.346619 831.910333c-246.965741 0-447.163319-200.197578-447.163319-447.163319 0-246.966765 200.197578-447.163319 447.163319-447.163319 246.944252 0 447.164343 200.197578 447.164343 447.163319C958.511985 631.712755 758.290871 831.910333 511.346619 831.910333zM511.346619-17.700895c-222.271316 0-402.446885 180.175569-402.446885 402.446885S289.075303 787.193899 511.346619 787.193899c222.271316 0 402.447908-180.175569 402.447908-402.446885S733.617935-17.700895 511.346619-17.700895z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="close" unicode="&#59098;" d="M692.992 668.48 512 487.424 331.008 668.48 227.52 564.992 408.576 384 227.52 203.008 331.008 99.52 512 280.576 692.992 99.52 796.48 203.008 615.424 384 796.48 564.992Z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="quxian" unicode="&#58909;" d="M1107.52366585 372.07008414999996c0 26.3671875-26.3671875 52.73437499-52.734375 52.734375-31.640625 0-52.73437499-26.3671875-52.734375-52.734375 0-36.91406251-10.54687499-142.3828125-58.00781251-195.1171875-26.3671875-26.3671875-58.00781251-36.91406251-100.19531249-36.9140625-73.82812499 0-126.5625 200.39062499-168.75000001 342.7734375-52.73437499 205.6640625-105.46875001 395.50781249-242.57812499 395.5078125C237.40647834 878.32008415 147.75804084 577.7341466299999 89.75022834 382.61695915999996c-10.54687499-42.1875-21.09375003-79.1015625-31.64062499-100.19531251-10.54687499-26.3671875 5.2734375-58.00781251 31.64062499-68.5546875 26.3671875-10.54687499 58.00781251 5.2734375 68.5546875 31.640625 10.54687499 26.3671875 21.09375003 63.28125002 36.91406251 110.7421875C232.13304085 498.63258415 316.50804084 772.85133415 432.52366585 772.85133415 490.53147834 772.85133415 543.26585334 583.00758415 580.17991585 456.44508416c58.00781251-205.6640625 116.015625-421.875 268.94531249-421.87500002 68.55468748 0 126.5625 21.09375003 168.75 68.55468751 94.92187501 100.1953125 89.64843749 263.671875 89.64843751 268.9453125z"  horiz-adv-x="1280" />
+
+    
+    <glyph glyph-name="jiantou-copy-copy" unicode="&#58927;" d="M362.57 131.774h364.149c28.44 0 51.491 23.051 51.491 51.491v364.149c0 28.44-23.051 51.491-51.491 51.491s-51.491-23.051-51.491-51.491v-239.829l-349.073 349.073c-20.119 20.119-52.711 20.119-72.831 0s-20.119-52.711 0-72.831l349.073-349.073h-239.829c-14.202 0.001-27.093-5.754-36.415-15.076s-15.094-22.195-15.076-36.415c0-28.44 23.051-51.491 51.491-51.491z"  horiz-adv-x="1000" />
+
+    
+    <glyph glyph-name="zhizhen" unicode="&#58949;" d="M806.152 342.891q-37.916 0.817-79.102-2.479-35.438-2.479-80.341-8.253t-91.863-18.141l121.131-200.232q8.253-15.662 9.466-32.141t-3.718-31.719-15.24-28.028-25.945-21.015q-14.844-8.253-31.324-9.466t-31.719 3.718-28.028 15.24-21.015 25.945l-101.355 224.938q-41.212-23.888-74.566-51.099t-57.27-51.099q-28.028-27.185-49.438-55.213l-1.661 672.364z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="gongdanguanli-gongda" unicode="&#59155;" d="M960.37 531.8v25.59A60 60 0 0 1 942.59 600L725.88 814.69a60 60 0 0 1-42.36 17.37l-26-0.06H126.88a61.51 61.51 0 0 1-61.51-61.51v-772A61.51 61.51 0 0 1 126.88-63h772a61.51 61.51 0 0 1 61.51 61.51V531.8zM811.86-29h-596a1.52 1.52 0 0 0-1.51 1.51V378.19A18.81 18.81 0 0 0 233.18 397h561.38a18.81 18.81 0 0 0 18.81-18.81v-405.68a1.52 1.52 0 0 0-1.51-1.51z m114.51 18.81A18.81 18.81 0 0 0 907.56-29h-58.68a1.52 1.52 0 0 0-1.51 1.51v401A57.49 57.49 0 0 1 789.88 431h-552a57.49 57.49 0 0 1-57.49-57.49v-401a1.52 1.52 0 0 0-1.51-1.51h-60.7a18.81 18.81 0 0 0-18.81 18.81V778a20 20 0 0 0 20 20H681.3a25 25 0 0 0 17.64-7.28L919 571.67a25 25 0 0 0 7.36-17.72z m33.34 541.33l-3.57 3.56 3.58-3.55zM535.89 718h-299a56 56 0 0 1-56-56v-88a56 56 0 0 1 56-56h299a56 56 0 0 1 56 56v88a56 56 0 0 1-56 56z m22-148.7a17.29 17.29 0 0 0-17.3-17.3H232.17a17.29 17.29 0 0 0-17.3 17.3v97.4a17.29 17.29 0 0 0 17.3 17.3h308.4a17.29 17.29 0 0 0 17.3-17.3z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="move" unicode="&#59711;" d="M759.568 192.08l199.504 199.488L759.12 591.52l-56.56-56.56L805.504 432H544V695.312l102.912-103.376 56.32 56.576L503.616 848l-200-199.92 57.008-56.576L464 694.432V432H200.608l102.944 102.944-56.576 56.56L47.04 391.568l199.52-199.488 56.56 56.56-103.36 103.36H464v-262.416l-103.408 102.928-56.8-56.56L503.616-64 703.04 135.504l-56.128 56.576L544 88.704V352h262.352l-103.36-103.36z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="square" unicode="&#59449;" d="M725.333333 810.666667H298.666667a213.333333 213.333333 0 0 1-213.333334-213.333334v-426.666666a213.333333 213.333333 0 0 1 213.333334-213.333334h426.666666a213.333333 213.333333 0 0 1 213.333334 213.333334V597.333333a213.333333 213.333333 0 0 1-213.333334 213.333334z m128-640a128 128 0 0 0-128-128H298.666667a128 128 0 0 0-128 128V597.333333a128 128 0 0 0 128 128h426.666666a128 128 0 0 0 128-128z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="jurassic_line" unicode="&#59021;" d="M64 416h896v-64H64z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="square-copy" unicode="&#59450;" d="M964.54833996 534.8494471199999L662.84944712 836.54833996a213.333333 213.333333 0 0 1-301.69889424 0l-301.69889284-301.69889284a213.333333 213.333333 0 0 1 0-301.69889424l301.69889284-301.69889284a213.333333 213.333333 0 0 1 301.69889424 0L964.54833996 233.15055287999996a213.333333 213.333333 0 0 1 0 301.69889424z m-362.03867197-543.05800795a128 128 0 0 0-181.01933598 0L119.79143917 293.49033201a128 128 0 0 0 0 181.01933598L421.49033201 776.20856083a128 128 0 0 0 181.01933598 0l301.69889284-301.69889284a128 128 0 0 0 0-181.01933598z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

src/assets/css/main.css

+* {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body,
+#app,
+.wrapper {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+body {
+    font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
+}
+
+a {
+    text-decoration: none
+}
+
+
+.content-box {
+    position: absolute;
+    left: 250px;
+    right: 0;
+    top: 70px;
+    bottom: 0;
+    padding-bottom: 30px;
+    -webkit-transition: left .3s ease-in-out;
+    transition: left .3s ease-in-out;
+    background: #f0f0f0;
+}
+
+.content {
+    width: auto;
+    height: 100%;
+    padding: 10px;
+    overflow-y: scroll;
+    box-sizing: border-box;
+}
+
+.content-collapse {
+    left: 65px;
+}
+
+.container {
+    padding: 30px;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.crumbs {
+    margin: 10px 0;
+}
+
+.pagination {
+    margin: 20px 0;
+    text-align: right;
+}
+
+.plugins-tips {
+    padding: 20px 10px;
+    margin-bottom: 20px;
+}
+
+.el-button+.el-tooltip {
+    margin-left: 10px;
+}
+
+.el-table tr:hover {
+    background: #f6faff;
+}
+
+.mgb20 {
+    margin-bottom: 20px;
+}
+
+.move-enter-active,
+.move-leave-active {
+    transition: opacity .5s;
+}
+
+.move-enter,
+.move-leave {
+    opacity: 0;
+}
+
+/*BaseForm*/
+
+.form-box {
+    width: 600px;
+}
+
+.form-box .line {
+    text-align: center;
+}
+
+.el-time-panel__content::after,
+.el-time-panel__content::before {
+    margin-top: -7px;
+}
+
+.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
+    padding-bottom: 0;
+}
+
+/*Upload*/
+
+.pure-button {
+    width: 150px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    color: #fff;
+    border-radius: 3px;
+}
+
+.g-core-image-corp-container .info-aside {
+    height: 45px;
+}
+
+.el-upload--text {
+    background-color: #fff;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    box-sizing: border-box;
+    width: 360px;
+    height: 180px;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.el-upload--text .el-icon-upload {
+    font-size: 67px;
+    color: #97a8be;
+    margin: 40px 0 16px;
+    line-height: 50px;
+}
+
+.el-upload--text {
+    color: #97a8be;
+    font-size: 14px;
+    text-align: center;
+}
+
+.el-upload--text em {
+    font-style: normal;
+}
+
+/*VueEditor*/
+
+.ql-container {
+    min-height: 400px;
+}
+
+.ql-snow .ql-tooltip {
+    transform: translateX(117.5px) translateY(10px) !important;
+}
+
+.editor-btn {
+    margin-top: 20px;
+}
+
+/*markdown*/
+
+.v-note-wrapper .v-note-panel {
+    min-height: 500px;
+}

src/assets/css/theme-green/color-green.css

+.header{
+    background-color: #07c4a8;
+}
+.login-wrap{
+    background: rgba(56, 157, 170, 0.82);;
+}
+.plugins-tips{
+    background: #f2f2f2;
+}
+.plugins-tips a{
+    color: #00d1b2;
+}
+.el-upload--text em {
+    color: #00d1b2;
+}
+.pure-button{
+    background: #00d1b2;
+}
+.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus {
+    background-color: #00d1b2 !important;
+    border-color: #00d1b2 !important;
+}
+.tags-li.active {
+    border: 1px solid #00d1b2;
+    background-color: #00d1b2;
+}
+.collapse-btn:hover{
+    background: #00d1b2;
+}
\ No newline at end of file

src/assets/css/transition.css

+.list {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  .wrap {
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+  @keyframes show {
+    0% {
+      opacity: 0;
+      left: 532px;
+      /* // 从何处开始 */
+    }
+  
+    100% {
+      opacity: 1;
+      left: 0;
+    }
+  }
+  
+  @keyframes hide {
+    0% {
+      opacity: 1;
+      left: 0;
+    }
+  
+    100% {
+      opacity: 0;
+      left: -532px;
+      /* // 从何处开始 */
+    }
+  }
+  
+  .show-enter-active {
+    animation: show 0.5s;
+  }
+  
+  .show-leave-active {
+    animation: hide 0.5s;
+  }
+  .show-leave-to {
+    opacity: 0;
+  }
\ No newline at end of file

src/assets/iconfont/demo.css

+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/bus.js

+import Vue from 'vue'
+ 
+const Bus = new Vue();
+ 
+export default Bus
\ No newline at end of file

src/components/TestReport/chemicalMedicineReferences.vue

+<template>
+  <!-- 化药参考文献 -->
+  <div style="background:#fff;border-radius:6px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);">
+    <header>
+      <el-button type="success" @click="saveInfo" style="margin: 10px;">保存</el-button>
+    </header>
+    <main>
+        <quill-editor v-model="informedConsent" ref="myQuillEditor" class="editer" style="padding:10px">
+            </quill-editor>
+    </main>
+  </div>
+</template>
+
+<script>
+import { GetChemicalDrugTxt,SaveChemicalDrugTxt } from "../../api/api";
+export default {
+  data() {
+    return {
+        informedConsent:'',
+        OID:''
+    }
+  },
+  mounted(){
+    this.getData()
+  },
+  methods: {
+    getData(){
+      GetChemicalDrugTxt().then(res=>{
+        this.informedConsent=res.data
+      })
+    },
+    saveInfo(){
+      let para={
+        chemicalDrugReferencesTxt:this.informedConsent
+      }
+      this.$confirm('确认保存吗?', '提示', { type: 'warning'}).then(()=>{
+        SaveChemicalDrugTxt(para).then(res=>{
+          if(res.status=='SUCCESS'){
+            this.$message({ type: 'success', message: '保存成功!'});
+            this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+        }).catch(()=>{ return})
+    }
+  },
+}
+</script>
+
+<style scoped>
+header {
+  height: 40px;
+  /* border:1px solid red; */
+  width: 100%;
+}
+</style>

src/components/TestReport/listOfRelated.vue

+<template>
+  <!-- 相关基因列表 -->
+  <div style="background:#fff;border-radius:6px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);">
+    <header>
+      <el-button type="success" @click="addList">添加</el-button>
+      <el-button type="success" @click="saveList">保存</el-button>
+      <el-button type="primary" @click="downModel('相关基因列表模板.xlsx')">导入模板下载</el-button>
+      <el-upload class="upload-demo" ref="fileExcel" action="/" accept=".xlsx, .xls" :before-upload="beforeUpload">
+        <el-button type="primary">导入</el-button>
+      </el-upload>
+      <el-button type="danger" @click="delList">删除</el-button>
+      <el-input placeholder="请输入查询条件" prefix-icon="el-icon-search" v-model="queryCondition" @keyup.enter.native="getData()" class="searchClass" clearable @clear="getData()" style="width:20%"></el-input>
+
+    </header>
+    <main>
+      <el-table ref="multipleTable" :data="tableData" border :height='tableheight' highlight-current-row @row-click="rowclick" @selection-change="handleSelectionChange" @cell-click="clickCell">
+        <el-table-column type="selection"></el-table-column>
+        <el-table-column type="index" label="序号" align="center">
+            <template slot-scope="scope"><span>{{scope.$index+(page.pageindex - 1) * page.pagesize + 1}} </span></template>
+        </el-table-column>
+        <el-table-column prop="geneName" label="名称">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit1" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.geneName"></el-input>
+            <span v-else >{{ scope.row.geneName}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="sortNo" label="排序">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.sortNo"></el-input>
+            <span v-else >{{ scope.row.sortNo}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" label="类型">
+          <template slot-scope="scope">
+             <el-select v-model="scope.row.type" placeholder="请选择" @change="textChange(scope.$index,scope.row)"> 
+               <el-option v-for="item in codeTable" :key="item.codeID" :label="item.codeName" :value="item.codeID"></el-option>
+             </el-select>
+          </template>
+        </el-table-column>
+      </el-table>
+    </main>
+    <footer>
+      <div  class="block" style="text-align:center;">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="page.pagesize" layout="total,sizes, prev, pager, next" :total="total" background :current-page="page.pageindex">
+        </el-pagination>
+    </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import { GetGeneCorrelation,GetGuid,SaveGeneCorrelation,DelGeneCorrelation,ImportGeneCorrelation,GetImportTemplatePath,GetAllSonCodeTable } from "../../api/api";
+export default {
+  data() {
+    return {
+      tableData: [],
+      page:{
+        pageindex:1,
+        pagesize:10
+      },
+      total:0,
+      tableheight: window.innerHeight - 220,
+      row:[],
+      queryCondition:'',
+      codeTable:[]
+    }
+  },
+  created(){
+    window.onresize = () => {
+      this.tableheight=window.innerHeight - 220
+    }
+  },
+  mounted(){
+    this.getData()
+    this.getCodeTable()
+  },
+  methods: {
+    getData(){
+      this.page.queryCondition=this.queryCondition
+      let para=this.page
+      GetGeneCorrelation(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          res.data.data.forEach(item => {
+            item.edit=false
+            item.edit1=false
+          });
+          this.tableData=res.data.data
+          this.total=res.data.totalCount
+        }
+      })
+    },
+    getCodeTable(){
+      let para={CodeTableID:'Code_GeneType'}
+      GetAllSonCodeTable(para).then(res=>{
+        this.codeTable=res.data
+      })
+    },
+    handleCurrentChange(val) {
+      this.page.pageindex = val
+      this.getData()
+    },
+    handleSizeChange(val){
+      this.pagesize = val
+      this.getData()
+    },
+    // 点击单元格
+    clickCell(row, column, cell, event){ 
+      if(cell.cellIndex===2){
+         row.edit1 = true
+      }
+      if(cell.cellIndex===3){
+         row.edit= true
+      }
+    },
+    inputBlur(item) {
+      let tableD = this.tableData;
+      tableD.forEach(function (item) {
+        item.edit = false
+        item.edit1 = false
+      });
+    },
+    // 输入框内容发生变化事件
+    textChange(index,row){ 
+      this.tableData[index].id=0
+
+    },
+    //点击行触发，选中或不选中复选框
+    rowclick(row) {
+      // this.$refs.multipleTable.toggleRowSelection(row)
+    },
+    //选中列表行
+    handleSelectionChange(val) {
+      this.row=val
+    },
+    // 添加
+    addList(){
+      GetGuid().then(res=>{
+        let addForm={
+          geneCorrelationOID:res.data,
+          geneName: '',
+          sortNo: '',
+          edit:true,
+          edit1:true,
+          id:0
+        }
+        this.tableData.push(addForm)
+      })
+      
+    },
+    // 保存
+    saveList(){
+      let para=[]
+      this.tableData.forEach(item=>{
+        if(item.id===0){
+          para.push(item)
+        }
+      })
+      this.$confirm('确认保存吗?', '提示', { type: 'warning'}).then(()=>{
+        SaveGeneCorrelation(para).then(res=>{
+          if(res.status=='SUCCESS'){
+            this.$message({ type: 'success', message: '保存成功!'});
+            this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+        }).catch(()=>{ return})
+    },
+    // 删除
+    delList(){
+      if(this.row.length===0){
+        this.$message({ type: 'error', message: '请先选择需要删除的内容'})
+        return
+      }
+      let para=[]
+      this.row.forEach(item=>{
+        para.push(item.geneCorrelationOID)
+      })
+      this.$confirm('确认删除吗?', '提示', { type: 'warning'}).then(()=>{
+        DelGeneCorrelation(para).then(res=>{
+          if(res.status=='SUCCESS'){
+              this.$message({ type: 'success', message: '删除成功!'});
+              this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+      }).catch(()=>{ return})
+    },
+    // 导入
+    beforeUpload(file) {
+      let formData = new FormData();
+      formData.append("Excel", file);
+      this.$confirm("确认导入吗?", "提示", { type: "warning" }).then(() => {
+        ImportGeneCorrelation(formData).then(res => {
+          if (res.status === "SUCCESS") {
+            this.$message({ type: "success", message: "导入成功!" });
+            this.getData();
+          } else {
+            this.$message({ type: "error", message: res.msg });
+          }
+        });
+      })
+      .catch(() => {  return;});
+    },
+    downModel(data){
+      let para={FileName:data}
+      GetImportTemplatePath(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          window.open('http://'+res.data)
+        }else{
+          this.$message({ type: 'error', message: res.msg});
+        }
+      })
+    }
+  },
+  directives: {
+    focus: {
+      inserted: function(el) {
+        el.querySelector('input').focus()
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+header {
+  height: 40px;
+  padding:5px;
+  width: 100%;
+}
+.upload-demo{
+  display: inline-flex;
+}
+.upload-demo >>>.el-upload--text{
+  width: 100%;
+  height: 100%;
+  border: none;
+  margin: 0 5px;
+  border-radius: 3px;
+}
+
+</style>
+<style>
+.searchClass{
+  margin: 0 8px;
+}
+</style>
\ No newline at end of file

src/components/TestReport/mis.vue

+<template>
+  <!-- mis -->
+  <div style="background:#fff;border-radius:6px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);">
+    <header>
+      <el-button type="success" @click="addList">添加</el-button>
+      <el-button type="success" @click="saveList">保存</el-button>
+      <el-button type="danger" @click="delList">删除</el-button>
+      <el-input placeholder="请输入查询条件" prefix-icon="el-icon-search" v-model="queryCondition" @keyup.enter.native="getData()" class="searchClass" clearable @clear="getData()" style="width:20%"></el-input>
+    </header>
+    <main>
+      <el-table ref="multipleTable" :data="tableData" border :height='tableheight' highlight-current-row @row-click="rowclick" @selection-change="handleSelectionChange" @cell-click="clickCell">
+        <el-table-column type="selection"></el-table-column>
+        <el-table-column type="index" label="序号" align="center">
+            <template slot-scope="scope"><span>{{scope.$index+(page.pageindex - 1) * page.pagesize + 1}} </span></template>
+        </el-table-column>
+        <el-table-column prop="grade" label="范围">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit1" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.grade"></el-input>
+            <span v-else >{{ scope.row.grade}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="scope" label="等级">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.scope"></el-input>
+            <span v-else >{{ scope.row.scope}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="remark" label="说明">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit2" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.remark"></el-input>
+            <span v-else >{{ scope.row.remark}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </main>
+    <footer>
+      <div  class="block" style="text-align:center;">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="page.pagesize" layout="total,sizes, prev, pager, next" :total="total" background :current-page="page.pageindex">
+        </el-pagination>
+    </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import { GetMISReport,GetGuid,SaveMISReport,DelMISReport } from "../../api/api";
+export default {
+  data() {
+    return {
+      tableData: [],
+      page:{
+        pageindex:1,
+        pagesize:10
+      },
+      total:0,
+      tableheight: window.innerHeight - 220,
+      row:[],
+      queryCondition:''
+    }
+  },
+  created(){
+    window.onresize = () => {
+      this.tableheight=window.innerHeight - 220
+    }
+  },
+  mounted(){
+    this.getData()
+  },
+  methods: {
+    getData(){
+      this.page.queryCondition=this.queryCondition
+      let para=this.page
+      GetMISReport(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          res.data.data.forEach(item => {
+            item.edit=false
+            item.edit1=false
+            item.edit2=false
+          });
+          this.tableData=res.data.data
+          this.total=res.data.totalCount
+        }
+      })
+    },
+    handleCurrentChange(val) {
+      this.page.pageindex = val
+      this.getData()
+    },
+    handleSizeChange(val){
+      this.pagesize = val
+      this.getData()
+    },
+    // 点击单元格
+    clickCell(row, column, cell, event){ 
+      if(cell.cellIndex===2){
+         row.edit1 = true
+      }
+      if(cell.cellIndex===3){
+         row.edit= true
+      }
+      if(cell.cellIndex===4){
+         row.edit2= true
+      }
+    },
+    inputBlur(item) {
+      let tableD = this.tableData;
+      tableD.forEach(function (item) {
+        item.edit = false
+        item.edit1 = false
+        item.edit2 = false
+      });
+    },
+    // 输入框内容发生变化事件
+    textChange(index,row){ 
+      this.tableData[index].id=0
+    },
+    //点击行触发，选中或不选中复选框
+    rowclick(row) {
+      // this.$refs.multipleTable.toggleRowSelection(row)
+    },
+    //选中列表行
+    handleSelectionChange(val) {
+      this.row=val
+    },
+    // 添加
+    addList(){
+      GetGuid().then(res=>{
+        let addForm={
+          misReportOID:res.data,
+          grade: '',
+          scope: '',
+          remark:'',
+          edit:true,
+          edit1:true,
+          edit2:true,
+          id:0
+        }
+        this.tableData.push(addForm)
+      })
+      
+    },
+    // 保存
+    saveList(){
+      let para=[]
+      this.tableData.forEach(item=>{
+        if(item.id===0){
+          para.push(item)
+        }
+      })
+      this.$confirm('确认保存吗?', '提示', { type: 'warning'}).then(()=>{
+        SaveMISReport(para).then(res=>{
+          if(res.status=='SUCCESS'){
+            this.$message({ type: 'success', message: '保存成功!'});
+            this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+        }).catch(()=>{ return})
+    },
+    // 删除
+    delList(){
+      if(this.row.length===0){
+        this.$message({ type: 'error', message: '请先选择需要删除的内容'})
+        return
+      }
+      let para=[]
+      this.row.forEach(item=>{
+        para.push(item.misReportOID)
+      })
+      this.$confirm('确认删除吗?', '提示', { type: 'warning'}).then(()=>{
+        DelMISReport(para).then(res=>{
+          if(res.status=='SUCCESS'){
+              this.$message({ type: 'success', message: '删除成功!'});
+              this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+      }).catch(()=>{ return})
+    }
+  },
+  directives: {
+    focus: {
+      inserted: function(el) {
+        el.querySelector('input').focus()
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+header {
+  height: 40px;
+  padding:5px;
+  width: 100%;
+}
+.upload-demo{
+  display: inline-flex;
+}
+.upload-demo >>>.el-upload--text{
+  width: 100%;
+  height: 100%;
+  border: none;
+  margin: 0 5px;
+  border-radius: 3px;
+}
+</style>

src/components/TestReport/noticeOfInformation.vue

+<template>
+  <!-- 知情通知书配置 -->
+  <div style="background:#fff;border-radius:6px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);">
+    <header>
+      <el-button type="success" @click="saveInfo" style="margin: 10px;">保存</el-button>
+    </header>
+    <main>
+        <quill-editor v-model="informedConsent" ref="myQuillEditor" class="editer" style="padding:10px">
+            </quill-editor>
+    </main>
+  </div>
+</template>
+
+<script>
+import { GetInformedConsentTxt,SaveInformedConsentTxt } from "../../api/api";
+export default {
+  data() {
+    return {
+        informedConsent:'',
+        OID:''
+    }
+  },
+  mounted(){
+    this.getData()
+  },
+  methods: {
+    getData(){
+      GetInformedConsentTxt().then(res=>{
+        this.informedConsent=res.data
+      })
+    },
+    saveInfo(){
+      let para={
+        informedConsentTxt:this.informedConsent
+      }
+      this.$confirm('确认保存吗?', '提示', { type: 'warning'}).then(()=>{
+        SaveInformedConsentTxt(para).then(res=>{
+          if(res.status=='SUCCESS'){
+            this.$message({ type: 'success', message: '保存成功!'});
+            this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+        }).catch(()=>{ return})
+    }
+  },
+}
+</script>
+
+<style scoped>
+header {
+  height: 40px;
+  /* border:1px solid red; */
+  width: 100%;
+}
+</style>

src/components/TestReport/targetDrugReferences.vue

+<template>
+  <!-- 靶药参考文献 -->
+  <div style="background:#fff;border-radius:6px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);">
+    <header>
+      <el-button type="success" @click="saveInfo" style="margin: 10px;">保存</el-button>
+    </header>
+    <main>
+        <quill-editor v-model="informedConsent" ref="myQuillEditor" class="editer" style="padding:10px">
+            </quill-editor>
+    </main>
+  </div>
+</template>
+
+<script>
+import { GetTargetedMedicineTxt,SaveTargetedMedicineTxt } from "../../api/api";
+export default {
+  data() {
+    return {
+        informedConsent:'',
+        OID:''
+    }
+  },
+  mounted(){
+    this.getData()
+  },
+  methods: {
+    getData(){
+      GetTargetedMedicineTxt().then(res=>{
+        this.informedConsent=res.data
+      })
+    },
+    saveInfo(){
+      let para={
+        targetedMedicineReferencesTxt:this.informedConsent
+      }
+      this.$confirm('确认保存吗?', '提示', { type: 'warning'}).then(()=>{
+        SaveTargetedMedicineTxt(para).then(res=>{
+          if(res.status=='SUCCESS'){
+            this.$message({ type: 'success', message: '保存成功!'});
+            this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+        }).catch(()=>{ return})
+    }
+  },
+}
+</script>
+
+<style scoped>
+header {
+  height: 40px;
+  /* border:1px solid red; */
+  width: 100%;
+}
+</style>

src/components/TestReport/tmb.vue

+<template>
+  <!-- tmb -->
+  <div style="background:#fff;border-radius:6px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);">
+    <header>
+      <el-button type="success" @click="addList">添加</el-button>
+      <el-button type="success" @click="saveList">保存</el-button>
+      <el-button type="danger" @click="delList">删除</el-button>
+      <el-input placeholder="请输入查询条件" prefix-icon="el-icon-search" v-model="queryCondition" @keyup.enter.native="getData()" class="searchClass" clearable @clear="getData()" style="width:20%"></el-input>
+    </header>
+    <main>
+      <el-table ref="multipleTable" :data="tableData" border :height='tableheight' highlight-current-row @row-click="rowclick" @selection-change="handleSelectionChange" @cell-click="clickCell">
+        <el-table-column type="selection"></el-table-column>
+        <el-table-column type="index" label="序号" align="center">
+            <template slot-scope="scope"><span>{{scope.$index+(page.pageindex - 1) * page.pagesize + 1}} </span></template>
+        </el-table-column>
+        <el-table-column prop="grade" label="范围">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit1" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.grade"></el-input>
+            <span v-else >{{ scope.row.grade}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="scope" label="等级">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.scope"></el-input>
+            <span v-else >{{ scope.row.scope}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="remark" label="说明">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit2" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.remark"></el-input>
+            <span v-else >{{ scope.row.remark}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </main>
+    <footer>
+      <div  class="block" style="text-align:center;">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="page.pagesize" layout="total,sizes, prev, pager, next" :total="total" background :current-page="page.pageindex">
+        </el-pagination>
+    </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import { GetTMBGrade,GetGuid,SaveTMBGrade,DelTMBGrade } from "../../api/api";
+export default {
+  data() {
+    return {
+      tableData: [],
+      page:{
+        pageindex:1,
+        pagesize:10
+      },
+      total:0,
+      tableheight: window.innerHeight - 220,
+      row:[],
+      queryCondition:''
+    }
+  },
+  created(){
+    window.onresize = () => {
+      this.tableheight=window.innerHeight - 220
+    }
+  },
+  mounted(){
+    this.getData()
+  },
+  methods: {
+    getData(){
+      this.page.queryCondition=this.queryCondition
+      let para=this.page
+      GetTMBGrade(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          res.data.data.forEach(item => {
+            item.edit=false
+            item.edit1=false
+            item.edit2=false
+          });
+          this.tableData=res.data.data
+          this.total=res.data.totalCount
+        }
+      })
+    },
+    handleCurrentChange(val) {
+      this.page.pageindex = val
+      this.getData()
+    },
+    handleSizeChange(val){
+      this.pagesize = val
+      this.getData()
+    },
+    // 点击单元格
+    clickCell(row, column, cell, event){ 
+      if(cell.cellIndex===2){
+         row.edit1 = true
+      }
+      if(cell.cellIndex===3){
+         row.edit= true
+      }
+      if(cell.cellIndex===4){
+         row.edit2= true
+      }
+    },
+    inputBlur(item) {
+      let tableD = this.tableData;
+      tableD.forEach(function (item) {
+        item.edit = false
+        item.edit1 = false
+        item.edit2 = false
+      });
+    },
+    // 输入框内容发生变化事件
+    textChange(index,row){ 
+      this.tableData[index].id=0
+    },
+    //点击行触发，选中或不选中复选框
+    rowclick(row) {
+      // this.$refs.multipleTable.toggleRowSelection(row)
+    },
+    //选中列表行
+    handleSelectionChange(val) {
+      this.row=val
+    },
+    // 添加
+    addList(){
+      GetGuid().then(res=>{
+        let addForm={
+          tmbGradeOID:res.data,
+          grade: '',
+          scope: '',
+          remark:'',
+          edit:true,
+          edit1:true,
+          edit2:true,
+          id:0
+        }
+        this.tableData.push(addForm)
+      })
+      
+    },
+    // 保存
+    saveList(){
+      let para=[]
+      this.tableData.forEach(item=>{
+        if(item.id===0){
+          para.push(item)
+        }
+      })
+      this.$confirm('确认保存吗?', '提示', { type: 'warning'}).then(()=>{
+        SaveTMBGrade(para).then(res=>{
+          if(res.status=='SUCCESS'){
+            this.$message({ type: 'success', message: '保存成功!'});
+            this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+        }).catch(()=>{ return})
+    },
+    // 删除
+    delList(){
+      if(this.row.length===0){
+        this.$message({ type: 'error', message: '请先选择需要删除的内容'})
+        return
+      }
+      let para=[]
+      this.row.forEach(item=>{
+        para.push(item.tmbGradeOID)
+      })
+      this.$confirm('确认删除吗?', '提示', { type: 'warning'}).then(()=>{
+        DelTMBGrade(para).then(res=>{
+          if(res.status=='SUCCESS'){
+              this.$message({ type: 'success', message: '删除成功!'});
+              this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+      }).catch(()=>{ return})
+    }
+  },
+  directives: {
+    focus: {
+      inserted: function(el) {
+        el.querySelector('input').focus()
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+header {
+  height: 40px;
+  padding:5px;
+  width: 100%;
+}
+.upload-demo{
+  display: inline-flex;
+}
+.upload-demo >>>.el-upload--text{
+  width: 100%;
+  height: 100%;
+  border: none;
+  margin: 0 5px;
+  border-radius: 3px;
+}
+</style>

src/components/allocation/dictionary.vue

+<template>
+<!-- 数据字典 -->
+    <div class="dictionary">
+    <el-row :gutter="10">
+      <el-col :span="6">
+          <div class="grid-content">
+            <el-button type="primary" size="small" @click="addList" >添加</el-button>
+            <el-input placeholder="请输入搜索内容" prefix-icon="el-icon-search" v-model="searchInput" clearable size="small" style="width:90%;margin:10px;display:block"></el-input> 
+            <ul style="list-style:none;overflow-y: auto;height:84%;">
+                <li v-for="(item,index) in dataList" :key="item.codeClassifyOID" style="line-height: 30px;width: 80%;font-size:14px;padding-left:15px" :class="{style1:index==checkindex}" @mouseenter="toggle(item,true)" @mouseleave="toggle(item,false)" @click="clickLi(item,index)">{{item.codeTableName}}
+                    <span style="float:right;font-size: 16px;color: #409EFF;" v-if="item.iconShow">
+                        <i class="el-icon-edit" style="cursor:pointer;" @click="editList(item)"></i>
+                        <i class="el-icon-delete" style="cursor:pointer;" @click="delList(item.codeClassifyOID)"></i>
+                    </span>
+                </li>
+            </ul>
+          </div>
+      </el-col>
+      <el-col :span="18">
+        <div class="grid-content" style="position: relative">
+        <el-button type="primary" size="small" @click="handleAddTable">添加明细</el-button>
+        <el-button type="primary" size="small" @click="handleDelTable">删除明细</el-button>
+        <el-button type="primary" size="small" @click="handleSave">保存</el-button>
+        <el-table :data="dataTable" style="width: 100%" max-height="400" ref="dataTable" highlight-current-row @cell-click="clickCell" @selection-change="handleSelectionChange" @row-click="openDetails">
+            <el-table-column type="selection"></el-table-column>
+            <el-table-column type="index" label="序号">
+                <template slot-scope="scope"><span>{{scope.$index+(page.pageNumber - 1) * page.pageSize + 1}} </span></template>        
+            </el-table-column>
+            <el-table-column prop="codeID" label="编码" align="center">
+                <template slot-scope="scope">
+                <template v-if="scope.row.editflag1">
+                    <el-input v-focus size="small" v-model="scope.row.codeID" @change="textChange(scope.$index,scope.row)" auto-complete="off" @blur="inputBlur"></el-input>
+                </template>
+                <span v-else>{{ scope.row.codeID }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="codeName" label="名称" align="center">
+                <template slot-scope="scope">
+                <template v-if="scope.row.editflag2">
+                    <el-input v-focus size="small" v-model="scope.row.codeName" @change="textChange(scope.$index,scope.row)" auto-complete="off" @blur="inputBlur"></el-input>
+                </template>
+                <span v-else>{{ scope.row.codeName }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="reserved3" label="颜色" align="center">
+                <template slot-scope="scope" >
+                   <colorPicker v-model="scope.row.reserved3" @change="textChange(scope.$index,scope.row)"/>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination">
+            <el-pagination background :total="total" :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize" layout="total,sizes, prev, pager, next" @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="page.pageNumber"></el-pagination>
+        </div>
+      </div>
+    </el-col>
+      </el-col>
+    </el-row>
+    <el-dialog title="数据字典" :visible.sync="dialogVisible" width="40%">
+        <el-form ref="form" :model="form" label-width="100px">
+             <el-form-item label="代码表标志">
+                <el-input v-model="form.codeTableID"></el-input>
+            </el-form-item>
+            <el-form-item label="中文名称">
+                <el-input v-model="form.codeTableName"></el-input>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
+        <el-button type="primary" @click="saveDirectory" size="small">确 定</el-button>
+        </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { GetAllCodeTable,GetGuid,DelCodeTable,SaveORUpdateCodeTable,GetSonCodeTable,SaveORUpdateSonCodeTable,DelSonCodeTable } from "../../api/api";
+export default {
+    data(){
+        return{
+            dataList:[],
+            dataTable:[],
+            oidList:[],
+			checkindex:'-1',
+            page:{
+                pageNumber:1,
+                pageSize:10
+            },
+            dialogVisible:false,
+            form:{
+                codeTableID:'',
+                codeTableName:''
+            },
+            codeClassifyOID:'',
+            clickData:{},
+            searchInput:'',
+            total:0,
+        }
+    },
+    directives: {
+  // 注册一个局部的自定义指令 v-focus
+    focus: {
+      // 指令的定义
+      inserted: function (el) {
+        // 聚焦元素
+        el.querySelector('input').focus()
+      }
+    }
+},
+    watch:{
+        dialogVisible(val){
+            if(val===false){
+                this.form={
+                    codeTableID:'',
+                    codeTableName:''
+                }
+            }
+        },
+        searchInput(){
+            this.getData()
+        }
+    },
+    mounted(){
+        this.getData()
+    },
+    methods:{
+        getData(){
+            let para={
+                queryValue:this.searchInput
+            }
+            GetAllCodeTable(para).then(res=>{
+                if(res.status==='SUCCESS'){
+                    this.dataList=res.data
+                    this.dataList.forEach(el => {
+                        el.iconShow=false
+                    });
+                }
+            })
+        },
+        // 图标的显示隐藏
+        toggle(data,flag){
+            data.iconShow=flag
+            this.dataList.forEach(item=>{
+                if(item.codeClassifyOID===data.codeClassifyOID){
+                    item.iconShow=flag
+                }
+            })
+            let temp_da=JSON.parse(JSON.stringify(this.dataList))
+            this.dataList=temp_da
+        },
+        // 修改
+        editList(data){ 
+            this.form=data
+            this.dialogVisible=true
+        },
+        // 删除
+        delList(data){
+            this.$confirm('确认删除吗？', '提示', {type: 'warning'}).then(() => {
+                let para={
+                    codeClassifyOID:data
+                }
+                DelCodeTable(para).then(res=>{
+                    if(res.status==='SUCCESS'){
+                        this.$message.success('删除成功')
+                    }else{
+                        this.$message.error(res.msg)
+                    }
+                    this.getData()
+                })
+            }).catch()
+            
+        },
+        // 添加数据字典
+        addList(){
+            GetGuid().then(res=>{
+                this.form.codeClassifyOID=res.data.data
+                this.dialogVisible=true
+            })
+        },
+        // 确定 保存数据字典
+        saveDirectory(){
+            this.$confirm('确认提交吗？', '提示', {type: 'warning'}).then(() => {
+                let para=this.form
+                SaveORUpdateCodeTable(para).then(res=>{
+                    if(res.status==='SUCCESS'){
+                        this.$message.success('保存成功')
+                        this.dialogVisible=false
+                    }else{
+                        this.$message.error(res.msg)
+                        this.form={
+                            codeTableID:'',
+                            codeTableName:''
+                        }
+                    }
+                    this.getData()
+                })
+            }).catch()
+        },
+        // 获取明细
+        clickLi(data,index){
+            this.codeClassifyOID=data.codeClassifyOID
+            this.clickData=data
+            this.getInfo()
+			this.checkindex = index
+			
+        },
+        getInfo(){
+            let para=this.clickData
+            para.pageSize=this.page.pageSize
+            para.pageNumber=this.page.pageNumber
+            GetSonCodeTable(para).then(res=>{
+                if(res.status==='SUCCESS'){
+                    this.dataTable=res.data.data
+                    res.data.data.forEach(item=>{
+                    item.editflag1=false
+                    item.editflag2=false
+                    if(!item.reserved3){
+                        item.reserved3=''
+                    }
+                })
+                    this.total=res.data.totalCount
+                }
+            })
+        },
+        // 添加明细
+        handleAddTable(){
+            if(this.codeClassifyOID===''){
+                this.$message.error('请先选择数据字典')
+                return
+            }
+            GetGuid().then(res=>{
+                let addForm={
+                    codeClassifyOID:this.codeClassifyOID,
+                    codeValueOID : res.data,
+                    codeName: "",
+                    codeID: "",
+                    reserved3: "",
+                    id:this.id+1
+                }
+                // this.dataTable.unshift(addForm) //加在表头
+                this.dataTable.push(addForm)
+            })
+        },
+        // 保存明细
+        handleSave(){
+            // this.edit = false
+            let editPara=[]
+            this.dataTable.forEach(item=>{
+                if(item.status==='update'){
+                    editPara.push(item)
+                }
+            })
+            let para={
+                codeValueList:editPara
+            }
+            this.$confirm('确认保存吗?', '提示', {
+                type: 'warning'
+            }).then(()=>{
+                SaveORUpdateSonCodeTable(para).then(res=>{
+                    if(res.status=='SUCCESS'){
+                        this.$message.success('保存成功')                        
+                        this.getInfo();
+                    }
+                    else{
+                        this.$message.error(res.msg)
+                    }
+                })
+            })
+        },
+        // 删除明细
+        handleDelTable(){
+            if(this.oidList.length===0){
+                this.$message.error('请先选择需要删除的内容')
+                return
+            }
+            let oid=[]
+            this.oidList.forEach(item=>{
+                oid.push(item.codeValueOID)
+            })
+            let para={
+                codeValueOIDList:oid
+            }
+            this.$confirm('确认删除吗?', '提示', {
+                type: 'warning'
+                }).then(() => {
+                DelSonCodeTable(para).then(res=>{
+                    if(res.status==='SUCCESS'){
+                        this.$message.success('删除成功')                                            
+                        this.getInfo()
+                    }else{
+                        this.$message.error(res.msg)
+                    }
+                })
+            }).catch(() => {          
+            });
+        },
+        //选项列发生变化时
+        handleSelectionChange(val) {
+            this.oidList=val
+        },
+        // 输入框失去焦点
+        inputBlur(row, event, column){ 
+            let tableD = this.dataTable;
+            tableD.forEach(function (item) {
+                item.editflag1 = false
+                item.editflag2 = false
+            });
+        },
+        // 点击单元格
+        clickCell(row, column, cell, event){ 
+            if(cell.cellIndex===2){
+                row.editflag1 = true
+            }
+            if(cell.cellIndex===3){
+                row.editflag2 = true
+            }
+        },
+        // 输入框内容发生变化事件
+        textChange(index,row){ 
+            row.status='update'
+            this.dataTable[index]=row
+        },
+        // 点击行触发，选中或不选中复选框
+        openDetails(row) {
+        this.$refs.dataTable.toggleRowSelection(row)
+        // this.sels = row
+        },
+        // 分页
+        handleSizeChange(val) { 
+            this.page.pageSize = val
+            this.getInfo()
+        },
+        handleCurrentChange(val) {
+            this.page.pageNumber = val
+            this.getInfo()
+        },
+
+    }
+}
+</script>
+<style scoped>
+.dictionary li:hover
+{ 
+background-color:#F5F7FA;
+}
+.style1 {
+   background-color: #f0f7ff;
+  }
+  .dictionary .el-col {
+    height: 100%;
+  }
+.dictionary .el-row {
+    height: 100%;
+  }
+   .grid-content {
+    border-radius: 6px;
+    padding: 20px;
+    padding-bottom: 13px;
+    height: 95%;
+    background: #fff;
+    box-shadow: 1px 1px 3px rgba(0,0,0,.2);
+  }
+    .pagination{
+      padding-top: 20px; 
+      padding-bottom: 20px;
+      position: absolute;
+      bottom: 0;
+      left:50%;
+      transform: translate(-50%)
+  }
+  /* .colorLi{
+      width: 40px;
+    height: 40px;
+    display: inline-block;
+  } */
+ .dictionary>>>.m-colorPicker .box.open{
+      z-index: 999;
+    right: 70px;
+  }
+ .dictionary>>> .m-colorPicker .box{
+      position: fixed!important;
+      width: 215px;
+  }
+</style>
\ No newline at end of file

src/components/authorizationManage/Menu_Authorization.vue

+<template>
+<!-- 菜单授权 -->
+  <div class="Menu_Authorization" style="height: 100%;">
+    <!-- 顶部按钮组 -->
+        <el-row :span='24' style="padding-left: 10px;padding-top: 10px;">
+            <el-button type="primary" @click="addList" size="small">添加</el-button>
+            <el-button type="primary" @click="saveList" size="small">保存</el-button>
+        </el-row>
+        <el-row>
+            <el-col :span='24' style="padding-left: 10px;">
+                <el-table @cell-click="clickCell" :data="list" :height="tableheight" highlight-current-row style="width: 100%;">
+                <el-table-column type="index" label="序号">
+                    <template slot-scope="scope"><span>{{scope.$index+(page.pageindex - 1) * page.pagesize + 1}} </span></template>
+                </el-table-column>
+                <el-table-column prop="resP_NO" label="编码">
+                    <template slot-scope="scope">
+                        <template v-if="scope.row.editflag1">
+                            <el-input v-focus v-model="scope.row.resP_NO" @change="textChange(scope.$index,scope.row)" class="edit-input" size="small" auto-complete="off" @blur="inputBlur"></el-input>
+                        </template>
+                        <span v-else>{{ scope.row.resP_NO }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="resP_NAME" label="名称">
+                    <template slot-scope="scope">
+                    <template v-if="scope.row.editflag2">
+                        <el-input v-focus v-model="scope.row.resP_NAME" @change="textChange(scope.$index,scope.row)" class="edit-input" size="small" auto-complete="off" @blur="inputBlur"></el-input>
+                    </template>
+                    <span v-else>{{ scope.row.resP_NAME }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="isSYS" label="公共责任">
+                    <template slot-scope="scope">
+                    <el-switch v-model="scope.row.isSYS" @change="textChange(scope.$index,scope.row)" class="switchStyle" :width="50" :active-value="true" :inactive-value="false" active-text="启用" inactive-text="禁用"></el-switch>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="isDisable" label="状态">
+                    <template slot-scope="scope">
+                    <el-switch v-model="scope.row.isDisable" class="switchStyle" :width="50" :active-value="false" :inactive-value="true" active-text="启用" inactive-text="禁用" @change="textChange(scope.$index,scope.row)"></el-switch>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="resP_DESC_TEXT" label="备注">
+                    <template slot-scope="scope">
+                    <template v-if="scope.row.editflag3">
+                        <el-input v-focus v-model="scope.row.resP_DESC_TEXT" @change="textChange(scope.$index,scope.row)" class="edit-input" size="small" auto-complete="off" @blur="inputBlur"></el-input>
+                    </template>
+                    <span v-else>{{ scope.row.resP_DESC_TEXT }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="操作" width="150">
+                    <template slot-scope="scope">
+                    <el-button type="primary" size="small" icon="el-icon-edit" @click="editList(scope.$index, scope.row)"></el-button>
+                    <el-button type="primary" size="small" icon="el-icon-delete"  @click="delList(scope.$index, scope.row)"></el-button>
+                    </template>
+                </el-table-column>
+                </el-table>
+                  <div class="block" style="text-align:center;background:#fff;padding-top:8px;border-radius: 6px;">
+                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="page.pagesize" layout="total,sizes, prev, pager, next" :total="totalCou" background :current-page="page.pageindex"></el-pagination>
+                </div>
+            </el-col>
+        </el-row>
+    <!-- 编辑弹窗 -->
+    <el-dialog :visible.sync="dialogVisible" width="100%">
+      <el-tabs v-model="activeName" @tab-click="clickTab">
+        <el-tab-pane label="菜单设置" name="first">
+          <el-row>
+            <el-col :span="8">
+              <el-tree :data="data" show-checkbox ref="dutytree" node-key="sys_BusiPortalMenuOID" :default-expanded-keys="setChecked" :props="defaultProps" @node-collapse="nodeCollapse" @node-expand="nodeExpand" @check="changeNowNode"></el-tree>
+            </el-col>
+            <el-col :span="16" style="padding-top: 3px;">
+              <div class="">
+                <div v-for="(items,index) in permissionsList" :key="index">
+                  <div v-if="items.subpermissions.length>0" v-show="items.show">
+                      <div v-for="(item,idx) in items.subpermissions" :key="idx" class="child-item">
+                        <el-checkbox :disabled="!items.isSelected" @change="handleCheckedChangeChild(index,idx,item.isSelected)" v-model="item.isSelected" :active-text="item.name">{{item.name}}
+                        </el-checkbox>
+                    </div>
+                  </div>
+                  <div v-else class="child-item1" v-show="items.show">
+                  </div>
+                </div>   
+              </div>
+            </el-col>
+          </el-row>
+          <div style="text-align: right;">
+            <el-button type="primary" @click="submitTree" size="small">提交</el-button>
+            <el-button @click="resetTree" size="small">重置</el-button>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="岗位设置" name="second">
+          <el-button type="primary" @click="chooseWork" size="small">选择</el-button>
+          <el-button type="primary" @click="delWork" size="small">删除</el-button>
+          <el-table ref="multipleTable" @row-click="openDetails" @selection-change="handleSelectionChange" :data="postList" highlight-current-row style="width: 100%">
+            <el-table-column type="selection"></el-table-column>
+            <el-table-column prop="postName" label="岗位名称"></el-table-column>
+            <el-table-column prop="divisionName" label="部门名称"></el-table-column>
+            <el-table-column prop="orgName" label="组织名称"></el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="岗位分类" name="third">
+           <el-button type="primary" @click="chooseWorkClass" size="small">选择</el-button>
+          <el-button type="primary" @click="delWorkClass" size="small">删除</el-button>
+          <el-table ref="multipleTableClass" @row-click="openDetails" @selection-change="handleSelectionChange" :data="postTypeList" highlight-current-row style="width: 100%">
+            <el-table-column type="selection"></el-table-column>
+            <el-table-column prop="postClassNo" label="岗位分类编码"></el-table-column>
+            <el-table-column prop="postClassName" label="岗位分类名称"></el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+    <!-- 岗位弹窗 -->
+    <el-dialog title="岗位" :visible.sync="dialogWorkVisible">
+      <PostSetting :defaultProps="defaultProps" :refTree="refTree" :data="workData" :nodeKey="nodeKey" :checkStrict="false" @emitClose="emitClose" @conformChoose="conformChoose"></PostSetting>
+    </el-dialog>
+    <el-dialog title="岗位分类" :visible.sync="dialogWorkVisibleClass">
+      <PostSetting :defaultProps="defaultPropsThird" :refTree="refTreeClass" :data="workClassData" :nodeKey="nodeKeyClass" :checkStrict="true" @emitClose="emitClose" @conformChoose="conformChoose"></PostSetting>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getDutyList ,getMenuTree,RespDel,RespSaveData,RespAddMenuRespMap,RespResetMenuRespMap,RespGetRespPostList,PostTreeChoose,AddPost,DelRespPost,Resp_GetRespPostClassList,PostClass_GetTreeData,Resp_AddPostClass,Resp_DelRespPostClass } from "../../api/api";
+import Vue from "vue";
+import PostSetting from './postSelection.vue'
+export default {
+  components:{ PostSetting },
+  data() {
+    return {
+      list: [],
+      postList: [],
+      data: [],
+      defaultProps: {
+        children: "children",
+        label: "name",
+        disabled:'isbm'
+      },
+      defaultPropsThird:{
+        children: "children",
+        label: "postClassName",
+      },
+      nodeKey:'oid',
+      nodeKeyClass:'sys_PostClassOID',
+      refTree:'centerTree',
+      refTreeClass:'centerClasstree',
+      workData:[],
+      workClassData:[],
+      count: 1,
+      isDisable: "",
+      isSYS: "",
+      dialogVisible: false,
+      dialogWorkVisible: false,
+      dialogWorkVisibleClass:false,
+      activeName: "first",
+      isChoose:false,
+      check: "",
+      page: {
+        pageindex: 1,
+        pagesize: 10
+      },
+      edit: false,
+      sys_RESPONSIBILITYOID:'',
+      setChecked:[],
+      totalCou:0,
+      rowData:[],
+      rowDataClass:[],
+      isCheckedNode:false,
+      permissionsList:[],
+      tab:'',
+      postTypeList:[],
+      allIsSelected:[],
+      tableheight: window.innerHeight - 230,
+    };
+  },
+  directives: {
+  // 注册一个局部的自定义指令 v-focus
+    focus: {
+      // 指令的定义
+      inserted: function (el) {
+        // 聚焦元素
+        el.querySelector('input').focus()
+      }
+    }
+},
+  mounted() {
+    this.getData();
+    window.onresize = () => {
+      this.tableheight=window.innerHeight - 230
+    }
+  },
+  watch: {
+      dialogVisible(val){
+        if(val===false){
+          this.data=[]
+          this.permissionsList=[]
+          this.activeName="first"
+        }
+      },
+    },
+  methods: {
+    // 编辑时 标签页的切换
+    clickTab(data){
+      this.tab=data.name
+    },
+    getData() {
+      const param = this.page
+      getDutyList(param).then(res => {
+        if(res.data.status==='SUCCESS'){
+           this.totalCou=res.data.data.totalCount
+           res.data.data.data.forEach(item=>{
+             item.editflag1=false
+             item.editflag2=false
+             item.editflag3=false
+           })
+           this.list = res.data.data.data
+        }
+      })
+
+    },
+    getMenuTre(){ //责任下的树
+      const para={ Sys_RESPONSIBILITY_FK :this.sys_RESPONSIBILITYOID}
+      this.setChecked=[]
+      let _this=this
+      getMenuTree(para).then(res=>{
+        _this.data=res.data.data
+        this.dialogVisible=true
+        _this.selectNodes(_this.data)
+        _this.dutyTable(_this.data)
+        _this.rendertoggleDuty(_this.data)
+        _this.$nextTick(() => {
+            _this.$refs.dutytree.setCheckedKeys(_this.setChecked)
+        })
+      })
+    },
+    // 最根级的节点 未选中 子节点的按钮隐藏
+    rendertoggleDuty(data){
+      if(data!==null){
+        data.forEach(item=>{
+          if(item.parentOID==="00000000-0000-0000-0000-000000000000"){ // 是
+            if(item.isSelected===false){
+                if(item.children.length>0){
+                  item.children.forEach(it=>{
+                      this.permissionsList.forEach(el=>{
+                        if(it.sys_BusiPortalMenuOID===el.sys_BusiPortalMenuOID){
+                          el.show=it.isSelected
+                        }
+                      })
+                  })
+                } 
+            }
+          }
+      })
+      }
+    },
+    getPostData(){ //岗位信息
+      let para={
+        pageindex:this.page.pageindex,
+        pagesize:this.page.pagesize,
+        sys_RESPONSIBILITY_FK:this.sys_RESPONSIBILITYOID
+      }
+      this.postList=[]
+      RespGetRespPostList(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          this.postList=res.data.data
+        }
+      })
+    },
+    // 岗位分类列表
+    getPostClass(){
+      this.postTypeList=[]
+      let para={
+        pageindex:this.page.pageindex,
+        pagesize:this.page.pagesize,
+        sys_RESPONSIBILITY_FK:this.sys_RESPONSIBILITYOID
+      }
+      Resp_GetRespPostClassList(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          this.postTypeList=res.data.data
+        }
+      })
+      
+    },
+    //默认选中
+    selectNodes(data){ 
+      if(data!==null){
+        for (const item of data) {
+        if(item.children.length===0){//无子节点
+          if(item.isSelected==true){
+            this.setChecked.push(item.sys_BusiPortalMenuOID)
+          }
+       }else{
+         this.selectNodes(item.children)
+       }
+      }
+      }
+    },
+    // 责任
+    dutyTable(data){
+      if(data!==null){
+      for (const item of data) {
+        let obj={
+          isSelected:item.isSelected,
+          parentOID:item.parentOID,
+          sys_BusiPortalMenuOID:item.sys_BusiPortalMenuOID,
+          subpermissions:item.lresp_menu_but,
+          show:true
+        }
+        this.permissionsList.push(obj)
+        if(item.children.length>0){
+          this.dutyTable(item.children)
+       }
+      }
+      }
+
+    },
+    addList() {
+      //添加
+        let addForm={
+          sys_RESPONSIBILITYOID:'',
+          resP_NO: this.resP_NO,
+          resP_DESC_TEXT: this.resP_DESC_TEXT,
+          isSYS: this.isSYS,
+          resP_NAME: this.resP_NAME,
+          isDisable: this.isDisable,
+          viewstate: 'add',
+          editflag1:true,
+          editflag2:true,
+          editflag3:true,
+
+        }
+        // this.list.unshift(addForm) //加在表头
+        this.list.push(addForm)
+    },
+    // 编辑
+    editList(index, row){
+      this.sys_RESPONSIBILITYOID=row.sys_RESPONSIBILITYOID
+      this.getMenuTre()
+      this.getPostData()
+      this.getPostClass()
+    },
+    // 删除
+    delList(index, row){
+      if(!row.sys_RESPONSIBILITYOID){  //未保存的行
+        this.list.splice(index,1)
+        return
+      }
+      let para=[]
+      para.push(row.sys_RESPONSIBILITYOID)
+       this.$confirm('确认删除吗?', '提示', {
+          type: 'warning'
+        }).then(() => {
+          RespDel(para).then(res=>{
+            if(res.status=='SUCCESS'){
+               this.$message({
+                type: 'success',
+                message: '删除成功!'
+              });
+              this.getData();
+            }else{
+               this.$message({
+                type: 'error',
+                message: res.msg
+              });
+            }
+          })
+        }).catch(() => {          
+        });
+    },
+    // 保存
+    saveList() {
+      this.edit = false
+      let editPara=[]
+      this.list.forEach(item=>{
+        if(item.viewstate){
+          editPara.push(item)
+        }
+      })
+      this.$confirm('确认保存吗?', '提示', {
+          type: 'warning'
+        }).then(()=>{
+          RespSaveData(editPara).then(res=>{
+            if(res.status=='SUCCESS'){
+              this.$message({
+                type: 'success',
+                message: '保存成功!'
+              });
+              this.getData();
+            }
+            else{
+              this.$message({
+                type: 'error',
+                message: res.msg
+              });
+            }
+          })
+        })
+    },
+    // 输入框失去焦点
+    inputBlur(row, event, column){ 
+      let tableD = this.list;
+      tableD.forEach(function (item) {
+        item.editflag1 = false
+        item.editflag2 = false
+        item.editflag3 = false
+      });
+    },
+    // 点击单元格
+    clickCell(row, column, cell, event){ 
+      if(cell.cellIndex===1){
+         row.editflag1 = true
+      }
+      if(cell.cellIndex===2){
+         row.editflag2 = true
+      }
+      if(cell.cellIndex===5){ //备注列
+         row.editflag3 = true
+      }
+
+    },
+    // 输入框内容发生变化事件
+    textChange(index,row){ 
+      if(row.sys_RESPONSIBILITYOID){
+        row.viewstate='modify'
+        this.list[index]=row
+      }
+    },
+    // 树提交
+    submitTree() {
+      let submitTree=[]
+      let checkAllKeys=this.$refs.dutytree.getHalfCheckedKeys().concat(this.$refs.dutytree.getCheckedKeys())
+      checkAllKeys.forEach(item=>{
+        let submitobj={
+              sys_BusiPortalMenu_FK:item
+        }
+        submitTree.push(submitobj)
+      })
+      // 右边的责任复选框
+      let sys_MenuButMapInfo = [];
+      this.permissionsList.map((items) => {
+          if(items.subpermissions.length>0){
+            let But_FK=[]
+            items.subpermissions.map((item) => {
+                if (item.isSelected===true) { // 右侧选择的权限
+                  But_FK.push(item.sys_BusiPortalMenu_ButOID)
+                }
+            });
+            let obj={
+              sys_BusiPortalMenu_FK:items.sys_BusiPortalMenuOID, 
+              sys_BusiPortalMenu_But_FK:But_FK
+            }
+              sys_MenuButMapInfo.push(obj)
+          }
+      });
+      let info=[]
+      submitTree.forEach(treeItem=>{
+        sys_MenuButMapInfo.forEach(dutyItem=>{
+          if(treeItem.sys_BusiPortalMenu_FK===dutyItem.sys_BusiPortalMenu_FK){
+            treeItem.sys_BusiPortalMenu_But_FK=dutyItem.sys_BusiPortalMenu_But_FK
+          }
+        })
+      })
+      submitTree.forEach(i=>{
+        if(!i.sys_BusiPortalMenu_But_FK){
+          i.sys_BusiPortalMenu_But_FK=[]
+        }
+      })
+      let para=[]
+      let obj={}
+      obj.sys_RESPONSIBILITY_FK=this.sys_RESPONSIBILITYOID
+      obj.sys_MenuButMapInfo=submitTree
+      para.push(obj)
+       this.$confirm('确认提交吗?', '提示', {
+          type: 'warning'
+        }).then(() => {
+          RespAddMenuRespMap(para).then(res=>{
+            if(res.status=='SUCCESS'){
+              this.permissionsList=[]
+              this.getMenuTre();
+              this.$message({
+                type: 'success',
+                message: '提交成功!'
+              });
+            }else{
+               this.$message({
+                type: 'error',
+                message: res.msg
+              });
+            }
+          })
+        }).catch(() => {          
+        });
+
+    },
+    resetTree() {
+      //重置树
+      const para={ Sys_RESPONSIBILITY_FK :this.sys_RESPONSIBILITYOID}
+      this.$confirm('确认重置吗?', '提示', {
+          type: 'warning'
+        }).then(() => {
+          RespResetMenuRespMap(para).then(res=>{
+            if(res.data.data.flag==true){
+              this.$refs.dutytree.setCheckedNodes([])
+              this.permissionsList=[]
+              this.getMenuTre()
+              this.$message({
+                type: 'success',
+                message: '重置成功!'
+              });
+            }else{
+               this.$message({
+                type: 'error',
+                message: '重置失败!'
+              });
+            }
+          })
+        }).catch(() => {});
+    },
+    // 选择岗位
+    chooseWork() {
+      this.chooselist=[]
+      this.PostTree() 
+      this.dialogWorkVisible = true
+    },
+    // 选择岗位分类
+    chooseWorkClass() {
+      this.chooselist=[]
+      this.PostClassTree() 
+      this.dialogWorkVisibleClass = true
+    },
+    // 删除岗位
+    delWork(){
+      this.$confirm('确认删除吗?', '提示', {
+          type: 'warning'
+        }).then(() => {
+          DelRespPost(this.rowData).then(res=>{
+            if(res.status==='SUCCESS'){
+               this.$message({
+                type: 'success',
+                message: '删除成功!'
+              });
+              this.getPostData()
+            }else{
+               this.$message({
+                type: 'error',
+                message: res.msg
+              });
+            }
+          })
+        }).catch(() => {});
+    },
+    // 删除 岗位列表
+    delWorkClass(){
+        this.$confirm('确认删除吗?', '提示', {
+          type: 'warning'
+        }).then(() => {
+          Resp_DelRespPostClass(this.rowDataClass).then(res=>{
+            if(res.status==='SUCCESS'){
+               this.$message({
+                type: 'success',
+                message: '删除成功!'
+              });
+          this.getPostClass()
+            }else{
+               this.$message({
+                type: 'error',
+                message: res.msg
+              });
+            }
+          })
+        }).catch(() => {});
+    },
+    // 获取岗位设置 选择的树
+    PostTree(){
+       PostTreeChoose().then(res=>{
+         if(res.data.status==='SUCCESS'){
+          this.workData=res.data.data
+         }
+      })
+    },
+    // 获取岗位分类 选择的树
+    PostClassTree(){
+      PostClass_GetTreeData().then(res=>{
+         if(res.data.status==='SUCCESS'){
+          this.workClassData=res.data.data
+         }
+      })
+    },
+    // 分页
+    handleSizeChange(val) {
+      this.page.pagesize = val
+      this.getData()
+    },
+    handleCurrentChange(val) {
+      this.page.pageindex = val
+      this.getData()
+    },
+    //点击行触发，选中或不选中复选框
+    openDetails(row) {
+      if(this.tab==='second'){
+        this.$refs.multipleTable.toggleRowSelection(row)
+      }else if(this.tab==='third'){
+        this.$refs.multipleTableClass.toggleRowSelection(row)
+      }
+    },
+    //选中列表行
+    handleSelectionChange(val) {
+      if(this.tab==='second'){
+        val.forEach(item=>{
+        this.rowData.push(item.sys_POSTN_RESP_MAPOID)
+      })
+      }
+      else if(this.tab==='third'){
+        val.forEach(item=>{
+        this.rowDataClass.push(item.sys_PostClass_RESP_MAPOID)
+      })
+      }
+    },
+    conformChoose(val){
+      let param=[]
+      if(this.tab==='second'){
+        val.forEach(item=>{
+          let obj={
+            sys_Post_FK:item.chooseID,
+            sys_RESPONSIBILITY_FK:this.sys_RESPONSIBILITYOID,
+          }
+          param.push(obj)
+        })
+        AddPost(param).then(res=>{
+          if(res.status==='SUCCESS'){
+            this.getPostData()
+            this.$message({type: 'success',message: '保存成功!'});
+            this.dialogWorkVisible = false
+          }else{
+            this.$message({type: 'error',message: res.msg});
+          }
+        })
+      }else if(this.tab==='third'){
+        val.forEach(item=>{
+          let obj={
+            sys_PostClass_FK:item.chooseID,
+            sys_RESPONSIBILITY_FK:this.sys_RESPONSIBILITYOID,
+          }
+          param.push(obj)
+        })
+        Resp_AddPostClass(param).then(res=>{
+        if(res.status==='SUCCESS'){
+          this.getPostClass()
+          this.$message({type: 'success',message: '保存成功!'});
+          this.dialogWorkVisibleClass = false
+        }else{
+          this.$message({type: 'error',message: res.msg});
+        }
+      })
+      }
+    },
+    // 菜单设置 右边选择
+    handleCheckedChangeChild(index, idxChild, isSelected) {
+        let permissionsList = this.permissionsList.map((items, indexs) => {
+            if (index == indexs) {
+                items.subpermissions.map((item, idx) => {
+                    if (idxChild == idx) {
+                        if (!isSelected) {
+                            item.isSelected = false;
+                            return item;
+                        } else {
+                            item.isSelected = true;
+                            return item;
+                        }
+                    }
+                });
+            }
+            return items;
+        });
+        this.permissionsList = permissionsList;
+     },
+     // 节点选中状态变化 右边责任可编辑状态变化
+     changeNowNode(data,obj){
+       let checked=false
+       if(obj.checkedKeys.indexOf(data.sys_BusiPortalMenuOID)>-1){
+          checked=true
+       }else{
+         checked=false
+       }
+       this.toggleCheck(data,checked)
+       this.data.map((item,index)=>{
+         let num = 0
+         item.children.map(item1=>{
+           if(!item1.isSelected)
+           {
+             num = num+1
+           }
+         })
+         if(num==item.children.length)
+          {
+            item.isSelected = false
+            this.permissionsList.forEach(items=>{
+            if(item.sys_BusiPortalMenuOID === items.sys_BusiPortalMenuOID){
+                items.isSelected=false
+            }
+          })
+          }
+       })
+     },
+     toggleCheck(data,checked){
+       data.isSelected=checked
+      //  console.log(this.permissionsList)
+       this.permissionsList.forEach(items=>{
+         if(data.sys_BusiPortalMenuOID === items.sys_BusiPortalMenuOID){
+            items.isSelected=checked
+         }
+       })
+       if(data.children.length>0){
+            data.children.forEach(item=>{
+              this.toggleCheck(item,checked)
+            })
+         }
+       
+     },
+    // 收缩树节点
+    nodeCollapse(obj,node,el){
+      this.toggleDuty(obj,false)
+    },
+    // 展开树节点
+    nodeExpand(obj,node,el){
+      this.toggleDuty(obj,true)
+    },
+    toggleDuty(obj,data){
+      obj.children.forEach(item=>{
+        this.permissionsList.forEach(el=>{
+          if(item.sys_BusiPortalMenuOID===el.sys_BusiPortalMenuOID){
+            el.show=data
+          }
+        })
+        if(item.children.length>0){
+          this.toggleDuty(item.children,data)
+        }else{
+          this.permissionsList.forEach(ele=>{
+          if(item.children.sys_BusiPortalMenuOID===ele.sys_BusiPortalMenuOID){
+            el.show=data
+          }
+        })
+        }
+      })
+    },
+    // 关闭弹窗
+    emitClose(){
+      if(this.tab==='second'){
+        this.dialogWorkVisible=false
+      }else if(this.tab==='third'){
+        this.dialogWorkVisibleClass=false
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+.switchStyle .el-switch__label {
+  position: absolute;
+  display: none;
+  color: #fff;
+}
+.switchStyle .el-switch__label--left {
+  z-index: 9;
+  left: 19px;
+}
+.switchStyle .el-switch__label--right {
+  z-index: 9;
+  left: -3px;
+}
+.switchStyle .el-switch__label.is-active {
+  display: block;
+}
+.switchStyle .el-switch .el-switch__core,
+.el-switch .el-switch__label {
+  width: 50px !important;
+}
+.switchStyle .el-switch__label * {
+  line-height: 1;
+  font-size: 6px;
+  display: inline-block;
+}
+.Menu_Authorization {
+  border-radius: 6px;
+  background: #fff;
+  box-shadow: 1px 1px 3px rgba(0,0,0,.2)
+}
+.Menu_Authorization .pagination{
+      padding-top: 20px; 
+      padding-bottom: 20px;
+      bottom: 3%;
+      left: 45%;
+      /* transform: translate(-50%); */
+      position: fixed;
+  }
+.Menu_Authorization .el-dialog__body {
+  padding-top: 8px;
+  padding-bottom: 30px;
+}
+.Menu_Authorization .el-scrollbar__wrap {
+  overflow-x: hidden;
+}
+.Menu_Authorization .page-scroll {
+  height: 100%;
+}
+.child-item {
+        display: inline-block;
+        height: 26px;
+        margin-right: 2%
+        
+    }
+    .child-item1 {
+        height: 26px;
+        
+    }
+</style>
+
+

src/components/authorizationManage/Menu_Personnel.vue

+<template>
+<!-- 人员菜单 -->
+    <div class="Menu_Personnel" style="height: 100%;">
+        <el-row :gutter="10" style="height: 100%;">
+            <el-col :span="6" style="height: 100%;">
+              <el-scrollbar style="height: 100%;">
+                <div class="grid-content" style="min-width:360px" >
+                    <div class="content-title">组织机构</div>
+                    <el-button type="primary" @click="MenuAuthorization" size="small">菜单授权</el-button>
+                    <el-tree :expand-on-click-node="false" :data="dataTree" :props="defaultProps"  @node-click="handleNodeClick" >
+                        <span slot-scope="{ node, data }">
+                            <i :class="data.icon" style="color:#1E90FF"></i>
+                            <span style="padding-left: 4px;">{{node.label}}</span>
+                        </span>
+                    </el-tree>
+                </div>
+              </el-scrollbar>
+            </el-col>
+            <el-col :span="18" style="height: 100%;">
+                <div class="grid-content">
+                    <!-- 右侧表格 -->
+                    <el-table :data="dataTable" tooltip-effect="dark" style="width: 100%" highlight-current-row @row-click="rowClick" :cell-style="cellStyle" :header-cell-style="rowClass">
+                        <el-table-column type="index" label="序号"></el-table-column>
+                        <el-table-column prop="coN_EMP_NUM" label="编号" ></el-table-column>
+                        <el-table-column prop="employeeName" label="姓名"></el-table-column>
+                        <el-table-column prop="postName" label="岗位" ></el-table-column>
+                        <el-table-column prop="usR_LOGIN" label="登录账号" ></el-table-column>
+                        <el-table-column prop="status" label="状态"  :formatter="formatStatus"></el-table-column>
+                    </el-table>
+                </div>
+            </el-col>
+        </el-row>
+
+        <!-- 菜单授权弹窗 -->
+        <el-dialog :visible.sync="dialogVisible" title="菜单授权" width="100%">
+            <el-row>
+            <el-col :span="8">
+              <el-tree v-loading="loading" :data="gridData" show-checkbox ref="dutytree" node-key="sys_BusiPortalMenuOID" :default-expanded-keys="setChecked" :props="defaultProps" @node-collapse="nodeCollapse" @node-expand="nodeExpand" @check="changeNowNode"></el-tree>
+            </el-col>
+            <el-col :span="16" style="padding-top: 3px;">
+              <div class="grid-content1 bg-purple-dark">
+                <div v-for="(items,index) in permissionsList" :key="index">
+                  <div v-if="items.subpermissions.length>0" v-show="items.show">
+                      <div v-for="(item,idx) in items.subpermissions" class="child-item" :key="idx">
+                        <el-checkbox :disabled="!items.isSelected" @change="handleCheckedChangeChild(index,idx,item.isSelected)" v-model="item.isSelected" :active-text="item.name">{{item.name}}
+                        </el-checkbox>
+                    </div>
+                  </div>
+                  <div v-else class="child-item1" v-show="items.show">
+                  </div>
+                </div>   
+              </div>
+            </el-col>
+          </el-row>
+          <div style="text-align: right;">
+            <el-button type="primary" @click="submitTree" size="small">提交</el-button>
+            <el-button @click="resetTree" size="small">重置</el-button>
+          </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { getOrgTree, getTableData, GetUserMenuTree,RestUserMenuResp,AddUserMenu } from "../../api/api";
+export default {
+    data() {
+        return {
+            tableData:[],
+            dataTree: [],
+            loading:false,
+            oid: "",
+            totalCount: 0,
+            page: 1,
+            pageSize: 10,
+            defaultProps: {
+                children: "children",
+                label: "name"
+            },
+            dataTable: [],
+            Sys_User_FK: '',
+            gridData: [],
+            dialogVisible: false,
+            setChecked:[],
+            permissionsList:[],
+
+
+        }
+    },
+    watch: {
+      dialogVisible(val){
+        if(val===false){
+          this.gridData=[]
+          this.permissionsList=[]
+        }
+      },
+    },
+        mounted() {
+        this.init();
+    },
+    methods: {
+        // 获取组织机构管理数据树
+        init() {
+            getOrgTree().then((res) => {
+                this.dataTree = res.data.data
+                this.oid = this.dataTree[0].oid
+                if (this.oid) {
+                    this.getTable()
+                }
+            })
+        },
+        getTable() {
+            const para = { sys_DivisionOID: this.oid, pageNumber: this.page, pageSize: this.pageSize }
+            getTableData(para).then((res) => {
+                this.totalCount = res.data.data.totalCount
+                this.dataTable = res.data.data.data
+            });
+        },
+        //状态显示转换
+        formatStatus: function(row, column) {
+            return row.status == true ? "有效" : row.sex == false ? "无效" : "未知"
+        },
+        // 表格内容居中
+        cellStyle({ row, column, rowIndex, columnIndex }) {
+            return "text-align:center"
+        },
+        rowClass({ row, rowIndex }) {
+            return "text-align:center"
+        },
+        // 菜单授权按钮
+        MenuAuthorization() {
+          if(this.Sys_User_FK===''){
+            this.$message.error('请先选择需要授权的人员')
+            return
+          }
+            this.loading=true
+            this.setChecked=[]
+            const para = { Sys_User_FK: this.Sys_User_FK }
+            let _this=this
+            GetUserMenuTree(para).then((res) => {
+              if(res.status==='SUCCESS'){
+                _this.gridData = res.data
+                _this.selectNodes(_this.gridData)
+                _this.dutyTable(_this.gridData)
+                _this.rendertoggleDuty(_this.gridData)
+                // console.log(_this.setChecked)
+                _this.$nextTick(() => {
+                    _this.$refs.dutytree.setCheckedKeys(_this.setChecked)
+                })
+              }else{
+                this.$message.error(res.msg);
+              }
+                _this.dialogVisible = true
+                this.loading=false
+            })
+
+        },
+        // 最根级的节点 未选中 子节点的按钮隐藏
+        rendertoggleDuty(data){
+            data.forEach(item=>{
+            if(item.parentOID==="00000000-0000-0000-0000-000000000000"){ // 是
+                if(item.isSelected===false){
+                    if(item.children.length>0){
+                    item.children.forEach(it=>{
+                        this.permissionsList.forEach(el=>{
+                            if(it.sys_BusiPortalMenuOID===el.sys_BusiPortalMenuOID){
+                            el.show=it.isSelected
+                            }
+                        })
+                    })
+                    } 
+                }
+            }
+        })
+        },
+        //默认选中
+    selectNodes(data){ 
+      for (const item of data) {
+        if(item.children.length===0){//无子节点
+          if(item.isSelected==true){
+            this.setChecked.push(item.sys_BusiPortalMenuOID)
+          }
+       }else{
+         this.selectNodes(item.children)
+       }
+      }
+    },
+    // 责任
+    dutyTable(data){
+      for (const item of data) {
+        let obj={
+          isSelected:item.isSelected,
+          parentOID:item.parentOID,
+          sys_BusiPortalMenuOID:item.sys_BusiPortalMenuOID,
+          subpermissions:item.lresp_menu_but,
+          show:true
+        }
+        this.permissionsList.push(obj)
+        if(item.children.length>0){
+          this.dutyTable(item.children)
+       }
+      }
+    },
+        // 节点选中状态变化 右边责任可编辑状态变化
+     changeNowNode(data,obj){
+       let checked=false
+       if(obj.checkedKeys.indexOf(data.sys_BusiPortalMenuOID)>-1){
+          checked=true
+       }else{
+         checked=false
+       }
+       this.toggleCheck(data,checked)
+       this.gridData.map((item,index)=>{
+         let num = 0
+         item.children.map(item1=>{
+           if(!item1.isSelected)
+           {
+             num = num+1
+           }
+         })
+         if(num==item.children.length)
+          {
+            item.isSelected = false
+            this.permissionsList.forEach(items=>{
+            if(item.sys_BusiPortalMenuOID === items.sys_BusiPortalMenuOID){
+                items.isSelected=false
+            }
+          })
+          }
+       })
+
+     },
+     toggleCheck(data,checked){
+       data.isSelected=checked
+      //  console.log(this.permissionsList)
+       this.permissionsList.forEach(items=>{
+         if(data.sys_BusiPortalMenuOID === items.sys_BusiPortalMenuOID){
+            items.isSelected=checked
+         }
+       })
+       if(data.children.length>0){
+            data.children.forEach(item=>{
+              this.toggleCheck(item,checked)
+            })
+         }
+       
+     },
+        // 收缩树节点
+    nodeCollapse(obj,node,el){
+      this.toggleDuty(obj,false)
+    },
+    // 展开树节点
+    nodeExpand(obj,node,el){
+      this.toggleDuty(obj,true)
+    },
+    toggleDuty(obj,data){
+      obj.children.forEach(item=>{
+        this.permissionsList.forEach(el=>{
+          if(item.sys_BusiPortalMenuOID===el.sys_BusiPortalMenuOID){
+            // el.show=!el.show
+            el.show=data
+          }
+        })
+        
+        if(item.children.length>0){
+          this.toggleDuty(item.children,data)
+        }else{
+          this.permissionsList.forEach(ele=>{
+          if(item.children.sys_BusiPortalMenuOID===ele.sys_BusiPortalMenuOID){
+            // ele.show=!ele.show
+            el.show=data
+
+          }
+        })
+        }
+      })
+    },
+    // 菜单设置 右边选择
+    handleCheckedChangeChild(index, idxChild, isSelected) {
+        let permissionsList = this.permissionsList.map((items, indexs) => {
+            if (index == indexs) {
+                items.subpermissions.map((item, idx) => {
+                    if (idxChild == idx) {
+                        if (!isSelected) {
+                            item.isSelected = false;
+                            return item;
+                        } else {
+                            item.isSelected = true;
+                            return item;
+                        }
+                    }
+                });
+            }
+            return items;
+        });
+        this.permissionsList = permissionsList;
+     },
+     // 树提交
+    submitTree() {
+      let submitTree=[]
+      let checkAllKeys=this.$refs.dutytree.getHalfCheckedKeys().concat(this.$refs.dutytree.getCheckedKeys())
+      checkAllKeys.forEach(item=>{
+        let submitobj={
+            // sys_RESPONSIBILITY_FK:this.sys_RESPONSIBILITYOID,
+            // sys_MenuButMapInfo:{
+            //   sys_BusiPortalMenu_But_FK:[],
+              sys_BusiPortalMenu_FK:item
+            // },
+        }
+        submitTree.push(submitobj)
+      })
+      // 右边的责任复选框
+      let sys_MenuButMapInfo = [];
+      this.permissionsList.map((items) => {
+          if(items.subpermissions.length>0){
+            let But_FK=[]
+            items.subpermissions.map((item) => {
+                if (item.isSelected===true) { // 右侧选择的权限
+                  But_FK.push(item.sys_BusiPortalMenu_ButOID)
+                }
+            });
+            let obj={
+              sys_BusiPortalMenu_FK:items.sys_BusiPortalMenuOID, 
+              sys_BusiPortalMenu_But_FK:But_FK
+            }
+            // if(But_FK.length>0){
+              sys_MenuButMapInfo.push(obj)
+            // }
+          }
+      });
+    //   console.log(sys_MenuButMapInfo)
+
+    //   console.log(submitTree)
+      let info=[]
+      submitTree.forEach(treeItem=>{
+        sys_MenuButMapInfo.forEach(dutyItem=>{
+          if(treeItem.sys_BusiPortalMenu_FK===dutyItem.sys_BusiPortalMenu_FK){
+            treeItem.sys_BusiPortalMenu_But_FK=dutyItem.sys_BusiPortalMenu_But_FK
+          }
+        })
+      })
+      // console.log('1111',submitTree)
+      submitTree.forEach(i=>{
+        if(!i.sys_BusiPortalMenu_But_FK){
+          i.sys_BusiPortalMenu_But_FK=[]
+        }
+      })
+      // let para=[]
+      let obj={}
+      obj.sys_User_FK=this.Sys_User_FK
+      obj.sys_MenuButMapInfo=submitTree
+      // para.push(obj)
+    //   console.log(obj)
+       this.$confirm('确认提交吗?', '提示', {
+          type: 'warning'
+        }).then(() => {
+          AddUserMenu(obj).then(res=>{
+            if(res.status=='SUCCESS'){
+              this.permissionsList=[]
+              this.MenuAuthorization();
+              this.$message({
+                type: 'success',
+                message: '提交成功!'
+              });
+            }else{
+               this.$message({
+                type: 'error',
+                message: res.msg
+              });
+            }
+          })
+        }).catch(() => {          
+        });
+
+    },
+    resetTree() {
+      //重置树
+      const para={ Sys_User_FK :this.Sys_User_FK}
+      this.$confirm('确认重置吗?', '提示', {
+          type: 'warning'
+        }).then(() => {
+          RestUserMenuResp(para).then(res=>{
+            if(res.data.status=='SUCCESS'){
+            this.$refs.dutytree.setCheckedNodes([])
+              this.permissionsList=[]
+              this.MenuAuthorization()
+              this.$message({
+                type: 'success',
+                message: res.data.data
+              });
+            }else{
+               this.$message({
+                type: 'error',
+                message: res.data.data
+              });
+            }
+          })
+        }).catch(() => {          
+        });
+    },
+        //分页
+        handleSizeChange(val) {
+            this.pageSize = val
+            this.init()
+        },
+        handleCurrentChange(val) {
+            this.page = val
+            this.init()
+        },
+        rowClick(val) {
+            this.Sys_User_FK = val.sys_UserOID
+        },
+        handleNodeClick(val) {
+            this.oid = val.oid
+            this.getTable()
+        },
+    },
+
+    
+
+}
+</script>
+
+<style scoped>
+.child-item {
+        display: inline-block;
+        height: 26px;
+        margin-right: 2%
+        
+}
+.child-item1 {
+    height: 26px;
+    
+}
+.Menu_Personnel .grid-content {
+    border-radius: 6px;
+    padding: 20px;
+    padding-bottom: 13px;
+    height: 95%;
+    background: #fff;
+    box-shadow: 1px 1px 3px rgba(0,0,0,.2);
+}
+.content-title{
+    display:block;
+    font-size: 16px;
+    margin-bottom: 13px;
+    border-bottom: 1px solid #eee;
+    color:#676a6c;
+    padding: 0px 7px 8px 11px;
+}
+</style>
+
+ 
\ No newline at end of file

src/components/authorizationManage/Menu_Registration.vue

+<template>
+<!-- 菜单注册 -->
+    <div class="Menu_Registration" style="height: 100%;">
+        <!-- 顶部按钮组 -->
+        <el-row :span='24' style="padding-left: 10px;padding-top: 10px;">
+            <el-button type="primary" size="small" @click="handleAdd" >添加根菜单</el-button>
+        </el-row>
+        <!-- 表格展示 -->
+        <el-row>
+            <el-col :span='24' style="padding-left: 10px;">
+                <el-table highlight-current-row ref="tableData" :row-style="showRow" :data="tableData" :slot-scope="scope" :row-key="tableData.sys_BusiPortalMenuOID" v-bind="$attrs" style="width:100%;margin-bottom: 20px;margin:0 auto;font-size:0.75rem">
+                    <el-table-column type="index" label="序号"></el-table-column>
+                    <el-table-column prop="name" label="菜单名称" type="string expand">
+                        <template slot-scope="scope">
+                            <div @click="openToggle(scope.row)">
+                                <span :class="['leves'+scope.row.leves]">
+                                    <i v-if="scope.row.children.length > 0" :class="[scope.row.open?'fa fa-chevron-down':'fa fa-chevron-right']"></i>         
+                                </span>{{scope.row.name}}
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="linkBusiType" label="业务类型" :formatter="formatLinkBusiType" type="integer"></el-table-column>
+                    <el-table-column prop="route" label="地址" type="string"></el-table-column>
+                    <el-table-column prop="sortNo" label="排序号" type="integer"></el-table-column>
+                    <el-table-column prop="openMode" label="打开方式" :formatter="formatOpenMode" type="integer"></el-table-column>
+                    <el-table-column prop="isStopUsing" label="使用状态" type="boolean">
+                        <template slot-scope="scope">
+                            <el-switch v-model="scope.row.isStopUsing" class="switchStyle" :width="50" active-color="#DCDFE6" inactive-color="#409EFF"  active-text="禁用" inactive-text="启用" disabled></el-switch>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="220">
+                        <template slot-scope="scope">
+                            <el-button type="primary" size="small" @click="addMenuChild(scope.$index, scope.row)" >添加子菜单</el-button>
+                            <el-button type="primary" size="small" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" ></el-button>
+                            <el-button type="primary" size="small" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)" ></el-button>
+                        </template>
+                    </el-table-column>   
+                </el-table>
+            </el-col>
+        </el-row>
+        <!--新增子界面-->
+        <el-dialog title="添加子菜单" :visible.sync="addMenuFormVisible" :close-on-click-modal="false" @close="closetDialog" :rules="rules">
+            <el-form ref="addMenuForm" :model="addMenuForm" label-width="100px" :rules="rules" >
+                <el-form-item label="子菜单名称" prop="name" required>
+                    <el-input v-model="addMenuForm.name" auto-complete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="业务类型" prop="linkBusiType">
+                    <el-select v-model="addMenuForm.linkBusiType" placeholder="请选择">
+                        <el-option v-for="item in linkBusiType" :key="item.value" :label="item.label" :value="item.value">
+                            <span>{{ item.label }}</span>
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="地址" prop="route">
+                    <el-input v-model="addMenuForm.route" :min="0" :max="200" auto-complete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="菜单图标" prop="imageLink">
+                    <el-input v-model="addMenuForm.imageLink" auto-complete="off" ></el-input>
+                </el-form-item>
+                <el-form-item label="参数" prop="param">
+                    <el-input v-model="addMenuForm.param" auto-complete="off" ></el-input>
+                </el-form-item>
+                <el-form-item label="排序号" prop="sortNo">
+                    <el-input-number v-model.number="addMenuForm.sortNo" :step="10"></el-input-number>
+                </el-form-item>
+                <el-form-item label="打开方式" prop="openMode">
+                    <el-select v-model="addMenuForm.openMode" placeholder="请选择">
+                    <el-option v-for="item in openMode" :key="item.value" :label="item.label" :value="item.value">
+                        <span>{{ item.label }}</span>
+                    </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="状态" prop="isStopUsing">
+                    <el-switch class="switchStyle" :width="50" v-model="addMenuForm.isStopUsing" :active-value="false" :inactive-value="true" inactive-color="#DCDFE6" active-color="#409EFF" inactive-text="停用" active-text="启用"></el-switch>
+                </el-form-item>    
+                <el-form-item>  
+                    <el-button size="small" @click.native="addMenuFormVisible = false" @click="closetMenuDialog">取消</el-button>
+                    <el-button type="primary" :loading="addMenuLoading"  size="small" @click="addMenuSubmit('addMenuForm')">提交</el-button>
+                </el-form-item>  
+            </el-form>
+        </el-dialog>
+        <!--新增根界面-->
+        <el-dialog title="添加根菜单" :visible.sync="addFormVisible" :close-on-click-modal="false" @close="closetDialog">
+            <el-form ref="addForm" :model="addForm" label-width="80px" :rules="rules" >
+                <el-form-item label="菜单名称" prop="name"  >
+                    <el-input v-model="addForm.name" auto-complete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="业务类型" prop="linkBusiType">
+                    <el-select v-model="addForm.linkBusiType" placeholder="请选择">
+                        <el-option v-for="item in linkBusiType" :key="item.value" :label="item.label" :value="item.value">
+                            <span>{{ item.label }}</span>
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="地址" prop="route">
+                    <el-input v-model="addForm.route" :min="0" :max="200" auto-complete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="菜单图标" prop="imageLink">
+                    <el-input v-model="addForm.imageLink" auto-complete="off" ></el-input>
+                </el-form-item>
+                <el-form-item label="参数" prop="param">
+                    <el-input v-model="addForm.param" auto-complete="off" ></el-input>
+                </el-form-item>
+                <el-form-item label="排序号" prop="sortNo">
+                    <el-input-number v-model="addForm.sortNo" :step="10"></el-input-number>
+                </el-form-item>
+                <el-form-item label="打开方式" prop="openMode">
+                    <el-select v-model="addForm.openMode" placeholder="请选择">
+                        <el-option v-for="item in openMode" :key="item.value" :label="item.label" :value="item.value">
+                            <span>{{ item.label }}</span>
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="状态" prop="isStopUsing">
+                    <el-switch class="switchStyle" :width="50" v-model="addForm.isStopUsing" inactive-color="#DCDFE6" active-color="#409EFF" inactive-text="停用" active-text="启用" :active-value="false" :inactive-value="true"></el-switch>
+                </el-form-item>
+                <el-form-item>
+                    <el-button size="small" @click.native="addFormVisible = false" @click="closetDialog">取消</el-button>
+                    <el-button type="primary" :loading="addLoading"  size="small" @click="addSubmit('addForm')">提交</el-button>
+                </el-form-item>
+            </el-form> 
+        </el-dialog>
+        <!--编辑界面-->
+        <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
+            <el-form ref="editForm" :model="editForm" label-width="100px" :rules="rules">
+            <el-form-item label="菜单名称" prop="name">
+                <el-input v-model="editForm.name" auto-complete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="业务类型" prop="linkBusiType">
+                <el-select v-model="editForm.linkBusiType" placeholder="请选择">
+                    <el-option v-for="item in linkBusiType" :key="item.value" :label="item.label" :value="item.value">
+                        <span>{{ item.label }}</span>
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="地址" prop="route">
+                <el-input v-model="editForm.route" :min="0" :max="200" auto-complete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="菜单图标" prop="imageLink">
+                <el-input v-model="editForm.imageLink" auto-complete="off" ></el-input>
+            </el-form-item>
+            <el-form-item label="参数" prop="param">
+                <el-input v-model="editForm.param" auto-complete="off" ></el-input>
+            </el-form-item>
+            <el-form-item label="排序号" prop="sortNo">
+                <el-input-number v-model="editForm.sortNo" :step="10"></el-input-number>
+            </el-form-item>
+            <el-form-item label="按钮定义">
+                <div class="btn-row">
+                    <div v-for="item of ButtonsData" :key="item.sys_ButResourceOID">
+                        <el-button round class="btn" @click="handleButtonEdit(item)">{{item.name}}</el-button>
+                        <i class="el-icon-circle-close del" @click="handleButtonDele(item)"></i>
+                    </div>
+                </div>
+                <el-button type="primary" plain @click="setButton()">新建按钮</el-button>
+            </el-form-item>
+            <el-form-item label="打开方式" prop="openMode">
+                <el-select v-model="editForm.openMode" placeholder="请选择">
+                    <el-option v-for="item in openMode" :key="item.value" :label="item.label" :value="item.value">
+                        <span>{{ item.label }}</span>
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="状态" prop="isStopUsing">
+                <el-switch class="switchStyle" :width="50" v-model.number="editForm.isStopUsing" inactive-color="#409EFF" active-color="#DCDFE6" active-text="停用" inactive-text="启用"></el-switch>
+            </el-form-item>
+            <el-form-item>
+                    <el-button size="small" @click="editFormVisible = false">取消</el-button>
+                    <el-button type="primary" :loading="addLoading"  size="small" @click="editSave('editForm')">提交</el-button>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+        <!-- 右侧按钮定义 -->
+        <el-drawer title="按钮定义" :visible.sync="setButtonVisible" size='20%' :direction="direction" :before-close="handleClose2">
+            <el-form :label-position="labelPosition" ref="ButtonData" :model="ButtonDataArr" label-width="120px">
+                <el-form-item label="按钮名称" prop="name">
+                    <el-select v-model="ButtonDataArr.name" allow-create filterable placeholder="请选择" @change="selectChange(ButtonDataArr.name)">
+                        <el-option v-for="item in ButtonData" :key="item.sys_ButResourceOID" :label="item.name" :value="item.name"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="样式图标" prop="iconClass">
+                    <i class="iconfont" :class="ButtonDataArr.iconClass" :model="ButtonDataArr.iconClass" @click="clickIcon(ButtonDataArr.iconClass)"></i>
+                </el-form-item>
+                <el-form-item label="尺寸">
+                    <el-select v-model="ButtonDataArr.size" placeholder="请选择">
+                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="类型">
+                    <el-select v-model="ButtonDataArr.busType" placeholder="请选择">
+                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="是否朴素按钮" prop="plain">
+                    <el-switch class="switchStyle" :width="50" v-model="ButtonDataArr.plain" active-color="#409EFF" inactive-color="#DCDFE6" active-text="启用" inactive-text="停用"></el-switch>
+                </el-form-item>
+                <el-form-item label="是否圆角按钮" prop="round">
+                    <el-switch class="switchStyle" :width="50" v-model="ButtonDataArr.round" active-color="#409EFF" inactive-color="#DCDFE6" active-text="启用" inactive-text="停用"></el-switch>
+                </el-form-item>
+                <el-form-item label="是否圆形按钮" prop="circle">
+                    <el-switch class="switchStyle" :width="50" v-model="ButtonDataArr.circle" active-color="#409EFF"  inactive-color="#DCDFE6" active-text="启用" inactive-text="停用"></el-switch>
+                </el-form-item>
+                <el-form-item label="是否加载中状态" prop="loading">
+                    <el-switch class="switchStyle" :width="50" v-model="ButtonDataArr.loading" active-color="#409EFF"  inactive-color="#DCDFE6" active-text="启用" inactive-text="停用"></el-switch>
+                </el-form-item>
+                <el-form-item label="是否禁用状态" prop="disabled">
+                    <el-switch class="switchStyle" :width="50" v-model="ButtonDataArr.disabled" active-color="#409EFF"  inactive-color="#DCDFE6" active-text="启用" inactive-text="停用"></el-switch>
+                </el-form-item>
+                <el-form-item label="原生Type类型">
+                    <el-select v-model="ButtonDataArr.nativeType" placeholder="请选择">
+                        <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="排序号" prop="sortNo">
+                    <el-input-number v-model="ButtonDataArr.sortNo" :step="10"></el-input-number>
+                </el-form-item>
+                <el-form-item label="执行方法" prop="butMethod">
+                   <el-input v-model="ButtonDataArr.butMethod" style="width：80%"></el-input>
+                </el-form-item>
+            </el-form>
+            <div style="margin-left: 40px;">
+                <el-button size="small" type="primary" @click="closeDrawer()">保存</el-button>
+            </div>
+        </el-drawer>
+        <!-- 右侧抽屉 -->
+        <el-drawer title="样式图标" custom-class='iconDrawer' :visible.sync="drawer" size='20%' :direction="direction" :before-close="handleClose">
+            <div class="icons">
+                <i class="iconfont iconfonts" :class="item" v-for="item of iconList" :key="item" @click="iconSelected(item)"></i>
+            </div>
+        </el-drawer>
+    </div>
+</template>
+
+<script>
+import { GetAutoGuid, getMenuList, addPaperType, deleteMenu, GetButResourceData, SaveBusiPortalMenuBut, GetButDataByMenu, DeleteBut } from "../../api/api"
+import Vue from "vue"
+export default {
+    data() {
+        return {
+            labelPosition: "right",
+            setButtonVisible: false,
+            drawer: false,
+            tempid: '',
+            ButtonsData: [],
+            direction: 'rtl',
+            Guid: '',
+            options1: [
+                { value: "mini", label: "mini" },
+                { value: "small", label: "small" },
+                { value: "medium", label: "medium" }
+            ],
+            options2: [
+                { value: "primary", label: "primary" },
+                { value: "success", label: "success" },
+                { value: "warning", label: "warning" },
+                { value: "danger", label: "danger" },
+                { value: "info", label: "info" },
+                { value: "text", label: "text" }
+            ],
+            options3: [
+                { value: "button", label: "button" },
+                { value: "submit", label: "submit" },
+                { value: "reset", label: "reset" }
+            ],
+            iconList: [ 'elicon-all-bumen2', 'elicon-all-renyuanjieshao', 'elicon-all-renyuandingwei', 'elicon-all-renyuanxiaozu', 'elicon-all-bumen4', 'elicon-all-commpany', 'elicon-all-icon', 'elicon-all-qunfengxiugaiweihurenyuan', 'elicon-all-13qinshugongzuodanwei', 'elicon-all-dudanwei', 'elicon-all-laiwangdanweipingtai', 'elicon-all-bumen5', 'elicon-all-bumen6',    'elicon-all-bumen7', 'elicon-all-renyuanzhanghao', 'elicon-all-zhuanyetuandui', 'elicon-all-qiyerenyuanguanli', 'elicon-all-renyuanguanli', 'elicon-all-bumenguanli', 'elicon-all-icon-account', 'elicon-all-icon-add-person', 'elicon-all-suyaniconchanpinleibufenzuodaohangbufen87', 'elicon-all-renyuanxinxi-copy',   'elicon-all-yusuandanwei', 'elicon-all-xianchangrenyuan', 'elicon-all-xunjianrenyuan', 'elicon-all-iconbmgl', 'elicon-all-untitled85', 'elicon-all-untitled18',  'elicon-all-ceshi', 'elicon-all-jiguanshiyezhanghuchuli', 'elicon-all-renyuanhebing', 'elicon-all-xunjianrenyuan1', 'elicon-all-bumen', 'elicon-all-renyuanjieshao1', 'elicon-all-loufang', 'elicon-all-shigongdanwei', 'elicon-all-shigongdanweisel', 'elicon-all-guanlidanwei', 'elicon-all-renren1', 'elicon-all-renyuan', 'elicon-all-gangweiqiehuan', 'elicon-all-renyuanquanxian', 'elicon-all-wtsy', 'elicon-all-bumen9', 'elicon-all-25_danwei', 'elicon-all-yewurenyuanxinxiguanli', 'elicon-all-wtOrg', 'elicon-all-minzhengxinxi-canjirenyuan', 'elicon-all-minzhengxinxi-dibaorenyuan',  'elicon-all-minzhengxinxi-jingwairenyuan', 'elicon-all-minzhengxinxi-xiagangrenyuan', 'elicon-all-minzhengxinxi-kunnanrenyuan', 'elicon-all-minzhengxinxi-shiyerenyuan', 'elicon-all-renyuanleixing-gongsizhiyuan', 'elicon-all-renyuanleixing-changzhurenyuan', 'elicon-all-renyuanleixing-liudongrenyuan', 'elicon-all-renyuanzhuangtai-daishen', 'elicon-all-renyuanzhuangtai-shixiao', 'elicon-all-renyuanzhuangtai-banli', 'elicon-all-renyuanzhuangtai-zhengchang', 'elicon-all-renyuanzhuangtai-yigu', 'elicon-all-zhongdianrenyuan-jingshenbing', 'elicon-all-zhongdianrenyuan-shangfangrenyuan', 'elicon-all-zhongdianrenyuan-shedurenyuan', 'elicon-all-zhongdianrenyuan-shewenrenyuan', 'elicon-all-zhongdianrenyuan-shekongrenyuan', 'elicon-all-zhongdianrenyuan-zhongdaxingshiqiankerenyuan', 'elicon-all-zhongdianrenyuan-zaitaorenyuan', 'elicon-all-wuliaodanwei', 'elicon-all-jiuyuanrenyuan', 'elicon-all-qiujiurenyuan', 'elicon-all-biaoshilei_paibanrenyuan',  'elicon-all-web-icon-', 'elicon-all-renyuansousuo', 'elicon-all-renyuanzengjia', 'elicon-all-gangweiquanxian', 'elicon-all-bumenguanli1', 'elicon-all-renyuanliebiao', 'elicon-all-staff', 'elicon-all-measurementunit', 'elicon-all-RMB', 'elicon-all-bumenguanli2', 'elicon-all-renyuanliyongshuai', 'elicon-all-renyuandanganguanli', 'elicon-all-renyuanlianjietianjia', 'elicon-all-renyuanjietinglianjietianjia', 'elicon-all-renyuanlianjietianjia1', 'elicon-all-renyuantianjia', 'elicon-all-staff1', 'elicon-all-bumen10', 'elicon-all-ERP_danwei', 'elicon-all-wanglaidanwei',  'elicon-all-shuilihangyedanwei', 'elicon-all-shuilishiyedanwei', 'elicon-all-xiangzhenshuiliguanlidanwei', 'elicon-all-shiyedanwei', 'elicon-all-danweishouquan', 'elicon-all-structuremanage', 'elicon-all-bumen-', 'elicon-all-ERP_gonghuodanwei', 'elicon-all-fl-renyuan', 'elicon-all-renyuanbiandongfenxi', 'elicon-all-danweishushouqi', 'elicon-all-danweiguanli', 'elicon-all-danweishuzhankai', 'elicon-all-renyuanxinxi', 'elicon-all-xinzengdanwei', 'elicon-all-bumen11', 'elicon-all-renyuanguanli1', 'elicon-all-shigongrenyuan', 'elicon-all-gangweishenqing', 'elicon-all-qishiyedanweitiaocha', 'elicon-all-bumen12', 'elicon-all-renyuanbanciguanli', 'elicon-all-renyuandangan', 'elicon-all-renyuanjiankong', 'elicon-all-renyuanleixing', 'elicon-all-renyuanpaiban', 'elicon-all-renyuanguanli2', 'elicon-all-xunjianchulirenyuan', 'elicon-all-zuoyedanwei', 'elicon-all-bumen13', 'elicon-all-caifang-weituodanwei', 'elicon-all-caifang-danweilianxirendianhua', 'elicon-all-caifang-renyuan',  'elicon-all-renyuanguanli3', 'elicon-all-renyuanxinxi1', 'elicon-all-drxx63', 'elicon-all-drxx45', 'elicon-all-drxx36', 'elicon-all-drxx34', 'elicon-all-drxx27', 'elicon-all-drxx24', 'elicon-all-drxx12', 'elicon-all-drxx91', 'elicon-all-drxx106', 'elicon-all-yunweirenyuan', 'elicon-all-xiashudanweiguanli', 'elicon-all-navicon-bmda', 'elicon-all-navicon-jldwsz', 'elicon-all-navicon-jldwz', 'elicon-all-zhifarenyuan', 'elicon-all-navicon-jldw', 'elicon-all-yihurenyuan', 'elicon-all-tree-round-people', 'elicon-all-tree-round-key-person', 'elicon-all-kefurenyuan', 'elicon-all-renyuan1', 'elicon-all-danwei1', 'elicon-all-dabianrenyuanfengong', 'elicon-all-yiwurenyuan', 'elicon-all-nb-', 'elicon-all-renyuanzuguanli', 'elicon-all-danweigongchengzhiliangjianyanjilu', 'elicon-all-shangpinbaozhuangdanwei', 'elicon-all-renyuandongtaifenbu', 'elicon-all-renyuandongtaizhuizong', 'elicon-all-shilianrenyuan', 'elicon-all-fujinrenyuanfenbu', 'elicon-all-renyuanjujiyujing', 'elicon-all-renyuanchaochubianjie', 'elicon-all-renyuanyidongyujing', 'elicon-all-renyuandengji', 'elicon-all-danweigongchengzhiliangjianyanjilu1', 'elicon-all-bumenguanli3', 'elicon-all-bumen14', 'elicon-all-jianzhujirenyuananquan', 'elicon-all-renyuan2', 'elicon-all-rrenyuanguanli-', 'elicon-all-xidurenyuanfenxi', 'elicon-all-Invitation-to-external-personnel', 'elicon-all-unit', 'elicon-all-zixunrenyuan', 'elicon-all-renyuankaoqin-copy-copy', 'elicon-all-guanlirenyuan', 'elicon-all-bumen15', 'elicon-all-jianzhuanquan', 'elicon-all-gangweiguanli', 'elicon-all-renyuan-shi', 'elicon-all-renyuan-kong', 'elicon-all-renyuanzu-shi', 'elicon-all-renyuanzu-kong', 'elicon-all-xinzengrenyuan-shi',  'elicon-all-xinzengrenyuan-kong', 'elicon-all-bumen1', 'elicon-all-huaban', 'elicon-all-post', 'elicon-all-bumenguanli_h', 'elicon-all-xiaoshourenyuanguanli', 'elicon-all-icon1', 'elicon-all-icon-test', 'elicon-all-renyuanguanli4', 'elicon-all-renyuanguanli5', 'elicon-all-qiyeguanli_gangweiguanli', 'elicon-all-zhuyaorenyuan', 'elicon-all-mendiangangwei_huaban', 'elicon-all-gongsidizhi', 'elicon-all-wtPost', 'elicon-all-danwei2', 'elicon-all-renyuanbaoming', 'elicon-all-yusherenyuan', 'elicon-all-wulumuqishigongandashujuguanlipingtai-ico-', 'elicon-all-wtbm', 'elicon-all-zhidingrenyuanbianji', 'elicon-all-yishenggangwei', 'elicon-all-guanjiaogangwei',  'elicon-all-ziyuanldpi', 'elicon-all-bumen18', 'elicon-all-icon-', 'elicon-all-icon-1', 'elicon-all-icon-2', 'elicon-all-icon-3', 'elicon-all-icon-4', 'elicon-all-danwei', 'elicon-all-renyuan3', 'elicon-all-renyuan4', 'elicon-all-renyuan5', 'elicon-all-renyuan6', 'elicon-all-renyuan7', 'elicon-all-renyuan8', 'elicon-all-xinzengrenyuan', 'elicon-all-erjidanweikaoqin', 'elicon-all-bumenguanli5', 'elicon-all-bumenguanli6', 'elicon-all-bumenwenjian', 'elicon-all-wj-rymc', 'elicon-all-bumenguanli7', 'elicon-all-danweizuzhi', 'elicon-all-wj-rysq', 'elicon-all-wj-ryxx', 'elicon-all-renyuanbaozhang', 'elicon-all-fuwurenyuan', 'elicon-all-shangwurenyuan', 'elicon-all-keyanrenyuan', 'elicon-all-jishurenyuan', 'elicon-all-guanlirenyuan1', 'elicon-all-bumen19', 'elicon-all-bumen20', 'elicon-all-huanweirenyuan',  'elicon-all-huanweirenyuan-s', 'elicon-all-yuangongchelianglika', 'elicon-all-yuangongcheliangjinr', 'elicon-all-danweiku', 'elicon-all-bumen21', 'elicon-all-renyuanjinchujifang', 'elicon-all-renyuan9', 'elicon-all-bumen22', 'elicon-all-peisongrenyuan', 'elicon-all-bumenguanli8', 'elicon-all-xinxidengji', 'elicon-all-bumen-moren', 'elicon-all-bumen-xuanzhong', 'elicon-all-renyuanguanli6', 'elicon-all-lianwangdanwei', 'elicon-all-renyuanxinxi2', 'elicon-all-zhuangtai', 'elicon-all-jixiaopinggu', 'elicon-all-ditu', 'elicon-all-gerenjixiao', 'elicon-all-jixiao', 'elicon-all-bumen23', 'elicon-all-bumenyongneng', 'elicon-all-bumenshezhi', 'elicon-all-gongsi', 'elicon-all-renyuanxinxi3', 'elicon-all-fangshegongzuorenyuanxinxi', 'elicon-all-renyuanguanli7', 'elicon-all-renyuanguanxi', 'elicon-all-huabanfuben', 'elicon-all-RectangleCopy', 'elicon-all-RectangleCopy1', 'elicon-all-gangweitiaodongx', 'elicon-all-xunhurenyuan', 'elicon-all-tongjidanweiguanli', 'elicon-all-lianwangdanwei1', 'elicon-all-renyuanbangding', 'elicon-all-renyuanguanli8', 'elicon-all-tianjiarenyuan', 'elicon-all-shenhetongguorenyuan', 'elicon-all-webduanmobancaozuo_renyuanxinxi', 'elicon-all-test', 'elicon-all-setup', 'elicon-all-print', 'elicon-all-lock', 'elicon-all-draw', 'elicon-all-test1', 'elicon-all-bank', 'elicon-all-notebook', 'elicon-all-calendar', 'elicon-all-notebook1', 'elicon-all-calendar1', 'elicon-all-bookmark', 'elicon-all-checklist', 'elicon-all-edit-tools', 'elicon-all-calendar2', 'elicon-all-monitor', 'elicon-all-notebook2', 'elicon-all-files-and-folders', 'elicon-all-conversation', 'elicon-all-folder', 'elicon-all-file', 'elicon-all-files-and-folders1', 'elicon-all-search', 'elicon-all-mails', 'elicon-all-telegram', 'elicon-all-app', 'elicon-all-paper-plane', 'elicon-all-talk', 'elicon-all-online-conference', 'elicon-all-group', 'elicon-all-shield', 'elicon-all-jiaobandanwei', 'elicon-all-renyuan10', 'elicon-all-bumenxinxishangbao', 'elicon-all-zhifarenyuan1', 'elicon-all-ml', 'elicon-all-renyuanjixiao', 'elicon-all-renyuan11', 'elicon-all-danwei4', 'elicon-all-danweiguanli1', 'elicon-all-bumentongbao', 'elicon-all-bumenpingyi', 'elicon-all-lituixiurenyuanxinxixiugaichaxun', 'elicon-all-renyuanchaxun', 'elicon-all-suoyourenyuan', 'elicon-all-renyuan-', 'elicon-all-kunnanshengrenyuanmingdan', 'elicon-all-chakanhuojiangrenyuanmingdan', 'elicon-all-danwei5', 'elicon-all-renyuanguanli9', 'elicon-all-gangwei', 'elicon-all-icon_danwei', 'elicon-all-danweitongxunlu', 'elicon-all-waiburenyuanchalvyudingshenpiliucheng', 'elicon-all-danwei6', 'elicon-all-renyuanguanli10', 'elicon-all-ziyuan', 'elicon-all-ziyuan1', 'elicon-all-icon_xinyong_xianxing_jijin-',  'elicon-all-renyuan12', 'elicon-all-zhongdianrenyuan', 'elicon-all-icon-GIS_renyuanjiankong', 'elicon-all-fangda', 'elicon-all-gengduo1',  'elicon-all-fenxiang', 'elicon-all-fanhui', 'elicon-all-daohang', 'elicon-all-chakan', 'elicon-all-chakanshezhi', 'elicon-all-fenlei1', 'elicon-all-erweima', 'elicon-all-gengduocaozuo', 'elicon-all-shezhi', 'elicon-all-jiajianbao', 'elicon-all-shijian1', 'elicon-all-fuzhi', 'elicon-all-jiarushijian', 'elicon-all-piliangdaochu', 'elicon-all-guanbi1', 'elicon-all-paixu', 'elicon-all-quanbudaochu', 'elicon-all-shangyi',  'elicon-all-jiarudaohang',  'elicon-all-xiayi', 'elicon-all-jiahuati', 'elicon-all-weixuan',  'elicon-all-suyuan',  'elicon-all-hulianwang', 'elicon-all-shaixuan', 'elicon-all-jianbao', 'elicon-all-tongji',  'elicon-all-bukejian1', 'elicon-all-shanchu2', 'elicon-all-yonghu',  'elicon-all-xinxijiance', 'elicon-all-zhuanti', 'elicon-all-sousuo1', 'elicon-all-xuancopy', 'elicon-all-wenhao', 'elicon-all-zhankai1', 'elicon-all-xuancopy1', 'elicon-all-yujing', 'elicon-all-you', 'elicon-all-xuancopy2', 'elicon-all-shouqi1', 'elicon-all-zhuti', 'elicon-all-rizhi', 'elicon-all-kefu',  'elicon-all-shejiaojiankong',  'elicon-all-xiugai', 'elicon-all-meitiliebiao', 'elicon-all-youxiang', 'elicon-all-qiehuan', 'elicon-all-bianji1',  'elicon-all-xitongxiaoxi', 'elicon-all-xuan', 'elicon-all-shoucang1', 'elicon-all-word', 'elicon-all-xlsx', 'elicon-all-zuo', 'elicon-all-icon-test1', 'elicon-all--', 'elicon-all-shouye1', 'elicon-all-weiye', 'elicon-all-suoxiao', 'elicon-all-tiaozhuan', 'elicon-all-x', 'elicon-all-guanzhu', 'elicon-all-pinglun', 'elicon-all-warning', 'elicon-all-zan', 'elicon-all-admin', 'elicon-all-apply', 'elicon-all-bbs', 'elicon-all-book', 'elicon-all-calendar3', 'elicon-all-chart', 'elicon-all-clock', 'elicon-all-email', 'elicon-all-false', 'elicon-all-hat', 'elicon-all-help', 'elicon-all-home', 'elicon-all-image', 'elicon-all-love', 'elicon-all-last',  'elicon-all-loseeyes', 'elicon-all-log', 'elicon-all-logo', 'elicon-all-nav', 'elicon-all-phone', 'elicon-all-safe', 'elicon-all-monitor1', 'elicon-all-radio', 'elicon-all-label', 'elicon-all-toolkit', 'elicon-all-message', 'elicon-all-password', 'elicon-all-wait', 'elicon-all-next', 'elicon-all-text', 'elicon-all-start', 'elicon-all-recycle', 'elicon-all-user', 'elicon-all-openeyes', 'elicon-all-warn', 'elicon-all-version', 'elicon-all-true', 'elicon-all-refuse',  'elicon-all-role',  'elicon-all-shuxing',  'elicon-all-users', 'elicon-all-zhankai', 'elicon-all-gerenzhongxin', 'elicon-all-chazhao', 'elicon-all-jiaoyiliushui', 'elicon-all-jiaoyiyiliushui', 'elicon-all-lishijilu',  'elicon-all-duanxintixing', 'elicon-all-tuichu',  'elicon-all-faqiqianyue', 'elicon-all-tianjia1', 'elicon-all-zhanghuchongzhi', 'elicon-all-jinyong', 'elicon-all-fangan', 'elicon-all-jiechu', 'elicon-all-bianji',  'elicon-all-qiyong', 'elicon-all-dakuanxiangqing', 'elicon-all-querendakuan', 'elicon-all-shanchu1', 'elicon-all-xiazai', 'elicon-all-moren', 'elicon-all-dakuanmingxi', 'elicon-all-chehuiqianyue', 'elicon-all-bangding', 'elicon-all-chakanxiangqing', 'elicon-all-shouqi',  'elicon-all-shouquan', 'elicon-all-dakuanyichang', 'elicon-all-tuihui', 'elicon-all-kaipiaowancheng', 'elicon-all-zhongqi', 'elicon-all-wtUser', 'elicon-all-xuyue', 'elicon-all-fankui', 'elicon-all-dingdan', 'elicon-all-gengduo', 'elicon-all-chaxun', 'elicon-all-fenlei', 'elicon-all-gouwuche', 'elicon-all-bukejian', 'elicon-all-gengxin', 'elicon-all-gongdan', 'elicon-all-dianzhan', 'elicon-all-jianjie', 'elicon-all-kejian', 'elicon-all-gonggepailie', 'elicon-all-peixunke', 'elicon-all-queren', 'elicon-all-baoming',  'elicon-all-guanbi', 'elicon-all-dianpu', 'elicon-all-shoujihao', 'elicon-all-liebiaopailie', 'elicon-all-wodedianzhan', 'elicon-all-jindu', 'elicon-all-gongkaike', 'elicon-all-jiazai', 'elicon-all-wenti', 'elicon-all-shijian', 'elicon-all-saoma', 'elicon-all-xiala', 'elicon-all-monikaoshi', 'elicon-all-luntan', 'elicon-all-shangcheng', 'elicon-all-shoucang', 'elicon-all-xihuan', 'elicon-all-xinxi', 'elicon-all-wode', 'elicon-all-zhexiantu', 'elicon-all-sousuo', 'elicon-all-yonghuming', 'elicon-all-qiandao', 'elicon-all-renzhengshenqing', 'elicon-all-shanchu', 'elicon-all-suijilianxi', 'elicon-all-xiajiantou', 'elicon-all-xueyuan', 'elicon-all-zhuzhuangtu', 'elicon-all-tianjia', 'elicon-all-zhishiku', 'elicon-all-shuaxin', 'elicon-all-hangyebiaozhun', 'elicon-all-dingwei', 'elicon-all-shangjiantou', 'elicon-all-shouye' ],
+            ButtonData: {
+                name: '',
+                sys_ButResourceOID: ''
+            },
+            ButtonDataArr: {
+                iconClass: 'elicon-all-wtsy',
+                plain: false,
+                round: false,
+                circle: false,
+                loading: false,
+                disabled: false,
+                nativeType: '',
+                sortNo: 0,
+                butMethod: ''
+            },
+            ButtonDataName: [],
+            tableData: [],
+            scope: "",
+            openMode1: 0,
+            openMode2: 1,
+            linkBusiType: [
+                { value: 0, label: "业务模块" },
+                { value: 1, label: "网址" }
+            ],
+            openMode: [
+                { value: 0, label: "框架内跳转" },
+                { value: 1, label: "打开新窗口（弹出层）" }
+            ],
+            hasChildren: "",
+            addLoading: false,
+            addFormVisible: false,
+            editFormVisible: false,
+            editLoading: false,
+            addMenuFormVisible: false,
+            addMenuLoading: false,
+            stepNum: 10,
+            addForm: {
+                //新增根级页面
+                name: "",
+                linkBusiType: 0,
+                route: "",
+                imageLink: "",
+                param: "",
+                sortNo: 10,
+                openMode: 0,
+                isStopUsing: false,
+                viewstate: "add",
+                parentOID: "00000000-0000-0000-0000-000000000000"
+            },
+            addMenuForm: {
+                //新增子级页面
+                name: "",
+                linkBusiType: 0,
+                route: "",
+                imageLink: "",
+                param: "",
+                sortNo: "",
+                openMode: 0,
+                isStopUsing: false,
+                viewstate: "add"
+            },
+            editForm: {
+                viewstate: "modify"
+            },
+            sys_BusiPortalMenuOID: "",
+            rules: {
+                name: [
+                    { required: true, message: "请输入菜单全称", trigger: "blur" }
+                ],
+                linkBusiType: [
+                    { required: true, message: "请选择业务连接类型", trigger: "blur" }
+                ],
+                sortNo: [
+                    { required: true, message: "请输入排序号", trigger: "blur" }
+                ],
+                openMode: [
+                    { required: true, message: "请选择打开方式", trigger: "blur" }
+                ]
+            }
+        }
+    },
+    methods: {
+        // 添加子菜单按钮
+        addMenuChild(index, row) {
+            if (true) {
+                row.viewstate = "add"
+                this.sys_BusiPortalMenuOID = row.sys_BusiPortalMenuOID
+            }
+            // console.log("子菜单按钮", row.viewstate, row.sys_BusiPortalMenuOID)
+            this.addMenuFormVisible = true
+
+        },
+        // 提交子菜单页面数据
+        addMenuSubmit(addMenuForm) {
+            this.$refs[addMenuForm].validate(valid => {
+                if(valid) {
+                    this.$confirm("确认提交吗？", "提示", {type: "warning"}).then(() => {
+                        this.addMenuLoading = true
+                        const addMenuPara = {
+                            name: this.addMenuForm.name,
+                            linkBusiType: this.addMenuForm.linkBusiType,
+                            route: this.addMenuForm.route,
+                            imageLink: this.addMenuForm.imageLink,
+                            param: this.addMenuForm.param,
+                            sortNo: this.addMenuForm.sortNo,
+                            openMode: this.addMenuForm.openMode,
+                            isStopUsing: this.addMenuForm.isStopUsing,
+                            viewstate: this.addMenuForm.viewstate,
+                            parentOID: this.sys_BusiPortalMenuOID
+                        }
+                        const para = Object.assign({}, addMenuPara)
+                        // console.log("新增子菜单", addMenuPara)
+                        addPaperType(para).then(res => {
+                            this.addMenuLoading = false
+                            if (res.data) {
+                                this.$message({ message: "提交成功", type: "success" })
+                            } else {
+                                this.$message({ message: res.msg, type: "error" })
+                            }
+                            this.$refs["addMenuForm"].resetFields()
+                            this.addMenuFormVisible = false
+                            this.getMenu()
+                        })
+                    })
+                }
+            })
+        },
+        //编辑按钮
+        handleEdit(index, row) {
+            if (true) {
+                row.viewstate = "modify"
+            }
+            // console.log(row.viewstate)
+            this.editForm = Object.assign({}, row)
+            // console.log(this.editForm)
+            this.tempid = this.editForm.sys_BusiPortalMenuOID
+            this.getBtnGroup()
+        },
+        getBtnGroup() {
+            const para = {
+                sys_BusiPortalMenu_FK: this.tempid,
+                pageindex: 1,
+                pagesize: 10
+            }
+            GetButDataByMenu(para).then(res => {
+                this.ButtonsData = res.data.data
+                // console.log(this.ButtonsData)
+            })
+            this.editFormVisible = true
+        },
+        // 编辑页面保存
+        editSave(editForm) {
+            this.$refs["editForm"].validate(valid => {
+                if (valid) {
+                    this.$confirm("确认提交吗？", "提示", {type: "warning"}).then(() => {
+                        this.editLoading = true
+                        const editForm = {
+                            name: this.editForm.name,
+                            linkBusiType: this.editForm.linkBusiType,
+                            route: this.editForm.route,
+                            imageLink: this.editForm.imageLink,
+                            param: this.editForm.param,
+                            sortNo: this.editForm.sortNo,
+                            openMode: this.editForm.openMode,
+                            viewstate: this.editForm.viewstate,
+                            ParentOID: null,
+                            sys_BusiPortalMenuOID: this.editForm.sys_BusiPortalMenuOID
+                        }
+                        const para = Object.assign({}, this.editForm)
+                        addPaperType(para).then(res => {
+                            this.editLoading = false
+                            if (res.data) { this.$message({
+                                message: "修改成功",
+                                type: "success"
+                                });
+                            } else {
+                                this.$message({
+                                message: res.msg,
+                                type: "error"
+                                });
+                            }
+                            this.editFormVisible = false;
+                            this.getMenu();
+                        });
+                    })
+                }
+            })
+        },
+        // 显示新增根菜单按钮
+        handleAdd() {
+            this.addFormVisible = true;
+        },
+        // 新增根菜单页面提交
+        addSubmit(addForm) {
+            this.$refs[addForm].validate(valid => {
+                if (valid) {
+                    this.$confirm("确认提交吗？", "提示", {type: "warning"}).then(() => {
+                        this.addLoading = true;
+                        const addPara = {
+                            name: this.addForm.name,
+                            linkBusiType: this.addForm.linkBusiType,
+                            route: this.addForm.route,
+                            imageLink: this.addForm.imageLink,
+                            param: this.addForm.param,
+                            sortNo: this.addForm.sortNo,
+                            openMode: this.addForm.openMode,
+                            isStopUsing: this.addForm.isStopUsing,
+                            viewstate: this.addForm.viewstate,
+                            parentOID: this.addForm.parentOID,
+                            sys_BusiPortalMenuOID: "00000000-0000-0000-0000-000000000000"
+                        };
+                        let para = Object.assign({}, addPara);
+                        // console.log("新增根菜单", addPara);
+                        addPaperType(para).then(res => {
+                            this.addLoading = false;
+                            if (res.data) {
+                                this.$message({ message: "提交成功", type: "success" });
+                            } else {
+                                this.$message({ message: res.msg, type: "error" });
+                            }
+                            this.addFormVisible = false;
+                            this.getMenu();
+                        })
+                    })
+                }
+            })
+        },
+        // 关闭新增弹窗 取消验证
+        closetDialog() {
+        this.addFormVisible = false;
+        // this.$refs["addForm"].resetFields();
+        },
+        // 关闭新增子菜单弹窗 取消验证
+        closetMenuDialog() {
+        this.addMenuFormVisible = false;
+        // this.$refs["addMenuForm"].resetFields();
+        },
+        showRow(row) {
+            const show = row.row.parent ? row.row.parent._expanded && row.row.parent._show : true;
+            row.row._show = show;
+            return show ? "animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;" : "display:none;";
+        },
+        // 树节点开关操作
+        openToggle(item) {
+            // 这里只是展开和关闭样式的变换方法
+            Vue.set(item, "open", !item.open);
+            // 展开的时候，显示子节点，关闭的时候隐藏子节点
+            // 遍历所有的子节点，加入到menuTable中
+            for (let j = 0; j < this.tableData.length; j++) {
+                // 找到父节点的id，然后依次把子节点放到数组里面父节点后面
+                if ( this.tableData[j].sys_BusiPortalMenuOID !== item.sys_BusiPortalMenuOID ) {
+                    continue;
+                }
+                if (item.open) {
+                // open => close
+                // console.log(item);
+                    let tableData = this.tableData;
+                    item.children.forEach(function(child, index) {
+                        tableData.splice(j + index + 1, 0, child); // 添加子节点
+                    });
+                } else {
+                    this.tableData.splice(j + 1, item.children.length); // 删除子节点
+                }
+                break;
+            }
+        },
+        // 判断业务类型
+        formatLinkBusiType(row, column) {
+            return row.linkBusiType == 1 ? "网址" : row.linkBusiType == 0 ? "业务模块" : "未知";
+        },
+        //判断打开方式
+        formatOpenMode(row, column) {
+            return row.openMode == 0 ? "框架内跳转" : row.openMode == 1 ? "打开新窗口（弹出层）" : "未知";
+        },
+        // 删除按钮
+        handleDelete(index, row) {
+            this.$confirm("是否继续删除?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => {
+            // const deleOid = {OID:row.sys_BusiPortalMenuOID};
+            // let para = row.sys_BusiPortalMenuOID
+                let para = { OID: row.sys_BusiPortalMenuOID };
+                // console.log("删除组件", para);
+                deleteMenu(para).then(result => {
+                    // console.log(result);
+                    this.listLoading = false;
+                    if (result.data.msgCode != 400) {
+                        this.$message({ message: "删除成功", type: "success" });
+                    } else {
+                        this.$message({ message: result.data.msg, type: "error" });
+                    }
+                    this.getMenu();
+                });
+            }).catch(() => {
+                this.$message({ type: "info", message: "已取消删除" });
+            });
+        },
+        // 获取菜单接口
+        getMenu() {
+            getMenuList().then(res => {
+                this.tableData = res.data.data;
+            });
+        },
+        //表头样式
+        getRowClass({ row, column, rowIndex, columnIndex }) {
+            if (rowIndex === 0) {
+                return "background: rgb(6, 66, 116) ;color:#fff;font-size:15px;font-weight:1000;";
+            } else {
+                return "";
+            }
+        },
+        setButton(val) {
+            this.GetGuid()
+            const para = { pageindex: 1, pagesize: 100 }
+            this.addFormVisible = false
+            this.setButtonVisible = true
+            GetButResourceData(para).then(res => {
+                if (res.status == 'SUCCESS') {
+                    this.ButtonData = res.data.data
+                    this.ButtonData.map((item) => {
+                        this.ButtonDataName.push(item.name)
+                    })
+                    // console.log(this.ButtonData)
+                    // console.log(this.ButtonData)
+                }
+            })
+        },
+        selectChange(val) {
+            this.ButtonData.map(item => {
+                if (item.name === val) {
+                    this.ButtonDataArr = item
+                    this.ButtonDataArr.sys_BusiPortalMenu_ButOID = this.ButtonDataArr.sys_ButResourceOID
+                    this.ButtonDataArr.sortNo = 0,
+                    this.ButtonDataArr.butMethod = ''
+                }
+            })
+        },
+        GetGuid() {
+            GetAutoGuid().then(res => {
+                this.Guid = res.data.data
+            })
+        },
+        closeDrawer() {
+            if (this.ButtonDataArr.qb === 'edit') {
+                // console.log(this.ButtonDataArr)
+                delete this.ButtonDataArr.qb
+                // console.log(this.ButtonDataArr)
+                this.editFormVisible = false
+                SaveBusiPortalMenuBut(this.ButtonDataArr).then(res => {
+                    if (res.status === 'SUCCESS') {
+                        this.$message({ message: "保存成功", type: "success" });
+                        this.setButtonVisible = false
+                        this.getBtnGroup()
+                        // this.editFormVisible = true
+                        this.ButtonDataArr = {
+                            iconClass: 'elicon-all-wtsy',
+                            plain: false,
+                            round: false,
+                            circle: false,
+                            loading: false,
+                            disabled: false,
+                            nativeType: '',
+                            sortNo: 0,
+                            butMethod: ''
+                        }
+                    } else {
+                        this.$message({ message: res.msg, type: "error" });
+                        this.setButtonVisible = false
+                        this.getBtnGroup()
+                        // this.editFormVisible = true
+                        this.ButtonDataArr = {
+                            iconClass: 'elicon-all-wtsy',
+                            plain: false,
+                            round: false,
+                            circle: false,
+                            loading: false,
+                            disabled: false,
+                            nativeType: '',
+                            sortNo: 0,
+                            butMethod: ''
+                        }
+                    }
+                })
+                
+            } else {
+                // this.ButtonDataArr.sys_BusiPortalMenu_ButOID = this.ButtonDataArr.sys_ButResourceOID
+                this.ButtonDataArr.sys_BusiPortalMenu_FK = this.tempid
+                // console.log(this.ButtonDataArr)
+                // 
+                if (!this.ButtonDataArr.sys_BusiPortalMenu_ButOID) {
+                    this.ButtonDataArr.sys_BusiPortalMenu_ButOID = this.Guid
+                }
+                this.editFormVisible = false
+                SaveBusiPortalMenuBut(this.ButtonDataArr).then(res => {
+                    if (res.status == 'SUCCESS') {
+                        this.$message({ message: "保存成功", type: "success" });
+                        this.setButtonVisible = false
+                        this.getBtnGroup()
+                        // this.editFormVisible = true
+                        this.ButtonDataArr = {
+                            iconClass: 'elicon-all-wtsy',
+                            plain: false,
+                            round: false,
+                            circle: false,
+                            loading: false,
+                            disabled: false,
+                            nativeType: '',
+                            sortNo: 0,
+                            butMethod: ''
+                        }
+                    } else {
+                        this.$message({ message: res.msg, type: "error" });
+                        this.setButtonVisible = false
+                        this.getBtnGroup()
+                        // this.editFormVisible = true
+                        this.ButtonDataArr = {
+                            iconClass: 'elicon-all-wtsy',
+                            plain: false,
+                            round: false,
+                            circle: false,
+                            loading: false,
+                            disabled: false,
+                            nativeType: '',
+                            sortNo: 0,
+                            butMethod: ''
+                        }
+                    }
+                })
+            }
+        },
+        clickIcon() {
+            this.drawer = true
+        },
+        // 选择图标库中图标触发事件
+        iconSelected(val) {
+            this.ButtonDataArr.iconClass = val
+            this.drawer = false
+        },
+        handleClose(done) {
+            this.$confirm('确认关闭？').then(_ => {
+                this.drawer = false
+            }).catch(_ => {});
+        },
+        handleClose2(done) {
+            this.$confirm('确认关闭？').then(_ => {
+                this.setButtonVisible = false
+                this.ButtonDataArr = {
+                    iconClass: 'elicon-all-wtsy',
+                    plain: false,
+                    round: false,
+                    circle: false,
+                    loading: false,
+                    disabled: false,
+                    nativeType: '',
+                    sortNo: 0,
+                    butMethod: ''
+                } 
+            }).catch(_ => {});
+        },
+        handleButtonDele(val) {
+            // console.log(val)
+            const para = []
+            para.push(val.sys_BusiPortalMenu_ButOID)
+            this.$confirm('确认删除吗?', '提示', { type: 'warning' }).then(() => {
+                DeleteBut(para).then(res => {
+                    if(res.status == 'SUCCESS') {
+                        this.$message({ type: 'success', message: '删除成功!' });
+                        this.editFormVisible = false
+                    } else {
+                        this.$message({ type: 'error', message: res.msg });
+                        this.editFormVisible = false
+                    }
+                })
+            }).catch(() => {
+            });
+
+        },
+        handleButtonEdit(val) {
+            // console.log(val)
+            this.ButtonDataArr = val
+            this.ButtonDataArr.qb = 'edit'
+            this.setButton()
+        }
+    },
+    mounted() {
+        this.getMenu();
+    }
+};
+</script>
+<style spoced>
+.switchStyle .el-switch__label {
+    position: absolute;
+    display: none;
+    color: #fff;
+}
+.switchStyle .el-switch__label--left {
+    z-index: 9;
+    left: 19px;
+}
+.switchStyle .el-switch__label--right {
+    z-index: 9;
+    left: -3px;
+}
+.switchStyle .el-switch__label.is-active {
+    display: block;
+}
+.switchStyle .el-switch .el-switch__core, .el-switch .el-switch__label {
+    width: 50px !important;
+}
+.switchStyle .el-switch__label * {
+    line-height: 1;
+    font-size: 6px;
+    display: inline-block;
+}
+.leves1, .leves2, .leves3 {
+    display: inline-block;
+    width: 20px;
+    color: rgb(6, 66, 116);
+}
+.leves1 {
+    margin-left: 5px;
+}
+.leves2 {
+    margin-left: 25px;
+}
+.leves3 {
+    margin-left: 40px;
+}
+
+.btn-row {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+}
+.btn span {
+    padding: 12px 30px 12px 10px;
+    margin-bottom: 5px;
+    font-size: 16px
+}
+.del{
+    display: inline-block;
+    color: darkgray;
+    padding-top: 0px;
+    margin-left: -50px;
+    font-size: 18px;
+}
+.Menu_Registration {
+    border-radius: 6px;
+    background: #fff;
+    box-shadow: 1px 1px 3px rgba(0,0,0,.2)
+}
+
+</style>
+
+ 
\ No newline at end of file

src/components/authorizationManage/postSelection.vue

+<template>
+  <div>
+    <el-row>
+      <div style="padding-bottom:15px">
+        <el-button type="primary" @click="conformChoose" size="small">选择</el-button>
+        <el-button type="primary" @click="close" size="small">关闭</el-button>
+      </div>
+      <el-col :span="11">
+        <!-- 选人 -->
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>选择</span>
+          </div>
+          <div class="text item">
+            <el-input v-model="filterText" placeholder="输入关键字进行过滤" auto-complete="off" size="small"></el-input>
+            <el-tree :ref="refTree" class="filter-tree" :check-strictly="checkStrict" show-checkbox :node-key="nodeKey" :data="data" default-expand-all :filter-node-method="filterNode" @check="checkNodes" :props="defaultProps">
+              <span slot-scope="{ node, data }">
+                <i :class="data.icon" style="color:#1E90FF"></i>
+                <span style="padding-left: 4px;">{{node.label}}</span>
+              </span>
+            </el-tree>
+          </div>
+        </el-card>
+      </el-col>
+      <!-- 圆形按钮 -->
+      <el-col :span="2">
+        <div style="text-align: center;padding-bottom:10px;padding-top:120px">
+          <el-button icon="el-icon-arrow-right" circle @click="toRight"></el-button>
+        </div>
+        <div style="text-align: center;">
+          <el-button icon="el-icon-arrow-left" circle @click="toLeft"></el-button>
+        </div>
+      </el-col>
+      <el-col :span="11">
+        <el-card class="box-card" style="height:400px">
+          <div slot="header" class="clearfix">
+            <span>已选择</span>
+          </div>
+          <div class="text item">
+            <ul>
+              <li v-for="(item,index) in chooselist" :key="index" style="list-style: none">
+                <el-checkbox v-model="item.isChoose" :label="item.chooseData" :key="index" name="type" @change="checkedList(index,item)">{{item.chooseData}}</el-checkbox>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    nodeKey: {
+      type: String,
+      default: ""
+    },
+    data: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    checkStrict: {
+      type: Boolean,
+      default: false
+    },
+    defaultProps: {
+      type: Object,
+      default: {
+        children: "children",
+        label: "label"
+      }
+    },
+    refTree: {
+      type: String,
+      default: "centertree"
+    },
+  },
+  data() {
+    return {
+      chooselist: [],
+      chooseIDlist:[],
+      indexArr: [],
+      label:'',
+      filterText:''
+    };
+  },
+  watch:{
+    filterText(val) {
+      this.$refs[this.refTree].filter(val);
+  },
+  },
+  
+  mounted(){
+      this.label=this.defaultProps.label
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true;
+      return data[this.label].indexOf(value) !== -1;
+    },
+    // 节点的选择
+    checkNodes(data, item) {
+        if (item.checkedKeys.indexOf(data[this.nodeKey]) <= -1) {
+          //未选中
+          this.chooselist.forEach((i, index) => {
+            if (i.chooseID === data[this.nodeKey]) {
+              this.chooselist.splice(index, 1);
+              this.chooseIDlist.splice(index, 1);
+            }
+          });
+          return;
+        }
+        if(this.checkStrict === false){
+            //点击节点
+            let obj={}
+            if (data.children === null || data.children.length === 0) {
+                obj = {
+                    isChoose: false,
+                    chooseData: data[this.label],
+                    chooseID: data[this.nodeKey]
+                };
+                this.chooselist.push(this.isHas(obj, data));
+                this.chooseIDlist.push(data[this.nodeKey]);
+            } 
+            else {
+            //选中父节点，子节点全部选到 右边
+            data.children.forEach(item => {
+                obj = {
+                    isChoose: false,
+                    chooseData: item[this.label],
+                    chooseID: item[this.nodeKey]
+                };
+                this.chooselist.push(this.isHas(obj, item));
+                this.chooseIDlist.push(item[this.nodeKey]);
+            });
+            }
+        }else {
+            //点击节点
+            let obj = {
+            isChoose: false,
+            chooseData: data[this.label],
+            chooseID: data[this.nodeKey]
+            };
+            this.chooselist.push(this.isHas(obj, data));
+            this.chooseIDlist.push(data[this.nodeKey]);
+        }
+
+    },
+    isHas(obj,data){
+      let has=0
+      if(this.chooselist.length>0){
+          this.chooselist.forEach(list=>{
+              if(list.chooseID==data[this.nodeKey]){
+                has=1 //重复
+              }
+            
+         })
+      }
+      if(has===0){
+          return obj
+      }
+    },
+    // 选中节点至右边
+    toRight() {},
+    // 去除右边的节点
+    toLeft() {
+      let _this = this;
+      _this.indexArr.forEach(item => {
+        _this.chooselist.forEach((i, index) => {
+          if (i.chooseID === item) {
+            _this.chooselist.splice(index, 1);
+            _this.chooseIDlist.splice(index, 1);
+          }
+        });
+      });
+      _this.$refs[this.refTree].setCheckedKeys(_this.chooseIDlist);
+      _this.indexArr = [];
+    },
+    // 右边 复选框列表 选中
+    checkedList(index, item) {
+      this.indexArr.push(item.chooseID);
+    },
+    // 确认选择
+    conformChoose(){
+        this.$emit('conformChoose',this.chooselist)
+    },
+    close(){
+      this.$emit('emitClose')
+    }
+  }
+};
+</script>
+<style scoped>
+</style>
\ No newline at end of file

src/components/basicData/basicInformation.vue

+<template>
+  <!-- 受检者基本嘻嘻 -->
+  <div class="wrap">
+  <transition name="show" style="overflow:hidden">
+  <div class="list" key="0" v-if="count === 0">
+    <header>
+      <el-button type="success" @click="count = 1">添加</el-button>
+      <el-button type="success" @click="editList">编辑</el-button>
+      <!-- <el-button type="success" @click="saveList">保存</el-button> -->
+      <el-button type="primary" @click="downModel('受检者基本信息模板.xlsx')">导入模板下载</el-button>
+      <el-upload class="upload-demo" ref="fileExcel" action="/" accept=".xlsx, .xls" :before-upload="beforeUpload">
+        <el-button type="primary">导入</el-button>
+      </el-upload>
+      <el-button type="danger" @click="delList">删除</el-button>
+    </header>
+    <main>
+      <dg-table ref="dgtable" :data='tableData' :selection="true" :pagination="false" :row-click="rowclick" :column-config="config" @filter-change='getFilter' @select-change="handleSelectionChange"></dg-table>
+    </main>
+    <footer>
+      <div class="pagination" :style="{width:paginaWidth}">
+	      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="page.pagesize" layout="total,sizes, prev, pager, next" :total="total" background  :current-page="page.pageindex">
+	      </el-pagination>
+	    </div>
+    </footer>
+  </div>
+   <div class="list" key="1" v-if="count !== 0">
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width:800px;padding:10px">
+            <div style="display:flex;">
+              <el-form-item label="姓名" prop="name" style="width:30%">
+                <el-input v-model="ruleForm.name"></el-input>
+              </el-form-item>
+              <el-form-item label="性别" prop="sex" style="width:35%">
+                <el-radio-group v-model="ruleForm.sex">
+                  <el-radio :label="1">男</el-radio>
+                  <el-radio :label="0">女</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="出生日期" prop="birth">
+                <el-date-picker v-model="ruleForm.birth" type="date" placeholder="选择日期"></el-date-picker>
+              </el-form-item>
+            </div>
+            <div style="display:flex;">
+              <el-form-item label="身份证号码" prop="idCard" style="width:65%">
+                <el-input v-model="ruleForm.idCard"></el-input>
+              </el-form-item>
+              <el-form-item label="联系电话" prop="phone">
+                <el-input v-model="ruleForm.phone"></el-input>
+              </el-form-item>
+            </div>
+            <el-form-item label="样本编号" prop="sampleCode">
+              <el-input v-model="ruleForm.sampleCode"></el-input>
+            </el-form-item>
+            <div style="display:flex;">
+              <el-form-item label="样本类型" prop="sampleType" style="width:65%">
+                <el-input v-model="ruleForm.sampleType"></el-input>
+              </el-form-item>
+              <el-form-item label="检测样本" prop="sampleDetection">
+                <el-input v-model="ruleForm.sampleDetection"></el-input>
+              </el-form-item>
+            </div>
+            <div style="display:flex;">
+              <el-form-item label="采样日期" prop="samplingTime" style="width:65%">
+                <el-date-picker v-model="ruleForm.samplingTime" type="date" placeholder="选择日期"></el-date-picker>
+              </el-form-item>
+              <el-form-item label="检测技术" prop="technologyDetection">
+                <el-input v-model="ruleForm.technologyDetection"></el-input>
+              </el-form-item>
+            </div>
+            <div style="display:flex;">
+              <el-form-item label="肿瘤类型" prop="tumorsType" style="width:35%">
+                <el-input v-model="ruleForm.tumorsType"></el-input>
+              </el-form-item>
+              <el-form-item label="TBM分期" prop="tbm" style="width:35%">
+                <el-input v-model="ruleForm.tbm"></el-input>
+              </el-form-item>
+              <el-form-item label="是否原发" prop="isEssential">
+                <el-switch v-model="ruleForm.isEssential"></el-switch>
+              </el-form-item>
+            </div>
+            <el-form-item label="临床诊断" prop="desc">
+              <el-input type="textarea" v-model="ruleForm.desc"></el-input>
+            </el-form-item>
+            <el-form-item label="家族病史" prop="clinicalDiagnosis">
+              <el-input type="textarea" v-model="ruleForm.clinicalDiagnosis"></el-input>
+            </el-form-item>
+            <el-form-item label="个人病史及用药史" prop="personalHistory">
+              <el-input type="textarea" v-model="ruleForm.personalHistory"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="saveList">保存</el-button>
+              <el-button @click="count = 0">返回</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+  </transition>
+  </div>
+</template>
+
+<script>
+import Sex from "./dg_tableCustom/sexCustomizemenu"
+import { GetClientInfo,GetGuid,SaveClientInfo,DelClientInfo,ImportClientInfo,GetImportTemplatePath,GetClientInfoDetail } from "../../api/api";
+export default {
+  data() {
+    var checkSfz = (rule,value,callback)=>{
+        if(!value){
+            return callback(new Error('身份证不能为空'))
+        }else{
+            const reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
+            if(!reg.test(value)){
+                callback(new Error('身份证格式错误'))
+            }else{
+                callback()
+            }
+        }
+    }
+    var checkPhone = (rule,value,callback)=>{
+        if(!value){
+            return callback(new Error('手机号不能为空'))
+        }else{
+            const reg = /^1[3456789]\d{9}$/
+            if(!reg.test(value)){
+                callback(new Error('手机号格式错误'))
+            }else{
+                callback()
+            }
+        }
+    }
+    return {
+      paginaWidth:'100%',
+      tableData: [],
+      page:{
+        pageindex:1,
+        pagesize:10
+      },
+      total:0,
+      tableheight: window.innerHeight - 220,
+      row:[],
+      count:0,
+      ruleForm: {
+        name: "",
+        sex: 0,
+        idCard: "",
+        birth: "",
+        sampleCode: "",
+        sampleType: "",
+        phone: '',
+        sampleDetection: "",
+        technologyDetection: "",
+        tumorsType: "",
+        tbm: "",
+        isEssential: true,
+        clinicalDiagnosis: "",
+        familyHistory: "",
+        personalHistory: "",
+        samplingTime:''
+      },
+      rules: {
+        name: [
+          { required: true, message: '姓名', trigger: 'blur' },
+          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        idCard:[{ validator: checkSfz, trigger: 'blur' }],
+        // phone:[{ validator: checkPhone, trigger: 'blur' }],
+      },
+      config: [
+        {
+          prop: "name",
+          label: "姓名",
+          filterConfig: {
+            ftn: "姓名",
+            type: "edit",
+            key: "name",
+            placeholder: "输入姓名"
+          },
+        },
+        {
+          prop: "sex",
+          label: "性别",
+          filterConfig: {
+            ftn: "性别",
+            key: "sex",
+            type: 'radio',
+            listinfo: {
+              labelkey: 'label',
+              valuekey: 'value'
+            },
+            items: [
+              { label: '男', value: 0 },
+              { label: '女', value: 1 }
+            ]
+          },
+          component:Sex,
+        },
+        {
+          prop: "idCard",
+          label: "身份证号",
+          filterConfig: {
+            ftn: "身份证号",
+            type: "edit",
+            key: "idCard"
+          },
+        },
+        {
+          prop: "birth",
+          label: "出生日期",
+          filterConfig: {
+            ftn: "出生日期",
+            hidebg: true,
+            type: "date",
+            key: "birth"
+          },
+          processdata: "time",
+        },
+        {
+          prop: "sampleCode",
+          label: "样本编码",
+          filterConfig: {
+            ftn: "样本编码",
+            type: "edit",
+            key: "sampleCode"
+          },
+        },
+        
+      ],
+      searchVal:''
+    }
+  },
+  watch:{
+    count(val){
+      if(val===0){
+        this.row=[]
+        this.ruleForm={
+          name: "",
+          sex: 0,
+          idCard: "",
+          birth: "",
+          sampleCode: "",
+          sampleType: "",
+          phone: '',
+          sampleDetection: "",
+          technologyDetection: "",
+          tumorsType: "",
+          tbm: "",
+          isEssential: true,
+          clinicalDiagnosis: "",
+          familyHistory: "",
+          personalHistory: "",
+          samplingTime:''
+      }
+      }
+    }
+  },
+  created(){
+    window.onresize = () => {
+      this.tableheight=window.innerHeight - 220
+    }
+    
+  },
+  mounted(){
+    this.paginaWidth=this.$refs.dgtable.$el.clientWidth+'px'
+    window.onresize = () => {
+      this.paginaWidth=this.$refs.dgtable.$el.clientWidth+'px'
+    };
+    this.getData()
+  },
+  methods: {
+    getData(){
+      let para=this.page
+      GetClientInfo(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          this.tableData=res.data.data
+          this.total=res.data.totalCount
+        }
+      })
+    },
+    handleCurrentChange(val) {
+      this.page.pageindex = val
+      if(this.searchVal===''){
+        this.getUsers()
+      }else{
+        this.searchUsers(this.searchVal)      
+      }
+    },
+    handleSizeChange(val){
+      this.pagesize = val
+      if(this.searchVal===''){
+        this.getUsers()
+      }else{
+        this.searchUsers(this.searchVal)      
+      }
+    },
+    getFilter(val) {
+      this.searchVal=val
+      this.searchUsers(val);
+    },
+    searchUsers(val) {
+      val["pageindex"] = this.page.pageindex
+      val["pagesize"] = this.page.pagesize
+      this.page = val
+      this.getData()
+      this.page={
+         pageindex: 1,
+          pagesize: 10,
+      }
+    },
+    //点击行触发，选中或不选中复选框
+    rowclick(row) {
+      // this.$refs.multipleTable.toggleRowSelection(row)
+    },
+    //选中列表行
+    handleSelectionChange(val) {
+      this.row=val
+    },
+    // 添加
+    addList(){
+      GetGuid().then(res=>{
+        this.ruleForm.clientInfoOID=res.data
+      })
+    },
+    // 编辑
+    editList(){
+      if(this.row.length!==1){
+        this.$message({ type: 'error', message: '请选择一条需要编辑内容'})
+        return
+      }
+      let para={ClientInfoOID:this.row[0].clientInfoOID}
+      GetClientInfoDetail(para).then(res=>{
+        this.ruleForm=res.data
+        this.count=2
+
+      })
+      
+    },
+    // 保存
+    saveList(){
+      this.$refs['ruleForm'].validate(valid => {
+        if (valid) {
+          let para = this.ruleForm
+          this.$confirm('确认保存吗?', '提示', { type: 'warning'}).then(()=>{
+          SaveClientInfo(para).then(res=>{
+            if(res.status=='SUCCESS'){
+              this.$message({ type: 'success', message: '保存成功!'});
+              if(this.searchVal===''){
+                this.getUsers()
+              }else{
+                this.searchUsers(this.searchVal)      
+              }
+            }
+            else{
+              this.$message({ type: 'error', message: res.msg});
+            }
+          })
+          }).catch(()=>{ return})
+          }
+        })
+    },
+    // 删除
+    delList(){
+      if(this.row.length===0){
+        this.$message({ type: 'error', message: '请先选择需要删除的内容'})
+        return
+      }
+      let para=[]
+      this.row.forEach(item=>{
+        para.push(item.targetedMedicineOID)
+      })
+      this.$confirm('确认删除吗?', '提示', { type: 'warning'}).then(()=>{
+        DelClientInfo(para).then(res=>{
+          if(res.status=='SUCCESS'){
+              this.$message({ type: 'success', message: '删除成功!'});
+              if(this.searchVal===''){
+                this.getUsers()
+              }else{
+                this.searchUsers(this.searchVal)      
+              }
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+      }).catch(()=>{ return})
+    },
+    // 导入
+    beforeUpload(file) {
+      let formData = new FormData();
+      formData.append("Excel", file);
+      this.$confirm("确认导入吗?", "提示", { type: "warning" }).then(() => {
+        ImportClientInfo(formData).then(res => {
+          if (res.status === "SUCCESS") {
+            this.$message({ type: "success", message: "导入成功!" });
+            if(this.searchVal===''){
+              this.getUsers()
+            }else{
+              this.searchUsers(this.searchVal)      
+            }
+          } else {
+            this.$message({ type: "error", message: res.msg });
+          }
+        });
+      })
+      .catch(() => {  return;});
+    },
+    downModel(data){
+      let para={FileName:data}
+      GetImportTemplatePath(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          window.open('http://'+res.data)
+        }else{
+          this.$message({ type: 'error', message: res.msg});
+        }
+      })
+    }
+  },
+  directives: {
+    focus: {
+      inserted: function(el) {
+        el.querySelector('input').focus()
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+header {
+  height: 40px;
+  padding:5px;
+  width: 100%;
+}
+.upload-demo{
+  display: inline-flex;
+}
+.upload-demo >>>.el-upload--text{
+  width: 100%;
+  height: 100%;
+  border: none;
+  margin: 0 5px;
+  border-radius: 3px;
+}
+.wrap{
+  background:#fff;border-radius:6px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);
+}
+ .pagination{
+    text-align: center;
+    bottom: 0;
+    position: fixed;
+    padding-bottom: 5px;
+    padding-top: 5px
+  }
+</style>

src/components/basicData/dg_tableCustom/sexCustomizemenu.vue

+<template>
+  <!-- 性别列 -->
+  <div style="display: flex; justify-content: flex-start">
+      {{row.sex===0?"男":'女'}}
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+export default {
+   props: ['row'],
+   data(){
+       return{
+   }},
+}
+</script>

src/components/basicData/genePool.vue

+<template>
+  <!-- 基因库 -->
+  <div style="background:#fff;border-radius:6px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);">
+    <header>
+      <el-button type="success" @click="addList">添加</el-button>
+      <el-button type="success" @click="saveList">保存</el-button>
+      <el-button type="primary" @click="downModel('基因模板.xlsx')">导入模板下载</el-button>
+      <el-upload class="upload-demo" ref="fileExcel" action="/" accept=".xlsx, .xls" :before-upload="beforeUpload">
+        <el-button type="primary">导入</el-button>
+      </el-upload>
+      <el-button type="danger" @click="delList">删除</el-button>
+      <el-input placeholder="请输入查询条件" prefix-icon="el-icon-search" v-model="queryCondition" @keyup.enter.native="getData()" class="searchClass" clearable @clear="getData()" style="width:20%"></el-input>
+    </header>
+    <main>
+      <el-table ref="multipleTable" :data="tableData" border :height='tableheight' highlight-current-row @row-click="rowclick" @selection-change="handleSelectionChange" @cell-click="clickCell">
+        <el-table-column type="selection"></el-table-column>
+        <el-table-column type="index" label="序号" align="center">
+            <template slot-scope="scope"><span>{{scope.$index+(page.pageindex - 1) * page.pagesize + 1}} </span></template>
+        </el-table-column>
+        <el-table-column prop="geneCode" label="基因编码">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit1" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.geneCode"></el-input>
+            <span v-else >{{ scope.row.geneCode}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="geneName" label="基因名称">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.geneName"></el-input>
+            <span v-else >{{ scope.row.geneName}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="geneRemark" label="基因说明">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit2" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.geneRemark"></el-input>
+            <span v-else >{{ scope.row.geneRemark}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="pmid" label="PMID">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit3" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.pmid"></el-input>
+            <span v-else >{{ scope.row.pmid}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="targetedMedicine" label="靶药">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit4" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.targetedMedicine"></el-input>
+            <span v-else >{{ scope.row.targetedMedicine}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="mutationSites" label="突变位点">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit5" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.mutationSites"></el-input>
+            <span v-else >{{ scope.row.mutationSites}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </main>
+    <footer>
+      <div  class="block" style="text-align:center;">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="page.pagesize" layout="total,sizes, prev, pager, next" :total="total" background :current-page="page.pageindex">
+        </el-pagination>
+    </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import { GetGene,GetGuid,SaveGene,DelGene,ImportGene,GetImportTemplatePath } from "../../api/api";
+export default {
+  data() {
+    return {
+      tableData: [],
+      page:{
+        pageindex:1,
+        pagesize:10
+      },
+      total:0,
+      tableheight: window.innerHeight - 220,
+      row:[],
+      queryCondition:''
+    }
+  },
+  created(){
+    window.onresize = () => {
+      this.tableheight=window.innerHeight - 220
+    }
+  },
+  mounted(){
+    this.getData()
+  },
+  methods: {
+    getData(){
+      this.page.queryCondition=this.queryCondition
+      let para=this.page
+      GetGene(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          res.data.data.forEach(item => {
+            item.edit=false
+            item.edit1=false
+            item.edit2=false
+            item.edit3=false
+            item.edit4=false
+            item.edit5=false
+          });
+          this.tableData=res.data.data
+          this.total=res.data.totalCount
+        }
+      })
+    },
+    handleCurrentChange(val) {
+      this.page.pageindex = val
+      this.getData()
+    },
+    handleSizeChange(val){
+      this.pagesize = val
+      this.getData()
+    },
+    // 点击单元格
+    clickCell(row, column, cell, event){ 
+      if(cell.cellIndex===2){
+         row.edit1 = true
+      }
+      if(cell.cellIndex===3){
+         row.edit= true
+      }
+      if(cell.cellIndex===4){
+         row.edit2= true
+      }if(cell.cellIndex===5){
+         row.edit3= true
+      }if(cell.cellIndex===6){
+         row.edit4= true
+      }if(cell.cellIndex===7){
+         row.edit5= true
+      }
+    },
+    inputBlur(item) {
+      let tableD = this.tableData;
+      tableD.forEach(function (item) {
+        item.edit = false
+        item.edit1 = false
+        item.edit2 = false
+        item.edit3 = false
+        item.edit4 = false
+        item.edit5 = false
+      });
+    },
+    // 输入框内容发生变化事件
+    textChange(index,row){ 
+      this.tableData[index].id=0
+    },
+    //点击行触发，选中或不选中复选框
+    rowclick(row) {
+      // this.$refs.multipleTable.toggleRowSelection(row)
+    },
+    //选中列表行
+    handleSelectionChange(val) {
+      this.row=val
+    },
+    // 添加
+    addList(){
+      GetGuid().then(res=>{
+        let addForm={
+          geneOID:res.data,
+          geneCode: '',
+          geneName: '',
+          geneRemark:'',
+          pmid:'',
+          targetedMedicine:'',
+          mutationSites:'',
+          edit:true,
+          edit1:true,
+          edit2:true,
+          edit3:true,
+          edit4:true,
+          edit5:true,
+          id:0
+        }
+        this.tableData.push(addForm)
+      })
+      
+    },
+    // 保存
+    saveList(){
+      let para=[]
+      this.tableData.forEach(item=>{
+        if(item.id===0){
+          para.push(item)
+        }
+      })
+      this.$confirm('确认保存吗?', '提示', { type: 'warning'}).then(()=>{
+        SaveGene(para).then(res=>{
+          if(res.status=='SUCCESS'){
+            this.$message({ type: 'success', message: '保存成功!'});
+            this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+        }).catch(()=>{ return})
+    },
+    // 删除
+    delList(){
+      if(this.row.length===0){
+        this.$message({ type: 'error', message: '请先选择需要删除的内容'})
+        return
+      }
+      let para=[]
+      this.row.forEach(item=>{
+        para.push(item.geneOID)
+      })
+      this.$confirm('确认删除吗?', '提示', { type: 'warning'}).then(()=>{
+        DelGene(para).then(res=>{
+          if(res.status=='SUCCESS'){
+              this.$message({ type: 'success', message: '删除成功!'});
+              this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+      }).catch(()=>{ return})
+    },
+    // 导入
+    beforeUpload(file) {
+      let formData = new FormData();
+      formData.append("Excel", file);
+      this.$confirm("确认导入吗?", "提示", { type: "warning" }).then(() => {
+        ImportGene(formData).then(res => {
+          if (res.status === "SUCCESS") {
+            this.$message({ type: "success", message: "导入成功!" });
+            this.getData();
+          } else {
+            this.$message({ type: "error", message: res.msg });
+          }
+        });
+      })
+      .catch(() => {  return;});
+    },
+    downModel(data){
+      let para={FileName:data}
+      GetImportTemplatePath(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          window.open('http://'+res.data)
+        }else{
+          this.$message({ type: 'error', message: res.msg});
+        }
+      })
+    }
+  },
+  directives: {
+    focus: {
+      inserted: function(el) {
+        el.querySelector('input').focus()
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+header {
+  height: 40px;
+  padding:5px;
+  width: 100%;
+}
+.upload-demo{
+  display: inline-flex;
+}
+.upload-demo >>>.el-upload--text{
+  width: 100%;
+  height: 100%;
+  border: none;
+  margin: 0 5px;
+  border-radius: 3px;
+}
+</style>

src/components/basicData/pmid.vue

+<template>
+  <!-- PMID -->
+  <div style="background:#fff;border-radius:6px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);">
+    <header>
+      <el-button type="success" @click="addList">添加</el-button>
+      <el-button type="success" @click="saveList">保存</el-button>
+      <el-button type="primary" @click="downModel('PMID模板.xlsx')">导入模板下载</el-button>
+      <el-upload class="upload-demo" ref="fileExcel" action="/" accept=".xlsx, .xls" :before-upload="beforeUpload">
+        <el-button type="primary">导入</el-button>
+      </el-upload>
+      <el-button type="danger" @click="delList">删除</el-button>
+      <el-input placeholder="请输入查询条件" prefix-icon="el-icon-search" v-model="queryCondition" @keyup.enter.native="getData()" class="searchClass" clearable @clear="getData()" style="width:20%"></el-input>
+    </header>
+    <main>
+      <el-table ref="multipleTable" :data="tableData" border :height='tableheight' highlight-current-row @row-click="rowclick" @selection-change="handleSelectionChange" @cell-click="clickCell">
+        <el-table-column type="selection"></el-table-column>
+        <el-table-column type="index" label="序号" align="center">
+            <template slot-scope="scope"><span>{{scope.$index+(page.pageindex - 1) * page.pagesize + 1}} </span></template>
+        </el-table-column>
+        <el-table-column prop="code" label="编码">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit1" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.code"></el-input>
+            <span v-else >{{ scope.row.code}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="gene" label="基因">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.gene"></el-input>
+            <span v-else >{{ scope.row.gene}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="targetedMedicine" label="靶药">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit2" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.targetedMedicine"></el-input>
+            <span v-else >{{ scope.row.targetedMedicine}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </main>
+    <footer>
+      <div  class="block" style="text-align:center;">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="page.pagesize" layout="total,sizes, prev, pager, next" :total="total" background :current-page="page.pageindex">
+        </el-pagination>
+    </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import { GetPMID,GetGuid,SavePMID,DelPMID,ImportPMID,GetImportTemplatePath } from "../../api/api";
+export default {
+  data() {
+    return {
+      tableData: [],
+      page:{
+        pageindex:1,
+        pagesize:10
+      },
+      total:0,
+      tableheight: window.innerHeight - 220,
+      row:[],
+      queryCondition:''
+    }
+  },
+  created(){
+    window.onresize = () => {
+      this.tableheight=window.innerHeight - 220
+    }
+  },
+  mounted(){
+    this.getData()
+  },
+  methods: {
+    getData(){
+      this.page.queryCondition=this.queryCondition
+      let para=this.page
+      GetPMID(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          res.data.data.forEach(item => {
+            item.edit=false
+            item.edit1=false
+            item.edit2=false
+          });
+          this.tableData=res.data.data
+          this.total=res.data.totalCount
+        }
+      })
+    },
+    handleCurrentChange(val) {
+      this.page.pageindex = val
+      this.getData()
+    },
+    handleSizeChange(val){
+      this.pagesize = val
+      this.getData()
+    },
+    // 点击单元格
+    clickCell(row, column, cell, event){ 
+      if(cell.cellIndex===2){
+         row.edit1 = true
+      }
+      if(cell.cellIndex===3){
+         row.edit= true
+      }
+      if(cell.cellIndex===4){
+         row.edit2= true
+      }
+    },
+    inputBlur(item) {
+      let tableD = this.tableData;
+      tableD.forEach(function (item) {
+        item.edit = false
+        item.edit1 = false
+        item.edit2 = false
+      });
+    },
+    // 输入框内容发生变化事件
+    textChange(index,row){ 
+      this.tableData[index].id=0
+    },
+    //点击行触发，选中或不选中复选框
+    rowclick(row) {
+      // this.$refs.multipleTable.toggleRowSelection(row)
+    },
+    //选中列表行
+    handleSelectionChange(val) {
+      this.row=val
+    },
+    // 添加
+    addList(){
+      GetGuid().then(res=>{
+        let addForm={
+          pmidoid:res.data,
+          code: '',
+          gene: '',
+          targetedMedicine:'',
+          edit:true,
+          edit1:true,
+          edit2:true,
+          id:0
+        }
+        this.tableData.push(addForm)
+      })
+      
+    },
+    // 保存
+    saveList(){
+      let para=[]
+      this.tableData.forEach(item=>{
+        if(item.id===0){
+          para.push(item)
+        }
+      })
+      this.$confirm('确认保存吗?', '提示', { type: 'warning'}).then(()=>{
+        SavePMID(para).then(res=>{
+          if(res.status=='SUCCESS'){
+            this.$message({ type: 'success', message: '保存成功!'});
+            this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+        }).catch(()=>{ return})
+    },
+    // 删除
+    delList(){
+      if(this.row.length===0){
+        this.$message({ type: 'error', message: '请先选择需要删除的内容'})
+        return
+      }
+      let para=[]
+      this.row.forEach(item=>{
+        para.push(item.pmidoid)
+      })
+      this.$confirm('确认删除吗?', '提示', { type: 'warning'}).then(()=>{
+        DelPMID(para).then(res=>{
+          if(res.status=='SUCCESS'){
+              this.$message({ type: 'success', message: '删除成功!'});
+              this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+      }).catch(()=>{ return})
+    },
+    // 导入
+    beforeUpload(file) {
+      let formData = new FormData();
+      formData.append("Excel", file);
+      this.$confirm("确认导入吗?", "提示", { type: "warning" }).then(() => {
+        ImportPMID(formData).then(res => {
+          if (res.status === "SUCCESS") {
+            this.$message({ type: "success", message: "导入成功!" });
+            this.getData();
+          } else {
+            this.$message({ type: "error", message: res.msg });
+          }
+        });
+      })
+      .catch(() => {  return;});
+    },
+    downModel(data){
+      let para={FileName:data}
+      GetImportTemplatePath(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          window.open('http://'+res.data)
+        }else{
+          this.$message({ type: 'error', message: res.msg});
+        }
+      })
+    }
+  },
+  directives: {
+    focus: {
+      inserted: function(el) {
+        el.querySelector('input').focus()
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+header {
+  height: 40px;
+  padding:5px;
+  width: 100%;
+}
+.upload-demo{
+  display: inline-flex;
+}
+.upload-demo >>>.el-upload--text{
+  width: 100%;
+  height: 100%;
+  border: none;
+  margin: 0 5px;
+  border-radius: 3px;
+}
+</style>

src/components/basicData/sampleQualityControl.vue

+<template>
+  <!-- 样本质控情况库 -->
+  <div style="background:#fff;border-radius:6px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);">
+    <header>
+      <el-button type="success" @click="addList">添加</el-button>
+      <el-button type="success" @click="saveList">保存</el-button>
+      <!-- <el-button type="primary" @click="downModel('样本质控情况模板.xlsx')">导入模板下载</el-button>
+      <el-upload class="upload-demo" ref="fileExcel" action="/" accept=".xlsx, .xls" :before-upload="beforeUpload">
+        <el-button type="primary">导入</el-button>
+      </el-upload> -->
+      <el-button type="danger" @click="delList">删除</el-button>
+      <el-input placeholder="请输入查询条件" prefix-icon="el-icon-search" v-model="queryCondition" @keyup.enter.native="getData()" class="searchClass" clearable @clear="getData()" style="width:20%"></el-input>
+    </header>
+    <main>
+      <el-table ref="multipleTable" :data="tableData" border :height='tableheight' highlight-current-row @row-click="rowclick" @selection-change="handleSelectionChange" @cell-click="clickCell">
+        <el-table-column type="selection"></el-table-column>
+        <el-table-column type="index" label="序号" align="center">
+            <template slot-scope="scope"><span>{{scope.$index+(page.pageindex - 1) * page.pagesize + 1}} </span></template>
+        </el-table-column>
+        <el-table-column prop="controlStep" label="质控环节">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit1" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.controlStep"></el-input>
+            <span v-else >{{ scope.row.controlStep}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="controlResult" label="质控结果">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.controlResult"></el-input>
+            <span v-else >{{ scope.row.controlResult}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="sortNo" label="排序号">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit2" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.sortNo"></el-input>
+            <span v-else >{{ scope.row.sortNo}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </main>
+    <footer>
+      <div  class="block" style="text-align:center;">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="page.pagesize" layout="total,sizes, prev, pager, next" :total="total" background :current-page="page.pageindex">
+        </el-pagination>
+    </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import { GetSampleControl,GetGuid,SaveSampleControl,DelSampleControl,ImportSampleControl,GetImportTemplatePath } from "../../api/api";
+export default {
+  data() {
+    return {
+      tableData: [],
+      page:{
+        pageindex:1,
+        pagesize:10
+      },
+      total:0,
+      tableheight: window.innerHeight - 220,
+      row:[],
+      queryCondition:''
+    }
+  },
+  created(){
+    window.onresize = () => {
+      this.tableheight=window.innerHeight - 220
+    }
+  },
+  mounted(){
+    this.getData()
+  },
+  methods: {
+    getData(){
+      this.page.queryCondition=this.queryCondition
+      let para=this.page
+      GetSampleControl(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          res.data.data.forEach(item => {
+            item.edit=false
+            item.edit1=false
+            item.edit2=false
+          });
+          this.tableData=res.data.data
+          this.total=res.data.totalCount
+        }
+      })
+    },
+    handleCurrentChange(val) {
+      this.page.pageindex = val
+      this.getData()
+    },
+    handleSizeChange(val){
+      this.pagesize = val
+      this.getData()
+    },
+    // 点击单元格
+    clickCell(row, column, cell, event){ 
+      if(cell.cellIndex===2){
+         row.edit1 = true
+      }
+      if(cell.cellIndex===3){
+         row.edit= true
+      }
+      if(cell.cellIndex===4){
+         row.edit2= true
+      }
+    },
+    inputBlur(item) {
+      let tableD = this.tableData;
+      tableD.forEach(function (item) {
+        item.edit = false
+        item.edit1 = false
+        item.edit2 = false
+      });
+    },
+    // 输入框内容发生变化事件
+    textChange(index,row){ 
+      this.tableData[index].id=0
+    },
+    //点击行触发，选中或不选中复选框
+    rowclick(row) {
+      // this.$refs.multipleTable.toggleRowSelection(row)
+    },
+    //选中列表行
+    handleSelectionChange(val) {
+      this.row=val
+    },
+    // 添加
+    addList(){
+      GetGuid().then(res=>{
+        let addForm={
+          sampleControlOID:res.data,
+          controlStep: '',
+          controlResult: '',
+          sortNo:'',
+          indication:'',
+          edit:true,
+          edit1:true,
+          edit2:true,
+          id:0
+        }
+        this.tableData.push(addForm)
+      })
+      
+    },
+    // 保存
+    saveList(){
+      let para=[]
+      this.tableData.forEach(item=>{
+        if(item.id===0){
+          para.push(item)
+        }
+      })
+      this.$confirm('确认保存吗?', '提示', { type: 'warning'}).then(()=>{
+        SaveSampleControl(para).then(res=>{
+          if(res.status=='SUCCESS'){
+            this.$message({ type: 'success', message: '保存成功!'});
+            this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+        }).catch(()=>{ return})
+    },
+    // 删除
+    delList(){
+      if(this.row.length===0){
+        this.$message({ type: 'error', message: '请先选择需要删除的内容'})
+        return
+      }
+      let para=[]
+      this.row.forEach(item=>{
+        para.push(item.sampleControlOID)
+      })
+      this.$confirm('确认删除吗?', '提示', { type: 'warning'}).then(()=>{
+        DelSampleControl(para).then(res=>{
+          if(res.status=='SUCCESS'){
+              this.$message({ type: 'success', message: '删除成功!'});
+              this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+      }).catch(()=>{ return})
+    },
+    // 导入
+    beforeUpload(file) {
+      let formData = new FormData();
+      formData.append("Excel", file);
+      this.$confirm("确认导入吗?", "提示", { type: "warning" }).then(() => {
+        ImportSampleControl(formData).then(res => {
+          if (res.status === "SUCCESS") {
+            this.$message({ type: "success", message: "导入成功!" });
+            this.getData();
+          } else {
+            this.$message({ type: "error", message: res.msg });
+          }
+        });
+      })
+      .catch(() => {  return;});
+    },
+    downModel(data){
+      let para={FileName:data}
+      GetImportTemplatePath(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          window.open('http://'+res.data)
+        }else{
+          this.$message({ type: 'error', message: res.msg});
+        }
+      })
+    }
+  },
+  directives: {
+    focus: {
+      inserted: function(el) {
+        el.querySelector('input').focus()
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+header {
+  height: 40px;
+  padding:5px;
+  width: 100%;
+}
+.upload-demo{
+  display: inline-flex;
+}
+.upload-demo >>>.el-upload--text{
+  width: 100%;
+  height: 100%;
+  border: none;
+  margin: 0 5px;
+  border-radius: 3px;
+}
+</style>

src/components/basicData/sampleType.vue

+<template>
+  <!-- 样本类型库 -->
+  <div style="background:#fff;border-radius:6px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);">
+    <header>
+      <el-button type="success" @click="addList">添加</el-button>
+      <el-button type="success" @click="saveList">保存</el-button>
+      <el-button type="primary" @click="downModel('样本类型模板.xlsx')">导入模板下载</el-button>
+      <el-upload class="upload-demo" ref="fileExcel" action="/" accept=".xlsx, .xls" :before-upload="beforeUpload">
+        <el-button type="primary">导入</el-button>
+      </el-upload>
+      <el-button type="danger" @click="delList">删除</el-button>
+      <el-input placeholder="请输入查询条件" prefix-icon="el-icon-search" v-model="queryCondition" @keyup.enter.native="getData()" class="searchClass" clearable @clear="getData()" style="width:20%"></el-input>
+
+    </header>
+    <main>
+      <el-table ref="multipleTable" :data="tableData" border :height='tableheight' highlight-current-row @row-click="rowclick" @selection-change="handleSelectionChange" @cell-click="clickCell">
+        <el-table-column type="selection"></el-table-column>
+        <el-table-column type="index" label="序号" align="center">
+            <template slot-scope="scope"><span>{{scope.$index+(page.pageindex - 1) * page.pagesize + 1}} </span></template>
+        </el-table-column>
+        <el-table-column prop="sampleCode" label="样本编号">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit1" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.sampleCode"></el-input>
+            <span v-else >{{ scope.row.sampleCode}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="sampleName" label="样本名称">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.sampleName"></el-input>
+            <span v-else >{{ scope.row.sampleName}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </main>
+    <footer>
+      <div  class="block" style="text-align:center;">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="page.pagesize" layout="total,sizes, prev, pager, next" :total="total" background :current-page="page.pageindex">
+        </el-pagination>
+    </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import { GetSampleType,GetGuid,SaveSampleType,DelSampleType,ImportSampleType,GetImportTemplatePath } from "../../api/api";
+export default {
+  data() {
+    return {
+      tableData: [],
+      page:{
+        pageindex:1,
+        pagesize:10
+      },
+      total:0,
+      tableheight: window.innerHeight - 220,
+      row:[],
+      queryCondition:''
+    }
+  },
+  created(){
+    window.onresize = () => {
+      this.tableheight=window.innerHeight - 220
+    }
+  },
+  mounted(){
+    this.getData()
+  },
+  methods: {
+    getData(){
+      this.page.queryCondition=this.queryCondition
+      let para=this.page
+      GetSampleType(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          res.data.data.forEach(item => {
+            item.edit=false
+            item.edit1=false
+          });
+          this.tableData=res.data.data
+          this.total=res.data.totalCount
+        }
+      })
+    },
+    handleCurrentChange(val) {
+      this.page.pageindex = val
+      this.getData()
+    },
+    handleSizeChange(val){
+      this.pagesize = val
+      this.getData()
+    },
+    // 点击单元格
+    clickCell(row, column, cell, event){ 
+      if(cell.cellIndex===2){
+         row.edit1 = true
+      }
+      if(cell.cellIndex===3){
+         row.edit= true
+      }
+    },
+    inputBlur(item) {
+      let tableD = this.tableData;
+      tableD.forEach(function (item) {
+        item.edit = false
+        item.edit1 = false
+      });
+    },
+    // 输入框内容发生变化事件
+    textChange(index,row){ 
+      this.tableData[index].id=0
+    },
+    //点击行触发，选中或不选中复选框
+    rowclick(row) {
+      // this.$refs.multipleTable.toggleRowSelection(row)
+    },
+    //选中列表行
+    handleSelectionChange(val) {
+      this.row=val
+    },
+    // 添加
+    addList(){
+      GetGuid().then(res=>{
+        let addForm={
+          sampleTypeOID:res.data,
+          sampleCode: '',
+          sampleName: '',
+          edit:true,
+          edit1:true,
+          id:0
+        }
+        this.tableData.push(addForm)
+      })
+      
+    },
+    // 保存
+    saveList(){
+      let para=[]
+      this.tableData.forEach(item=>{
+        if(item.id===0){
+          para.push(item)
+        }
+      })
+      this.$confirm('确认保存吗?', '提示', { type: 'warning'}).then(()=>{
+        SaveSampleType(para).then(res=>{
+          if(res.status=='SUCCESS'){
+            this.$message({ type: 'success', message: '保存成功!'});
+            this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+        }).catch(()=>{ return})
+    },
+    // 删除
+    delList(){
+      if(this.row.length===0){
+        this.$message({ type: 'error', message: '请先选择需要删除的内容'})
+        return
+      }
+      let para=[]
+      this.row.forEach(item=>{
+        para.push(item.sampleTypeOID)
+      })
+      this.$confirm('确认删除吗?', '提示', { type: 'warning'}).then(()=>{
+        DelSampleType(para).then(res=>{
+          if(res.status=='SUCCESS'){
+              this.$message({ type: 'success', message: '删除成功!'});
+              this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+      }).catch(()=>{ return})
+    },
+    // 导入
+    beforeUpload(file) {
+      let formData = new FormData();
+      formData.append("Excel", file);
+      this.$confirm("确认导入吗?", "提示", { type: "warning" }).then(() => {
+        ImportSampleType(formData).then(res => {
+          if (res.status === "SUCCESS") {
+            this.$message({ type: "success", message: "导入成功!" });
+            this.getData();
+          } else {
+            this.$message({ type: "error", message: res.msg });
+          }
+        });
+      })
+      .catch(() => {  return;});
+    },
+    downModel(data){
+      let para={FileName:data}
+      GetImportTemplatePath(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          window.open('http://'+res.data)
+        }else{
+          this.$message({ type: 'error', message: res.msg});
+        }
+      })
+    }
+  },
+  directives: {
+    focus: {
+      inserted: function(el) {
+        el.querySelector('input').focus()
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+header {
+  height: 40px;
+  padding:5px;
+  width: 100%;
+}
+.upload-demo{
+  display: inline-flex;
+}
+.upload-demo >>>.el-upload--text{
+  width: 100%;
+  height: 100%;
+  border: none;
+  margin: 0 5px;
+  border-radius: 3px;
+}
+
+</style>
+<style>
+.searchClass{
+  margin: 0 8px;
+}
+</style>
\ No newline at end of file

src/components/basicData/targetDrug.vue

+<template>
+  <!-- 靶药库 -->
+  <div style="background:#fff;border-radius:6px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);">
+    <header>
+      <el-button type="success" @click="addList">添加</el-button>
+      <el-button type="success" @click="saveList">保存</el-button>
+      <el-button type="primary" @click="downModel('靶药模板.xlsx')">导入模板下载</el-button>
+      <el-upload class="upload-demo" ref="fileExcel" action="/" accept=".xlsx, .xls" :before-upload="beforeUpload">
+        <el-button type="primary">导入</el-button>
+      </el-upload>
+      <el-button type="danger" @click="delList">删除</el-button>
+      <el-input placeholder="请输入查询条件" prefix-icon="el-icon-search" v-model="queryCondition" @keyup.enter.native="getData()" class="searchClass" clearable @clear="getData()" style="width:20%"></el-input>
+    </header>
+    <main>
+      <el-table ref="multipleTable" :data="tableData" border :height='tableheight' highlight-current-row @row-click="rowclick" @selection-change="handleSelectionChange" @cell-click="clickCell">
+        <el-table-column type="selection"></el-table-column>
+        <el-table-column type="index" label="序号" align="center">
+            <template slot-scope="scope"><span>{{scope.$index+(page.pageindex - 1) * page.pagesize + 1}} </span></template>
+        </el-table-column>
+        <el-table-column prop="code" label="编码">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit1" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.code"></el-input>
+            <span v-else >{{ scope.row.code}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="medicineName" label="药品名称">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.medicineName"></el-input>
+            <span v-else >{{ scope.row.medicineName}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="diseaseType" label="疾病类型">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit2" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.diseaseType"></el-input>
+            <span v-else >{{ scope.row.diseaseType}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="indication" label="适应症">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit3" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.indication"></el-input>
+            <span v-else >{{ scope.row.indication}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </main>
+    <footer>
+      <div  class="block" style="text-align:center;">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="page.pagesize" layout="total,sizes, prev, pager, next" :total="total" background :current-page="page.pageindex">
+        </el-pagination>
+    </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import { GetTargetedMedicine,GetGuid,SaveTargetedMedicine,DelTargetedMedicine,ImportTargetedMedicine,GetImportTemplatePath } from "../../api/api";
+export default {
+  data() {
+    return {
+      tableData: [],
+      page:{
+        pageindex:1,
+        pagesize:10
+      },
+      total:0,
+      tableheight: window.innerHeight - 220,
+      row:[],
+      queryCondition:''
+    }
+  },
+  created(){
+    window.onresize = () => {
+      this.tableheight=window.innerHeight - 220
+    }
+  },
+  mounted(){
+    this.getData()
+  },
+  methods: {
+    getData(){
+      this.page.queryCondition=this.queryCondition
+      let para=this.page
+      GetTargetedMedicine(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          res.data.data.forEach(item => {
+            item.edit=false
+            item.edit1=false
+            item.edit2=false
+            item.edit3=false
+          });
+          this.tableData=res.data.data
+          this.total=res.data.totalCount
+        }
+      })
+    },
+    handleCurrentChange(val) {
+      this.page.pageindex = val
+      this.getData()
+    },
+    handleSizeChange(val){
+      this.pagesize = val
+      this.getData()
+    },
+    // 点击单元格
+    clickCell(row, column, cell, event){ 
+      if(cell.cellIndex===2){
+         row.edit1 = true
+      }
+      if(cell.cellIndex===3){
+         row.edit= true
+      }
+      if(cell.cellIndex===4){
+         row.edit2= true
+      }if(cell.cellIndex===5){
+         row.edit3= true
+      }
+    },
+    inputBlur(item) {
+      let tableD = this.tableData;
+      tableD.forEach(function (item) {
+        item.edit = false
+        item.edit1 = false
+        item.edit2 = false
+        item.edit3 = false
+      });
+    },
+    // 输入框内容发生变化事件
+    textChange(index,row){ 
+      this.tableData[index].id=0
+    },
+    //点击行触发，选中或不选中复选框
+    rowclick(row) {
+      // this.$refs.multipleTable.toggleRowSelection(row)
+    },
+    //选中列表行
+    handleSelectionChange(val) {
+      this.row=val
+    },
+    // 添加
+    addList(){
+      GetGuid().then(res=>{
+        let addForm={
+          targetedMedicineOID:res.data,
+          code: '',
+          medicineName: '',
+          diseaseType:'',
+          indication:'',
+          edit:true,
+          edit1:true,
+          edit2:true,
+          edit3:true,
+          id:0
+        }
+        this.tableData.push(addForm)
+      })
+      
+    },
+    // 保存
+    saveList(){
+      let para=[]
+      this.tableData.forEach(item=>{
+        if(item.id===0){
+          para.push(item)
+        }
+      })
+      this.$confirm('确认保存吗?', '提示', { type: 'warning'}).then(()=>{
+        SaveTargetedMedicine(para).then(res=>{
+          if(res.status=='SUCCESS'){
+            this.$message({ type: 'success', message: '保存成功!'});
+            this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+        }).catch(()=>{ return})
+    },
+    // 删除
+    delList(){
+      if(this.row.length===0){
+        this.$message({ type: 'error', message: '请先选择需要删除的内容'})
+        return
+      }
+      let para=[]
+      this.row.forEach(item=>{
+        para.push(item.targetedMedicineOID)
+      })
+      this.$confirm('确认删除吗?', '提示', { type: 'warning'}).then(()=>{
+        DelTargetedMedicine(para).then(res=>{
+          if(res.status=='SUCCESS'){
+              this.$message({ type: 'success', message: '删除成功!'});
+              this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+      }).catch(()=>{ return})
+    },
+    // 导入
+    beforeUpload(file) {
+      let formData = new FormData();
+      formData.append("Excel", file);
+      this.$confirm("确认导入吗?", "提示", { type: "warning" }).then(() => {
+        ImportTargetedMedicine(formData).then(res => {
+          if (res.status === "SUCCESS") {
+            this.$message({ type: "success", message: "导入成功!" });
+            this.getData();
+          } else {
+            this.$message({ type: "error", message: res.msg });
+          }
+        });
+      })
+      .catch(() => {  return;});
+    },
+    downModel(data){
+      let para={FileName:data}
+      GetImportTemplatePath(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          window.open('http://'+res.data)
+        }else{
+          this.$message({ type: 'error', message: res.msg});
+        }
+      })
+    }
+  },
+  directives: {
+    focus: {
+      inserted: function(el) {
+        el.querySelector('input').focus()
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+header {
+  height: 40px;
+  padding:5px;
+  width: 100%;
+}
+.upload-demo{
+  display: inline-flex;
+}
+.upload-demo >>>.el-upload--text{
+  width: 100%;
+  height: 100%;
+  border: none;
+  margin: 0 5px;
+  border-radius: 3px;
+}
+</style>

src/components/basicData/tumorTypes.vue

+<template>
+  <!-- 肿瘤类型库 -->
+  <div style="background:#fff;border-radius:6px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);">
+    <header>
+      <el-button type="success" @click="addList">添加</el-button>
+      <el-button type="success" @click="saveList">保存</el-button>
+      <el-button type="primary" @click="downModel('肿瘤类型模板.xlsx')">导入模板下载</el-button>
+      <el-upload class="upload-demo" ref="fileExcel" action="/" accept=".xlsx, .xls" :before-upload="beforeUpload">
+        <el-button type="primary">导入</el-button>
+      </el-upload>
+      <el-button type="danger" @click="delList">删除</el-button>
+      <el-input placeholder="请输入查询条件" prefix-icon="el-icon-search" v-model="queryCondition" @keyup.enter.native="getData()" class="searchClass" clearable @clear="getData()" style="width:20%" ></el-input>
+    </header>
+    <main>
+      <el-table ref="multipleTable" :data="tableData" border :height='tableheight' highlight-current-row @row-click="rowclick" @selection-change="handleSelectionChange" @cell-click="clickCell">
+        <el-table-column type="selection"></el-table-column>
+        <el-table-column type="index" label="序号" align="center">
+            <template slot-scope="scope"><span>{{scope.$index+(page.pageindex - 1) * page.pagesize + 1}} </span></template>
+        </el-table-column>
+        <el-table-column prop="tumorsCode" label="编码">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit1" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.tumorsCode"></el-input>
+            <span v-else >{{ scope.row.tumorsCode}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="tumorsName" label="名称">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.tumorsName"></el-input>
+            <span v-else >{{ scope.row.tumorsName}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </main>
+    <footer>
+      <div  class="block" style="text-align:center;">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="page.pagesize" layout="total,sizes, prev, pager, next" :total="total" background :current-page="page.pageindex">
+        </el-pagination>
+    </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import { GetTumorsType,GetGuid,SaveTumorsType,DelTumorsType,ImportTumorsType,GetImportTemplatePath } from "../../api/api";
+export default {
+  data() {
+    return {
+      tableData: [],
+      page:{
+        pageindex:1,
+        pagesize:10
+      },
+      total:0,
+      tableheight: window.innerHeight - 220,
+      row:[],
+      queryCondition:''
+    }
+  },
+  created(){
+    window.onresize = () => {
+      this.tableheight=window.innerHeight - 220
+    }
+  },
+  mounted(){
+    this.getData()
+  },
+  methods: {
+    getData(){
+      this.page.queryCondition=this.queryCondition
+      let para=this.page
+      GetTumorsType(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          res.data.data.forEach(item => {
+            item.edit=false
+            item.edit1=false
+          });
+          this.tableData=res.data.data
+          this.total=res.data.totalCount
+        }
+      })
+    },
+    handleCurrentChange(val) {
+      this.page.pageindex = val
+      this.getData()
+    },
+    handleSizeChange(val){
+      this.pagesize = val
+      this.getData()
+    },
+    // 点击单元格
+    clickCell(row, column, cell, event){ 
+      if(cell.cellIndex===2){
+         row.edit1 = true
+      }
+      if(cell.cellIndex===3){
+         row.edit= true
+      }
+    },
+    inputBlur(item) {
+      let tableD = this.tableData;
+      tableD.forEach(function (item) {
+        item.edit = false
+        item.edit1 = false
+      });
+    },
+    // 输入框内容发生变化事件
+    textChange(index,row){ 
+      this.tableData[index].id=0
+    },
+    //点击行触发，选中或不选中复选框
+    rowclick(row) {
+      // this.$refs.multipleTable.toggleRowSelection(row)
+    },
+    //选中列表行
+    handleSelectionChange(val) {
+      this.row=val
+    },
+    // 添加
+    addList(){
+      GetGuid().then(res=>{
+        let addForm={
+          tumorsTypeOID:res.data,
+          tumorsCode: '',
+          tumorsName: '',
+          edit:true,
+          edit1:true,
+          id:0
+        }
+        this.tableData.push(addForm)
+      })
+      
+    },
+    // 保存
+    saveList(){
+      let para=[]
+      this.tableData.forEach(item=>{
+        if(item.id===0){
+          para.push(item)
+        }
+      })
+      this.$confirm('确认保存吗?', '提示', { type: 'warning'}).then(()=>{
+        SaveTumorsType(para).then(res=>{
+          if(res.status=='SUCCESS'){
+            this.$message({ type: 'success', message: '保存成功!'});
+            this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+        }).catch(()=>{ return})
+    },
+    // 删除
+    delList(){
+      if(this.row.length===0){
+        this.$message({ type: 'error', message: '请先选择需要删除的内容'})
+        return
+      }
+      let para=[]
+      this.row.forEach(item=>{
+        para.push(item.tumorsTypeOID)
+      })
+      this.$confirm('确认删除吗?', '提示', { type: 'warning'}).then(()=>{
+        DelTumorsType(para).then(res=>{
+          if(res.status=='SUCCESS'){
+              this.$message({ type: 'success', message: '删除成功!'});
+              this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+      }).catch(()=>{ return})
+    },
+    // 导入
+    beforeUpload(file) {
+      let formData = new FormData();
+      formData.append("Excel", file);
+      this.$confirm("确认导入吗?", "提示", { type: "warning" }).then(() => {
+        ImportTumorsType(formData).then(res => {
+          if (res.status === "SUCCESS") {
+            this.$message({ type: "success", message: "导入成功!" });
+            this.getData();
+          } else {
+            this.$message({ type: "error", message: res.msg });
+          }
+        });
+      })
+      .catch(() => {  return;});
+    },
+    downModel(data){
+      let para={FileName:data}
+      GetImportTemplatePath(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          window.open('http://'+res.data)
+        }else{
+          this.$message({ type: 'error', message: res.msg});
+        }
+      })
+    }
+  },
+  directives: {
+    focus: {
+      inserted: function(el) {
+        el.querySelector('input').focus()
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+header {
+  height: 40px;
+  padding:5px;
+  width: 100%;
+}
+.upload-demo{
+  display: inline-flex;
+}
+.upload-demo >>>.el-upload--text{
+  width: 100%;
+  height: 100%;
+  border: none;
+  margin: 0 5px;
+  border-radius: 3px;
+}
+
+</style>

src/components/common/Header.vue

+<template>
+  <div class="header">
+    <!-- 折叠按钮 -->
+    <div class="collapse-btn" @click="collapseChage">
+      <i class="el-icon-menu"></i>
+    </div>
+    <div class="logo">监测报表输出系统项目</div>
+    <div class="header-right">
+      <div class="header-user-con">
+        <!-- 全屏显示 -->
+        <!-- <div class="btn-fullscreen" @click="handleFullScreen">
+          <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
+            <i class="el-icon-rank"></i>
+          </el-tooltip>
+        </div> -->
+        <!-- 消息中心 -->
+        <!-- <div class="btn-bell">
+          <el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">
+            <router-link to="/tabs">
+              <i class="el-icon-bell"></i>
+            </router-link>
+          </el-tooltip>
+          <span class="btn-bell-badge" v-if="message"></span>
+        </div> -->
+        <!-- 用户头像 -->
+        <div class="user-avator">
+          <img :src="this.sysUserAvatar" />
+        </div>
+        <span style="font-size:15px;margin-left:10px;">欢迎你</span>
+        <!-- 用户名下拉菜单 -->
+        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
+          <span class="el-dropdown-link">
+            {{username}}
+            <i class="el-icon-caret-bottom"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item @click.native="editDialogShow">修改信息</el-dropdown-item>
+            <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <!-- 信息修改弹窗 -->
+        <el-dialog title="信息修改" :visible.sync="dialogFormVisible" @close="closeDialog">
+          <el-form ref="form" :model="form" :rules="rules">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="编号" :label-width="formLabelWidth">
+                  <el-input v-model="form.coN_EMP_NUM" autocomplete="off" :disabled="true"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="姓名" :label-width="formLabelWidth">
+                  <el-input v-model="form.personName" autocomplete="off"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-form-item label="性别" :label-width="formLabelWidth">
+              <el-radio-group v-model="form.sex" autocomplete="off">
+                <el-radio label="男"></el-radio>
+                <el-radio label="女"></el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="岗位名称" :label-width="formLabelWidth">
+                  <el-input v-model="form.postName" autocomplete="off"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="出生日期" :label-width="formLabelWidth">
+                  <el-date-picker v-model="form.birthday" type="date" placeholder="请选择" autocomplete="off" style="width:100%"></el-date-picker>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item prop="mobilePhone" label="移动电话" :label-width="formLabelWidth">
+                  <el-input v-model="form.mobilePhone" autocomplete="off"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item prop="coN_EMAIL_ADDR" label="邮箱地址" :label-width="formLabelWidth">
+                  <el-input v-model="form.coN_EMAIL_ADDR" autocomplete="off"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-form-item label="备注" :label-width="formLabelWidth">
+              <el-input v-model="form.text1" type="textarea"></el-input>
+            </el-form-item>
+            <el-form-item prop="passWord" label="密码" :label-width="formLabelWidth">
+              <el-input
+                v-model="form.passWord"
+                placeholder="包含至少6位的字母和数字，区分大小写"
+                autocomplete="off"
+                show-password
+              ></el-input>
+            </el-form-item>
+            <!-- <el-form-item label="新密码" :label-width="formLabelWidth" prop="newPwd">
+              <el-input placeholder="包含至少6位的字母和数字，区分大小写" autocomplete="off" show-password></el-input>
+            </el-form-item>
+            <el-form-item label="密码确认" :label-width="formLabelWidth" prop="sureNewPwd">
+              <el-input placeholder="包含至少6位的字母和数字，区分大小写" autocomplete="off" show-password></el-input>
+            </el-form-item>-->
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="dialogFormVisible = false" size="small">取消</el-button>
+            <el-button type="primary" @click="SureEditPwd" size="small">确定</el-button>
+          </div>
+        </el-dialog>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import bus from '../common/bus'
+import avatar from '../.././assets/img/img.jpg'
+
+export default {
+  data() {
+    return {
+      collapse: false,
+      fullscreen: false,
+      name: 'linxin',
+      message: 2,
+      username: localStorage.getItem('username'),
+      dialogFormVisible: false,
+      formLabelWidth: '80px',
+      sysUserAvatar: avatar,
+      rules: {
+        coN_EMAIL_ADDR: [
+          // {
+          //   required: true,
+          //   message: '请输入邮箱地址',
+          //   trigger: 'blur'
+          // },
+          {
+            type: 'email',
+            message: '请输入正确的邮箱地址',
+            trigger: ['blur', 'change'],
+          },
+        ],
+        mobilePhone: [
+          {
+            // required: true,
+            pattern: /^1[34578]\d{9}$/, //可以写正则表达式
+            message: '目前只支持中国大陆的手机号码',
+            trigger: 'blur',
+          },
+        ],
+        passWord: [
+          {
+            required: false,
+            message: '请输入密码',
+            trigger: 'blur',
+          },
+          {
+            min: 6,
+            max: 30,
+            message: '长度在 6 到 30 个字符',
+          },
+          {
+            pattern: /^(\w){6,20}$/,
+            message: '只能输入6-20个字母、数字、下划线',
+          },
+        ],
+      },
+      form: {
+        birthday: '',
+        coN_EMAIL_ADDR: '',
+        coN_EMP_NUM: '',
+        mobilePhone: '',
+        passWord: '',
+        personName: localStorage.getItem('username'),
+        postName: '',
+        sex: '',
+        text1: '',
+      },
+    }
+  },
+  computed: {
+    // username(){
+    //     let username = localStorage.getItem('username');
+    //     return username ? username : this.name;
+    // }
+  },
+  methods: {
+    // 用户名下拉菜单选择事件
+    handleCommand(command) {
+      if (command == 'loginout') {
+        localStorage.clear()
+        this.$router.push('/login')
+        bus.$emit('exit','exit')
+      }
+    },
+    // 侧边栏折叠
+    collapseChage() {
+      this.collapse = !this.collapse
+      bus.$emit('collapse', this.collapse)
+    },
+    // 全屏事件
+    handleFullScreen() {
+      let element = document.documentElement
+      if (this.fullscreen) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen()
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen()
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen()
+        }
+      } else {
+        if (element.requestFullscreen) {
+          element.requestFullscreen()
+        } else if (element.webkitRequestFullScreen) {
+          element.webkitRequestFullScreen()
+        } else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen()
+        } else if (element.msRequestFullscreen) {
+          // IE11
+          element.msRequestFullscreen()
+        }
+      }
+      this.fullscreen = !this.fullscreen
+    },
+    editDialogShow() {
+      this.dialogFormVisible = true
+      this.$axios
+        .get(this.url.root + 'System/GetUserList', {
+          params: {
+            oid: localStorage.getItem('oId'),
+            api_key: localStorage.getItem('token'),
+          },
+        })
+        .then(res => {
+
+          this.form = res.data.data
+        })
+    },
+    //确认修改
+    SureEditPwd() {
+      
+      let para = {
+        ucmL_UserOID: localStorage.getItem('oId'),
+        // api_key: localStorage.getItem('token'),
+        coN_EMP_NUM: this.form.coN_EMP_NUM,
+        personName: this.form.personName,
+        sex: this.form.sex,
+        birthday: this.form.birthday,
+        text1: this.form.text1,
+        mobilePhone: this.form.mobilePhone,
+        coN_EMAIL_ADDR: this.form.coN_EMAIL_ADDR,
+        postName: this.form.postName,
+        passWord: this.form.passWord,
+      }
+      this.$confirm('确认修改？', '提示', {
+        type: 'warning',
+      })
+        .then(_ => {
+          this.$axios
+            .post(this.url.root + 'System/EditUser?'+'api_key='+localStorage.getItem('token'), para)
+            .then(res => {
+              if(res.data.data==true)
+              {
+                this.$message({
+                  message: '修改成功!',
+                  type: 'success'
+                });
+                this.dialogFormVisible=false
+              }else{
+                 this.$message.error('修改失败！');
+              }
+            })
+        })
+        //取消
+        .catch(_ => {})
+    },
+    //关闭弹窗 清空文本框
+    closeDialog() {
+      this.dialogFormVisible = false
+    },
+  },
+  mounted() {
+    if (document.body.clientWidth < 1366) {
+      this.collapseChage()
+    }
+    if(localStorage.getItem("photo")==='null'){
+      this.sysUserAvatar=avatar
+    }else{
+      this.sysUserAvatar=localStorage.getItem("photo")
+    }
+    // this.sysUserAvatar = localStorage.getItem("photo") || avatar;
+
+  },
+}
+</script>
+<style scoped>
+.header {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 70px;
+  font-size: 22px;
+  color: #fff;
+}
+.collapse-btn {
+  float: left;
+  padding: 0 21px;
+  cursor: pointer;
+  line-height: 70px;
+}
+.header .logo {
+  float: left;
+  width: 300px;
+  line-height: 70px;
+}
+.header-right {
+  float: right;
+  padding-right: 50px;
+}
+.header-user-con {
+  display: flex;
+  height: 70px;
+  align-items: center;
+}
+.btn-fullscreen {
+  transform: rotate(45deg);
+  margin-right: 5px;
+  font-size: 24px;
+}
+.btn-bell,
+.btn-fullscreen {
+  position: relative;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  border-radius: 15px;
+  cursor: pointer;
+}
+.btn-bell-badge {
+  position: absolute;
+  right: 0;
+  top: -2px;
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background: #f56c6c;
+  color: #fff;
+}
+.btn-bell .el-icon-bell {
+  color: #fff;
+}
+.user-name {
+  margin-left: 10px;
+}
+.user-avator {
+  margin-left: 20px;
+}
+.user-avator img {
+  display: block;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+.el-dropdown-link {
+  color: #fff;
+  cursor: pointer;
+}
+.el-dropdown-menu__item {
+  text-align: center;
+}
+</style>

src/components/common/Home.vue

+<template>
+    <div class="wrapper">
+        <v-head></v-head>
+        <v-sidebar></v-sidebar>
+        <div class="content-box" :class="{'content-collapse':collapse}">
+            <v-tags></v-tags>
+            <div class="content">
+                <transition name="move" mode="out-in">
+                    <keep-alive :include="tagsList">
+                        <router-view style="height:100%"></router-view>
+                    </keep-alive>
+                </transition>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import vHead from './Header.vue';
+    import vSidebar from './Sidebar.vue';
+    import vTags from './Tags.vue';
+    import bus from './bus';
+    export default {
+        data(){
+            return {
+                tagsList: [],
+                collapse: false
+            }
+        },
+        components:{
+            vHead, vSidebar, vTags
+        },
+        created(){
+            bus.$on('collapse', msg => {
+                this.collapse = msg;
+            })
+
+            // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
+            bus.$on('tags', msg => {
+                
+                let arr = [];
+                for(let i = 0, len = msg.length; i < len; i ++){
+                    msg[i].name && arr.push(msg[i].name);
+                }
+                this.tagsList = arr;
+            })
+        }
+    }
+</script>
+
+
+
+
+    p{
+        font-size: 12px;
+    }
+</style>

src/components/common/Sidebar.vue

+<template>
+  <div class="sidebar">
+    <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="white" text-color="black" active-text-color="#20a0ff" router>
+      <template v-for="(item,index) in items">
+        <template v-if="item.children">
+          <el-submenu :index="index+''" :key="item.sys_BusiPortalMenuOID">
+            <template slot="title">
+              <i :class="item.iconCls"></i>
+              <span slot="name">{{ item.name }}</span>
+            </template>
+            <template v-for="subItem in item.children">
+              <el-submenu v-if="subItem.children" :index="subItem.route" :key="subItem.sys_BusiPortalMenuOID">
+                <template slot="title">{{ subItem.name }}</template>
+                <el-menu-item v-for="(threeItem,i) in subItem.children" :key="i" :index="threeItem.route">{{ threeItem.name }}</el-menu-item>
+              </el-submenu>
+              <el-menu-item v-else :index="subItem.route" :key="subItem.sys_BusiPortalMenuOID">{{ subItem.name }}</el-menu-item>
+            </template>
+          </el-submenu>
+        </template>
+        <template v-else>
+          <el-menu-item :index="item.route" :key="item.sys_BusiPortalMenuOID">
+            <i :class="item.iconCls"></i>
+            <span slot="name">{{ item.name }}</span>
+          </el-menu-item>
+        </template>
+      </template>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+import bus from '../common/bus'
+import { GetMenu } from '../../api/api'
+export default {
+  data() {
+    return {
+      collapse: false,
+      items: [],
+    }
+  },
+  computed: {
+    onRoutes() {
+    //   return this.$route.path.replace('/', '')
+      return this.$route.path
+
+    },
+  },
+  created() {
+    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
+    bus.$on('collapse', msg => {
+      this.collapse = msg
+    })
+    this.getMenu()
+  },
+  methods: {
+    getMenu() {
+      GetMenu().then(res => {
+        if(res.status==='SUCCESS'){
+            this.items=res.data
+            this.delChildren(this.items)
+        }else{
+            this.$message.error(res.msg)
+        }
+      })
+    },
+    // 去除children=[]
+    delChildren(arr){
+        arr.forEach(item => {
+            if(item.children.length===0){
+                delete item.children
+            }else{
+                this.delChildren(item.children)
+            }
+        });
+    }
+  },
+}
+</script>
+
+<style scoped>
+.sidebar {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 70px;
+  bottom: 0;
+  overflow-y: scroll;
+}
+.sidebar::-webkit-scrollbar {
+  width: 0;
+}
+.sidebar-el-menu:not(.el-menu--collapse) {
+  width: 250px;
+}
+.sidebar > ul {
+  height: 100%;
+}
+.sidebar > ul:hover {
+  background-color: mediumspringgreen;
+}
+</style>

src/components/common/Tags.vue

+<template>
+    <div class="tags" v-if="showTags">
+        <ul>
+            <li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">
+                <router-link :to="item.path" class="tags-li-title">
+                    {{item.title}}
+                </router-link>
+                <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
+            </li>
+        </ul>
+        <div class="tags-close-box">
+            <el-dropdown @command="handleTags">
+                <el-button size="mini" type="primary">
+                    标签选项<i class="el-icon-arrow-down el-icon--right"></i>
+                </el-button>
+                <el-dropdown-menu size="small" slot="dropdown">
+                    <el-dropdown-item command="other">关闭其他</el-dropdown-item>
+                    <el-dropdown-item command="all">关闭所有</el-dropdown-item>
+                </el-dropdown-menu>
+            </el-dropdown>
+        </div>
+    </div>
+</template>
+
+<script>
+    import bus from './bus';
+    export default {
+        data() {
+            return {
+                tagsList: []
+            }
+        },
+        methods: {
+            isActive(path) {
+                return path === this.$route.fullPath;
+            },
+            // 关闭单个标签
+            closeTags(index) {
+                const delItem = this.tagsList.splice(index, 1)[0];
+                const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
+                if (item) {
+                    delItem.path === this.$route.fullPath && this.$router.push(item.path);
+                }else{
+                    // this.$router.push('/');
+                }
+                // console.log(this.tagsList)
+                // console.log(item)
+                bus.$emit('tags', this.tagsList);
+            },
+            // 关闭全部标签
+            closeAll(){
+                this.tagsList = [];
+                // this.$router.push('/');
+            },
+            // 关闭其他标签
+            closeOther(){
+                const curItem = this.tagsList.filter(item => {
+                    return item.path === this.$route.fullPath;
+                })
+                this.tagsList = curItem;
+            },
+            // 设置标签
+            setTags(route){
+                const isExist = this.tagsList.some(item => {
+                    return item.path === route.fullPath;
+                })
+                if(!isExist){
+                    if(this.tagsList.length >= 8){
+                        this.tagsList.shift();
+                    }
+                    this.tagsList.push({
+                        title: route.meta.title,
+                        path: route.fullPath,
+                        name: route.matched[1].components.default.name
+                    })
+                }
+                bus.$emit('tags', this.tagsList);
+            },
+            handleTags(command){
+                command === 'other' ? this.closeOther() : this.closeAll();
+            }
+        },
+        computed: {
+            showTags() {
+                return this.tagsList.length > 0;
+            }
+        },
+        watch:{
+            $route(newValue, oldValue){
+                this.setTags(newValue);
+            }
+        },
+        created(){
+            this.setTags(this.$route);
+            // 监听关闭当前页面的标签页
+            bus.$on('close_current_tags', () => {
+                for (let i = 0, len = this.tagsList.length; i < len; i++) {
+                    const item = this.tagsList[i];
+                    if(item.path === this.$route.fullPath){
+                        if(i < len - 1){
+                            this.$router.push(this.tagsList[i+1].path);
+                        }else if(i > 0){
+                            this.$router.push(this.tagsList[i-1].path);
+                        }else{
+                            this.$router.push('/');
+                        }
+                        this.tagsList.splice(i, 1);
+                        break;
+                    }
+                }
+            })
+        }
+    }
+
+</script>
+
+
+<style>
+    .tags {
+        position: relative;
+        height: 30px;
+        overflow: hidden;
+        background: #fff;
+        padding-right: 120px;
+        box-shadow: 0 5px 10px #ddd;
+    }
+
+    .tags ul {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+    }
+
+    .tags-li {
+        float: left;
+        margin: 3px 5px 2px 3px;
+        border-radius: 3px;
+        font-size: 12px;
+        overflow: hidden;
+        cursor: pointer;
+        height: 23px;
+        line-height: 23px;
+        border: 1px solid #e9eaec;
+        background: #fff;
+        padding: 0 5px 0 12px;
+        vertical-align: middle;
+        color: #666;
+        -webkit-transition: all .3s ease-in;
+        -moz-transition: all .3s ease-in;
+        transition: all .3s ease-in;
+    }
+
+    .tags-li:not(.active):hover {
+        background: #f8f8f8;
+    }
+
+    .tags-li.active {
+        color: #fff;
+    }
+
+    .tags-li-title {
+        float: left;
+        max-width: 80px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-right: 5px;
+        color: #666;
+    }
+
+    .tags-li.active .tags-li-title {
+        color: #fff;
+    }
+
+    .tags-close-box {
+        position: absolute;
+        right: 0;
+        top: 0;
+        box-sizing: border-box;
+        padding-top: 1px;
+        text-align: center;
+        width: 110px;
+        height: 30px;
+        background: #fff;
+        box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
+        z-index: 10;
+    }
+
+</style>

src/components/common/bus.js

+import Vue from 'vue';
+
+// 使用 Event Bus
+const bus = new Vue();
+
+export default bus;
\ No newline at end of file

src/components/common/directives.js

+import Vue from 'vue';
+
+// v-dialogDrag: 弹窗拖拽属性
+Vue.directive('dialogDrag', {
+    bind(el, binding, vnode, oldVnode) {
+        const dialogHeaderEl = el.querySelector('.el-dialog__header');
+        const dragDom = el.querySelector('.el-dialog');
+
+        dialogHeaderEl.style.cssText += ';cursor:move;'
+        dragDom.style.cssText += ';top:0px;'
+
+        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+        const sty = (() => {
+            if (window.document.currentStyle) {
+                return (dom, attr) => dom.currentStyle[attr];
+            } else {
+                return (dom, attr) => getComputedStyle(dom, false)[attr];
+            }
+        })()
+
+        dialogHeaderEl.onmousedown = (e) => {
+            // 鼠标按下，计算当前元素距离可视区的距离
+            const disX = e.clientX - dialogHeaderEl.offsetLeft;
+            const disY = e.clientY - dialogHeaderEl.offsetTop;
+
+            const screenWidth = document.body.clientWidth; // body当前宽度
+            const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取) 
+
+            const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
+            const dragDomheight = dragDom.offsetHeight; // 对话框高度
+
+            const minDragDomLeft = dragDom.offsetLeft;
+            const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
+
+            const minDragDomTop = dragDom.offsetTop;
+            const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
+
+
+            // 获取到的值带px 正则匹配替换
+            let styL = sty(dragDom, 'left');
+            let styT = sty(dragDom, 'top');
+
+            // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+            if (styL.includes('%')) {
+                styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100);
+                styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100);
+            } else {
+                styL = +styL.replace(/\px/g, '');
+                styT = +styT.replace(/\px/g, '');
+            };
+
+            document.onmousemove = function (e) {
+                // 通过事件委托，计算移动的距离 
+                let left = e.clientX - disX;
+                let top = e.clientY - disY;
+
+                // 边界处理
+                if (-(left) > minDragDomLeft) {
+                    left = -(minDragDomLeft);
+                } else if (left > maxDragDomLeft) {
+                    left = maxDragDomLeft;
+                }
+
+                if (-(top) > minDragDomTop) {
+                    top = -(minDragDomTop);
+                } else if (top > maxDragDomTop) {
+                    top = maxDragDomTop;
+                }
+
+                // 移动当前元素  
+                dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
+            };
+
+            document.onmouseup = function (e) {
+                document.onmousemove = null;
+                document.onmouseup = null;
+            };
+        }
+    }
+})

src/components/common/i18n.js

+export const messages = {
+    'zh': {
+        i18n: {
+            breadcrumb: '国际化产品',
+            tips: '通过切换语言按钮，来改变当前内容的语言。',
+            btn: '切换英文',
+            title1: '常用用法',
+            p1: '要是你把你的秘密告诉了风，那就别怪风把它带给树。',
+            p2: '没有什么比信念更能支撑我们度过艰难的时光了。',
+            p3: '只要能把自己的事做好，并让自己快乐，你就领先于大多数人了。',
+            title2: '组件插值',
+            info: 'Element组件需要国际化，请参考 {action}。',
+            value: '文档'
+        }
+    },
+    'en': {
+        i18n: {
+            breadcrumb: 'International Products',
+            tips: 'Click on the button to change the current language. ',
+            btn: 'Switch Chinese',
+            title1: 'Common usage',
+            p1: "If you reveal your secrets to the wind you should not blame the wind for  revealing them to the trees.",
+            p2: "Nothing can help us endure dark times better than our faith. ",
+            p3: "If you can do what you do best and be happy, you're further along in life  than most people.",
+            title2: 'Component interpolation',
+            info: 'The default language of Element is Chinese. If you wish to use another language, please refer to the {action}.',
+            value: 'documentation'
+        }
+    }
+}
\ No newline at end of file

src/components/common/location-sdk.js

+export default class Location {
+    static getLocation(callback) {
+        if (navigator.geolocation) {
+            let options = {
+                enableHighAccuracy: true,
+                maximumAge: 1000
+            };
+ 
+            navigator.geolocation.getCurrentPosition(
+                (res) => {
+                    console.log("get location successful:" + res);
+                    let location = {};
+                    location.longitude = res.coords.longitude;
+                    location.latitude = res.coords.latitude;
+                    callback.success(location);
+                },
+                (res) => {
+                    console.log("get location failed:" + res);
+                    callback.error(res);
+                },
+                options
+            );
+        } else {
+            callback.error("Geo location not supported.");
+        }
+    }
+}

src/components/common/loginSuccess.vue

+<template>
+    <div class="loginSuccess">
+
+    </div>
+</template>
+
+
+<script>
+export default {
+    data(){
+        return{
+
+        }
+    }
+}
+</script>
+
+
+<style scoped>
+    .loginSuccess{
+        background-color: white;
+        position: relative;
+        width:100%;
+        height:100%;
+        background-image: url(../../assets/img/login-bg.png);
+        background-size: 100%;
+    }
+</style>
\ No newline at end of file

src/components/indicators/geneResults.vue

+<template>
+  <!-- 基因检测结果导入 -->
+  <div style="background:#fff;border-radius:6px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);">
+    <header>
+      <el-button type="success" @click="addList">添加</el-button>
+      <el-button type="success" @click="saveList">保存</el-button>
+      <el-button type="primary" @click="downModel('基因检测结果模板.xlsx')">导入模板下载</el-button>
+      <el-upload class="upload-demo" ref="fileExcel" action="/" accept=".xlsx, .xls" :before-upload="beforeUpload">
+        <el-button type="primary">导入</el-button>
+      </el-upload>
+      <el-button type="danger" @click="delList">删除</el-button>
+      <el-input placeholder="请输入查询条件" prefix-icon="el-icon-search" v-model="queryCondition" @keyup.enter.native="getData()" class="searchClass" clearable @clear="getData()" style="width:20%"></el-input>
+    </header>
+    <main>
+      <el-table ref="multipleTable" :data="tableData" border :height='tableheight' highlight-current-row @row-click="rowclick" @selection-change="handleSelectionChange" @cell-click="clickCell">
+        <el-table-column type="selection"></el-table-column>
+        <el-table-column type="index" label="序号" align="center">
+            <template slot-scope="scope"><span>{{scope.$index+(page.pageindex - 1) * page.pagesize + 1}} </span></template>
+        </el-table-column>
+        <el-table-column prop="efficacyProgram" label="药效方案">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit1" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.efficacyProgram"></el-input>
+            <span v-else >{{ scope.row.efficacyProgram}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="geneName" label="基因名称">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.geneName"></el-input>
+            <span v-else >{{ scope.row.geneName}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="detectionSite" label="检测位点">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit2" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.detectionSite"></el-input>
+            <span v-else >{{ scope.row.detectionSite}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="pmid" label="PMID">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit3" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.pmid"></el-input>
+            <span v-else >{{ scope.row.pmid}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="targetedMedicine" label="靶药">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit4" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.targetedMedicine"></el-input>
+            <span v-else >{{ scope.row.targetedMedicine}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="mutationSites" label="突变位点">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit5" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.mutationSites"></el-input>
+            <span v-else >{{ scope.row.mutationSites}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </main>
+    <footer>
+      <div  class="block" style="text-align:center;">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="page.pagesize" layout="total,sizes, prev, pager, next" :total="total" background :current-page="page.pageindex">
+        </el-pagination>
+    </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import { GetGeneResult,GetGuid,SaveGeneResult,DelGeneResult,ImportGeneResult,GetImportTemplatePath } from "../../api/api";
+export default {
+  data() {
+    return {
+      tableData: [],
+      page:{
+        pageindex:1,
+        pagesize:10
+      },
+      total:0,
+      tableheight: window.innerHeight - 220,
+      row:[],
+      queryCondition:''
+    }
+  },
+  created(){
+    window.onresize = () => {
+      this.tableheight=window.innerHeight - 220
+    }
+  },
+  mounted(){
+    this.getData()
+  },
+  methods: {
+    getData(){
+      this.page.queryCondition=this.queryCondition
+      let para=this.page
+      GetGeneResult(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          res.data.data.forEach(item => {
+            item.edit=false
+            item.edit1=false
+            item.edit2=false
+            item.edit3=false
+            item.edit4=false
+            item.edit5=false
+          });
+          this.tableData=res.data.data
+          this.total=res.data.totalCount
+        }
+      })
+    },
+    handleCurrentChange(val) {
+      this.page.pageindex = val
+      this.getData()
+    },
+    handleSizeChange(val){
+      this.pagesize = val
+      this.getData()
+    },
+    // 点击单元格
+    clickCell(row, column, cell, event){ 
+      if(cell.cellIndex===2){
+         row.edit1 = true
+      }
+      if(cell.cellIndex===3){
+         row.edit= true
+      }
+      if(cell.cellIndex===4){
+         row.edit2= true
+      }if(cell.cellIndex===5){
+         row.edit3= true
+      }if(cell.cellIndex===6){
+         row.edit4= true
+      }if(cell.cellIndex===7){
+         row.edit5= true
+      }
+    },
+    inputBlur(item) {
+      let tableD = this.tableData;
+      tableD.forEach(function (item) {
+        item.edit = false
+        item.edit1 = false
+        item.edit2 = false
+        item.edit3 = false
+        item.edit4 = false
+        item.edit5 = false
+      });
+    },
+    // 输入框内容发生变化事件
+    textChange(index,row){ 
+      this.tableData[index].id=0
+    },
+    //点击行触发，选中或不选中复选框
+    rowclick(row) {
+      // this.$refs.multipleTable.toggleRowSelection(row)
+    },
+    //选中列表行
+    handleSelectionChange(val) {
+      this.row=val
+    },
+    // 添加
+    addList(){
+      GetGuid().then(res=>{
+        let addForm={
+          geneDetectionResultOID:res.data,
+          efficacyProgram: '',
+          geneName: '',
+          detectionSite:'',
+          pmid:'',
+          targetedMedicine:'',
+          mutationSites:'',
+          edit:true,
+          edit1:true,
+          edit2:true,
+          edit3:true,
+          edit4:true,
+          edit5:true,
+          id:0
+        }
+        this.tableData.push(addForm)
+      })
+      
+    },
+    // 保存
+    saveList(){
+      let para=[]
+      this.tableData.forEach(item=>{
+        if(item.id===0){
+          para.push(item)
+        }
+      })
+      this.$confirm('确认保存吗?', '提示', { type: 'warning'}).then(()=>{
+        SaveGeneResult(para).then(res=>{
+          if(res.status=='SUCCESS'){
+            this.$message({ type: 'success', message: '保存成功!'});
+            this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+        }).catch(()=>{ return})
+    },
+    // 删除
+    delList(){
+      if(this.row.length===0){
+        this.$message({ type: 'error', message: '请先选择需要删除的内容'})
+        return
+      }
+      let para=[]
+      this.row.forEach(item=>{
+        para.push(item.geneDetectionResultOID)
+      })
+      this.$confirm('确认删除吗?', '提示', { type: 'warning'}).then(()=>{
+        DelGeneResult(para).then(res=>{
+          if(res.status=='SUCCESS'){
+              this.$message({ type: 'success', message: '删除成功!'});
+              this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+      }).catch(()=>{ return})
+    },
+    // 导入
+    beforeUpload(file) {
+      let formData = new FormData();
+      formData.append("Excel", file);
+      this.$confirm("确认导入吗?", "提示", { type: "warning" }).then(() => {
+        ImportGeneResult(formData).then(res => {
+          if (res.status === "SUCCESS") {
+            this.$message({ type: "success", message: "导入成功!" });
+            this.getData();
+          } else {
+            this.$message({ type: "error", message: res.msg });
+          }
+        });
+      })
+      .catch(() => {  return;});
+    },
+    downModel(data){
+      let para={FileName:data}
+      GetImportTemplatePath(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          window.open('http://'+res.data)
+        }else{
+          this.$message({ type: 'error', message: res.msg});
+        }
+      })
+    }
+  },
+  directives: {
+    focus: {
+      inserted: function(el) {
+        el.querySelector('input').focus()
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+header {
+  height: 40px;
+  padding:5px;
+  width: 100%;
+}
+.upload-demo{
+  display: inline-flex;
+}
+.upload-demo >>>.el-upload--text{
+  width: 100%;
+  height: 100%;
+  border: none;
+  margin: 0 5px;
+  border-radius: 3px;
+}
+</style>

src/components/indicators/geneticRisk.vue

+<template>
+  <!-- 遗传风险 -->
+  <div style="background:#fff;border-radius:6px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);">
+    <header>
+      <el-button type="success" @click="addList">添加</el-button>
+      <el-button type="success" @click="saveList">保存</el-button>
+      <el-button type="primary" @click="downModel('遗传风险模板.xlsx')">导入模板下载</el-button>
+      <el-upload class="upload-demo" ref="fileExcel" action="/" accept=".xlsx, .xls" :before-upload="beforeUpload">
+        <el-button type="primary">导入</el-button>
+      </el-upload>
+      <el-button type="danger" @click="delList">删除</el-button>
+      <el-input placeholder="请输入查询条件" prefix-icon="el-icon-search" v-model="queryCondition" @keyup.enter.native="getData()" class="searchClass" clearable @clear="getData()" style="width:20%"></el-input>
+    </header>
+    <main>
+      <el-table ref="multipleTable" :data="tableData" border :height='tableheight' highlight-current-row @row-click="rowclick" @selection-change="handleSelectionChange" @cell-click="clickCell">
+        <el-table-column type="selection"></el-table-column>
+        <el-table-column type="index" label="序号" align="center">
+            <template slot-scope="scope"><span>{{scope.$index+(page.pageindex - 1) * page.pagesize + 1}} </span></template>
+        </el-table-column>
+        <el-table-column prop="sampleCode" label="样本编号">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit1" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.sampleCode"></el-input>
+            <span v-else >{{ scope.row.sampleCode}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="geneName" label="基因">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.geneName"></el-input>
+            <span v-else >{{ scope.row.geneName}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="mutations" label="突变情况">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit2" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.mutations"></el-input>
+            <span v-else >{{ scope.row.mutations}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="mutationType" label="突变类型">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit3" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.mutationType"></el-input>
+            <span v-else >{{ scope.row.mutationType}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="heterozygosity" label="杂合性">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit4" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.heterozygosity"></el-input>
+            <span v-else >{{ scope.row.heterozygosity}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="riskAssessment" label="风险评估">
+          <template slot-scope="scope">
+            <el-input v-focus v-if="scope.row.edit5" @blur="inputBlur" @change="textChange(scope.$index,scope.row)" v-model="scope.row.riskAssessment"></el-input>
+            <span v-else >{{ scope.row.riskAssessment}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </main>
+    <footer>
+      <div  class="block" style="text-align:center;">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="page.pagesize" layout="total,sizes, prev, pager, next" :total="total" background :current-page="page.pageindex">
+        </el-pagination>
+    </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+import { GetGeneticRisks,GetGuid,SaveGeneticRisks,DelGeneticRisks,ImportGeneticRisks,GetImportTemplatePath } from "../../api/api";
+export default {
+  data() {
+    return {
+      tableData: [],
+      page:{
+        pageindex:1,
+        pagesize:10
+      },
+      total:0,
+      tableheight: window.innerHeight - 220,
+      row:[],
+      queryCondition:''
+    }
+  },
+  created(){
+    window.onresize = () => {
+      this.tableheight=window.innerHeight - 220
+    }
+  },
+  mounted(){
+    this.getData()
+  },
+  methods: {
+    getData(){
+      this.page.queryCondition=this.queryCondition
+      let para=this.page
+      GetGeneticRisks(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          res.data.data.forEach(item => {
+            item.edit=false
+            item.edit1=false
+            item.edit2=false
+            item.edit3=false
+            item.edit4=false
+            item.edit5=false
+          });
+          this.tableData=res.data.data
+          this.total=res.data.totalCount
+        }
+      })
+    },
+    handleCurrentChange(val) {
+      this.page.pageindex = val
+      this.getData()
+    },
+    handleSizeChange(val){
+      this.pagesize = val
+      this.getData()
+    },
+    // 点击单元格
+    clickCell(row, column, cell, event){ 
+      if(cell.cellIndex===2){
+         row.edit1 = true
+      }
+      if(cell.cellIndex===3){
+         row.edit= true
+      }
+      if(cell.cellIndex===4){
+         row.edit2= true
+      }if(cell.cellIndex===5){
+         row.edit3= true
+      }if(cell.cellIndex===6){
+         row.edit4= true
+      }if(cell.cellIndex===7){
+         row.edit5= true
+      }
+    },
+    inputBlur(item) {
+      let tableD = this.tableData;
+      tableD.forEach(function (item) {
+        item.edit = false
+        item.edit1 = false
+        item.edit2 = false
+        item.edit3 = false
+        item.edit4 = false
+        item.edit5 = false
+      });
+    },
+    // 输入框内容发生变化事件
+    textChange(index,row){ 
+      this.tableData[index].id=0
+    },
+    //点击行触发，选中或不选中复选框
+    rowclick(row) {
+      // this.$refs.multipleTable.toggleRowSelection(row)
+    },
+    //选中列表行
+    handleSelectionChange(val) {
+      this.row=val
+    },
+    // 添加
+    addList(){
+      GetGuid().then(res=>{
+        let addForm={
+          geneticRisksOID:res.data,
+          sampleCode: '',
+          geneName: '',
+          mutations:'',
+          mutationType:'',
+          heterozygosity:'',
+          riskAssessment:'',
+          edit:true,
+          edit1:true,
+          edit2:true,
+          edit3:true,
+          edit4:true,
+          edit5:true,
+          id:0
+        }
+        this.tableData.push(addForm)
+      })
+      
+    },
+    // 保存
+    saveList(){
+      let para=[]
+      this.tableData.forEach(item=>{
+        if(item.id===0){
+          para.push(item)
+        }
+      })
+      this.$confirm('确认保存吗?', '提示', { type: 'warning'}).then(()=>{
+        SaveGeneticRisks(para).then(res=>{
+          if(res.status=='SUCCESS'){
+            this.$message({ type: 'success', message: '保存成功!'});
+            this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+        }).catch(()=>{ return})
+    },
+    // 删除
+    delList(){
+      if(this.row.length===0){
+        this.$message({ type: 'error', message: '请先选择需要删除的内容'})
+        return
+      }
+      let para=[]
+      this.row.forEach(item=>{
+        para.push(item.geneticRisksOID)
+      })
+      this.$confirm('确认删除吗?', '提示', { type: 'warning'}).then(()=>{
+        DelGeneticRisks(para).then(res=>{
+          if(res.status=='SUCCESS'){
+              this.$message({ type: 'success', message: '删除成功!'});
+              this.getData();
+          }
+          else{
+            this.$message({ type: 'error', message: res.msg});
+          }
+        })
+      }).catch(()=>{ return})
+    },
+    // 导入
+    beforeUpload(file) {
+      let formData = new FormData();
+      formData.append("Excel", file);
+      this.$confirm("确认导入吗?", "提示", { type: "warning" }).then(() => {
+        ImportGeneticRisks(formData).then(res => {
+          if (res.status === "SUCCESS") {
+            this.$message({ type: "success", message: "导入成功!" });
+            this.getData();
+          } else {
+            this.$message({ type: "error", message: res.msg });
+          }
+        });
+      })
+      .catch(() => {  return;});
+    },
+    downModel(data){
+      let para={FileName:data}
+      GetImportTemplatePath(para).then(res=>{
+        if(res.status==='SUCCESS'){
+          window.open('http://'+res.data)
+        }else{
+          this.$message({ type: 'error', message: res.msg});
+        }
+      })
+    }
+  },
+  directives: {
+    focus: {
+      inserted: function(el) {
+        el.querySelector('input').focus()
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+header {
+  height: 40px;
+  padding:5px;
+  width: 100%;
+}
+.upload-demo{
+  display: inline-flex;
+}
+.upload-demo >>>.el-upload--text{
+  width: 100%;
+  height: 100%;
+  border: none;
+  margin: 0 5px;
+  border-radius: 3px;
+}
+</style>

src/components/page/Login.vue

+<template>
+  <div class="login-wrap">
+    <div class="ms-login">
+      <div class="ms-box">
+        <div class="ms-shuru">
+          <div class="ms-title">登&nbsp;&nbsp;&nbsp;录</div>
+          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
+            <el-form-item prop="username" class="qqq">
+              <el-input v-model="ruleForm.username" placeholder="请输入账号"></el-input>
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input class="qqq" type="password" placeholder="请输入密码" v-model="ruleForm.password"></el-input>
+            </el-form-item>
+            <el-form-item prop="verification">
+              <div style="display:flex;justify-content: space-between;width:100%">
+                <el-input class="qqq" type="password" placeholder="请输入验证码" v-model="ruleForm.verification" style="width:60%" @keyup.enter.native="submitForm('ruleForm')"></el-input>
+                <div style="width:30%;">
+                  <img :src="imgSrc" alt style="cursor:pointer;width:100%;vertical-align: top;" title="换一个" @click="getCode"/>
+                </div>
+              </div>
+            </el-form-item>
+            <div class="login-btn">
+              <el-button type @click="submitForm('ruleForm')" v-loading="loading" style="background:#409eff;color:#fefbfb;border-radius:4px;height:50px;">
+                <p class="ms-denglu">登&nbsp;&nbsp;录</p>
+              </el-button>
+            </div>
+          </el-form>
+        </div>
+        <div class="ms-bg"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Login, GetVerCode } from '../../api/api'
+import loading from 'element-ui'
+import bus from '../common/bus'
+import md5 from 'js-md5'
+export default {
+  data: function() {
+    return {
+      imgSrc: '',
+      imgCode: '',
+      loading: false,
+      ruleForm: {
+        username: '',
+        password: '',
+        verification: '',
+      },
+      rules: {
+        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
+        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+        verification: [
+          { required: true, message: '请输入验证码', trigger: 'blur' },
+        ],
+      },
+    }
+  },
+  mounted() {
+    this.getCode()
+  },
+  methods: {
+    getCode() {
+      GetVerCode().then(res => {
+        if (res.status === 'SUCCESS') {
+          this.imgSrc = res.data.image
+          this.imgCode = res.data.id
+        }
+      })
+    },
+    submitForm(formName) {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          let para = {
+            uid: this.ruleForm.username,
+            pwd: this.ruleForm.password,
+            VerCode: this.ruleForm.verification,
+            VerCodeID: this.imgCode,
+          }
+          Login(para).then(res => {
+            if (res.status === 'SUCCESS') {
+              localStorage.setItem('username', res.data.employeeName)
+              localStorage.setItem('oId', res.data.ucmL_UserOID)
+              localStorage.setItem('token', res.data.token)
+              localStorage.setItem('userId', res.data.usR_LOGIN)
+              localStorage.setItem('photo', res.data.photo)
+
+              this.$message.success('登陆成功')
+              this.$router.push('/sampleType')
+            } else {
+              this.getCode()
+              this.$message.error(res.msg)
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+  },
+  created() {},
+}
+</script>
+
+<style scoped>
+* {
+  text-align: 25px;
+}
+.login-wrap {
+  /* margin-top: 75px; */
+  background-color: white;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-size: 100%;
+  margin-bottom: 75px;
+  /* background-repeat: no-repeat; */
+
+  text-align: center;
+  vertical-align: middle;
+}
+.ms-title {
+  font-size: 26px;
+  color: #3984e6;
+  font-family: '微软雅黑';
+  font-weight: bold;
+}
+.ms-login {
+  position: absolute;
+  width: 100%;
+  height: 545px;
+  vertical-align: middle;
+  top: 100px;
+  /* padding-top: 200px; */
+  /* position: fixed;
+        left:50%;
+        top:60%;
+        width:350px;
+        margin:-190px 0 0 -175px;
+        border-radius: 5px;
+        background: white;
+        overflow: hidden;
+        z-index: 9999;
+        box-shadow: 5px 0 10px -5px gray,-5px 0 10px -5px gray; */
+}
+.ms-box {
+  height: 100%;
+  width: 1165px;
+  margin: 0 auto;
+  position: relative;
+  border: 1px solid;
+}
+.ms-shuru {
+  position: absolute;
+  right: 55px;
+  width: 395px;
+  top: 93px;
+  height: 100%;
+}
+.ms-bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: mediumspringgreen;
+  height: 100%;
+  width: 600px;
+}
+.ms-content {
+  /* border:1px solid red; */
+  margin-top: 50px;
+}
+.login-btn {
+  text-align: center;
+  height: 50px;
+}
+.login-btn button {
+  width: 100%;
+  height: 36px;
+  margin-bottom: 10px;
+}
+.login-tips {
+  font-size: 12px;
+  line-height: 30px;
+  color: #fff;
+}
+
+.qqq >>> .el-input__inner {
+  border-radius: 20px;
+  height: 50px;
+}
+.el-input {
+  height: 50px;
+}
+.ms-denglu {
+  font-size: 20px;
+  font-family: '微软雅黑';
+}
+</style>
\ No newline at end of file

src/components/reportOutput/reportDerived.vue

+<template>
+    <div style="background:#fff;border-radius:6px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);">
+        <div style="display:flex;position: absolute;top:300px;left:400px;">
+            <section style="width:300px;height:30px;border:1px solid"></section>
+            <el-button style="margin-left:20px;" type="primary">导入报告</el-button>
+        </div>
+    </div>
+</template>
+
+
+<script>
+export default {
+    data(){
+        return{
+
+        }
+    }
+}
+</script>
+
+
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/components/systemManage/Button_definition.vue

+<template>
+    <div class="Button_definition" style="height: 100%;">
+        <!-- 按钮定义 -->
+        <!-- 顶部按钮组 -->
+        <el-row :span='24' style="padding-left: 10px;padding-top: 10px;">
+            <el-button type="primary" @click="ButtonAdd" size="small">添加</el-button>
+            <el-button type="primary" @click="ButtonSave" size="small">保存</el-button>
+            <el-button type="primary" @click="ButtonDelete" size="small">删除</el-button>
+        </el-row>
+        <!-- 表格展示 -->
+        <el-row>
+            <el-col :span='24' style="padding-top: 10px">
+                <el-table :height="tableheight" :data="dataTable" @cell-click="clickCell" @selection-change="changeSelection" tooltip-effect="dark" max-height="750" highlight-current-row :cell-style="cellStyle" :header-cell-style="rowClass">
+                    <el-table-column type="selection" width="55"></el-table-column>
+                    <el-table-column type="index" label="序号">
+                        <template slot-scope="scope"><span>{{scope.$index+(page.pageindex - 1) * page.pagesize + 1}}</span></template>
+                    </el-table-column>
+                    <el-table-column prop="name" label="按钮名称">
+                        <template slot-scope="scope">
+                            <template v-if="scope.row.editflag1">
+                                <el-input v-focus v-model="scope.row.name" @change="textChange(scope.$index,scope.row)" class="edit-input" size="small" auto-complete="off" @blur="inputBlur"></el-input>
+                            </template>
+                            <span v-else>{{ scope.row.name }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="iconClass" label="样式名称"></el-table-column>
+                    <el-table-column prop="iconClass" label="图标">
+                        <template slot-scope="scope">
+                            <i class="iconfont" :class="scope.row.iconClass" :model="scope.row.iconClass" @click="clickIcon(scope.$index,scope.row)"></i>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="size" label="尺寸">
+                        <template slot-scope="scope">
+                            <el-select v-model="scope.row.size" placeholder="请选择" @change="selectChange(scope.row)">
+                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="busType" label="类型">
+                        <template slot-scope="scope">
+                            <el-select v-model="scope.row.busType" placeholder="请选择" @change="selectChange(scope.row)">
+                                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="plain" label="是否朴素按钮">
+                        <template slot-scope="scope">
+                            <el-switch v-model="scope.row.plain" class="switchStyleBtn" :width="50" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否" @change="textChange(scope.$index,scope.row)"></el-switch>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="round" label="是否圆角按钮">
+                        <template slot-scope="scope">
+                            <el-switch v-model="scope.row.round" class="switchStyleBtn" :width="50" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否" @change="textChange(scope.$index,scope.row)"></el-switch>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="circle" label="是否圆形按钮">
+                        <template slot-scope="scope">
+                            <el-switch v-model="scope.row.circle" class="switchStyleBtn" :width="50" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否" @change="textChange(scope.$index,scope.row)"></el-switch>
+                        </template>  
+                    </el-table-column>
+                    <el-table-column prop="loading" label="是否加载中状态">
+                        <template slot-scope="scope">
+                            <el-switch v-model="scope.row.loading" class="switchStyleBtn" :width="50" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否" @change="textChange(scope.$index,scope.row)"></el-switch>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="disabled" label="是否禁用状态">
+                        <template slot-scope="scope">
+                            <el-switch v-model="scope.row.disabled" class="switchStyleBtn" :width="50" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否" @change="textChange(scope.$index,scope.row)"></el-switch>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="autofocus" label="是否默认聚焦">
+                        <template slot-scope="scope">
+                            <el-switch v-model="scope.row.autofocus" class="switchStyleBtn" :width="50" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否" @change="textChange(scope.$index,scope.row)"></el-switch>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="nativeType" label="原生Type类型">
+                        <template slot-scope="scope">
+                            <el-select v-model="scope.row.nativeType" placeholder="请选择" @change="selectChange(scope.row)">
+                                <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-col>
+        </el-row>
+        <!-- 分页 -->
+        <div class="block" style="text-align:center;background:#fff;padding-top:8px;border-radius: 6px;">
+            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="page.pagesize" layout="total,sizes, prev, pager, next" :total="totalCount" background :current-page="page.pageindex"></el-pagination>
+        </div>
+        <!-- 右侧抽屉 -->
+        <el-drawer title="样式图标" custom-class='iconDrawer' :visible.sync="drawer" size='20%' :direction="direction" :before-close="handleClose">
+            <div class="icons">
+                <i class="iconfont iconfonts" :class="item" v-for="item of iconList" :key="item" @click="iconSelected(item)"></i>
+            </div>
+        </el-drawer>
+    </div>
+</template>
+
+<script>
+import { GetAutoGuid, GetButResourceData, SaveButResource, DeleteButResource } from "../../api/api"
+export default {
+    data() {
+        return {
+            dataTable: [],
+            tableheight: window.innerHeight - 240,
+            page: {
+                pageindex: 1,
+                pagesize: 10
+            },
+            totalCount: 0,
+            edit: false,
+            sys_ButResourceOID: '',
+            name: '',
+            iconClass: '',
+            busType: '',
+            nativeType: '',
+            plain: true,
+            round: true,
+            circle: true,
+            loading: true,
+            disabled: true,
+            autofocus: true,
+            editflag1: true,
+            drawer: false,
+            direction: 'rtl',
+            rowArr : [],
+            num: 0,
+            options1: [
+                { value: "mini", label: "mini" },
+                { value: "small", label: "small" },
+                { value: "medium", label: "medium" }
+            ],
+            options2: [
+                { value: "primary", label: "primary" },
+                { value: "success", label: "success" },
+                { value: "warning", label: "warning" },
+                { value: "danger", label: "danger" },
+                { value: "info", label: "info" },
+                { value: "text", label: "text" }
+            ],
+            options3: [
+                { value: "button", label: "button" },
+                { value: "submit", label: "submit" },
+                { value: "reset", label: "reset" }
+            ],
+            iconList: [ 'elicon-all-bumen2', 'elicon-all-renyuanjieshao', 'elicon-all-renyuandingwei', 'elicon-all-renyuanxiaozu', 'elicon-all-bumen4', 'elicon-all-commpany', 'elicon-all-icon', 'elicon-all-qunfengxiugaiweihurenyuan', 'elicon-all-13qinshugongzuodanwei', 'elicon-all-dudanwei', 'elicon-all-laiwangdanweipingtai', 'elicon-all-bumen5', 'elicon-all-bumen6',    'elicon-all-bumen7', 'elicon-all-renyuanzhanghao', 'elicon-all-zhuanyetuandui', 'elicon-all-qiyerenyuanguanli', 'elicon-all-renyuanguanli', 'elicon-all-bumenguanli', 'elicon-all-icon-account', 'elicon-all-icon-add-person', 'elicon-all-suyaniconchanpinleibufenzuodaohangbufen87', 'elicon-all-renyuanxinxi-copy',   'elicon-all-yusuandanwei', 'elicon-all-xianchangrenyuan', 'elicon-all-xunjianrenyuan', 'elicon-all-iconbmgl', 'elicon-all-untitled85', 'elicon-all-untitled18',  'elicon-all-ceshi', 'elicon-all-jiguanshiyezhanghuchuli', 'elicon-all-renyuanhebing', 'elicon-all-xunjianrenyuan1', 'elicon-all-bumen', 'elicon-all-renyuanjieshao1', 'elicon-all-loufang', 'elicon-all-shigongdanwei', 'elicon-all-shigongdanweisel', 'elicon-all-guanlidanwei', 'elicon-all-renren1', 'elicon-all-renyuan', 'elicon-all-gangweiqiehuan', 'elicon-all-renyuanquanxian', 'elicon-all-wtsy', 'elicon-all-bumen9', 'elicon-all-25_danwei', 'elicon-all-yewurenyuanxinxiguanli', 'elicon-all-wtOrg', 'elicon-all-minzhengxinxi-canjirenyuan', 'elicon-all-minzhengxinxi-dibaorenyuan',  'elicon-all-minzhengxinxi-jingwairenyuan', 'elicon-all-minzhengxinxi-xiagangrenyuan', 'elicon-all-minzhengxinxi-kunnanrenyuan', 'elicon-all-minzhengxinxi-shiyerenyuan', 'elicon-all-renyuanleixing-gongsizhiyuan', 'elicon-all-renyuanleixing-changzhurenyuan', 'elicon-all-renyuanleixing-liudongrenyuan', 'elicon-all-renyuanzhuangtai-daishen', 'elicon-all-renyuanzhuangtai-shixiao', 'elicon-all-renyuanzhuangtai-banli', 'elicon-all-renyuanzhuangtai-zhengchang', 'elicon-all-renyuanzhuangtai-yigu', 'elicon-all-zhongdianrenyuan-jingshenbing', 'elicon-all-zhongdianrenyuan-shangfangrenyuan', 'elicon-all-zhongdianrenyuan-shedurenyuan', 'elicon-all-zhongdianrenyuan-shewenrenyuan', 'elicon-all-zhongdianrenyuan-shekongrenyuan', 'elicon-all-zhongdianrenyuan-zhongdaxingshiqiankerenyuan', 'elicon-all-zhongdianrenyuan-zaitaorenyuan', 'elicon-all-wuliaodanwei', 'elicon-all-jiuyuanrenyuan', 'elicon-all-qiujiurenyuan', 'elicon-all-biaoshilei_paibanrenyuan',  'elicon-all-web-icon-', 'elicon-all-renyuansousuo', 'elicon-all-renyuanzengjia', 'elicon-all-gangweiquanxian', 'elicon-all-bumenguanli1', 'elicon-all-renyuanliebiao', 'elicon-all-staff', 'elicon-all-measurementunit', 'elicon-all-RMB', 'elicon-all-bumenguanli2', 'elicon-all-renyuanliyongshuai', 'elicon-all-renyuandanganguanli', 'elicon-all-renyuanlianjietianjia', 'elicon-all-renyuanjietinglianjietianjia', 'elicon-all-renyuanlianjietianjia1', 'elicon-all-renyuantianjia', 'elicon-all-staff1', 'elicon-all-bumen10', 'elicon-all-ERP_danwei', 'elicon-all-wanglaidanwei',  'elicon-all-shuilihangyedanwei', 'elicon-all-shuilishiyedanwei', 'elicon-all-xiangzhenshuiliguanlidanwei', 'elicon-all-shiyedanwei', 'elicon-all-danweishouquan', 'elicon-all-structuremanage', 'elicon-all-bumen-', 'elicon-all-ERP_gonghuodanwei', 'elicon-all-fl-renyuan', 'elicon-all-renyuanbiandongfenxi', 'elicon-all-danweishushouqi', 'elicon-all-danweiguanli', 'elicon-all-danweishuzhankai', 'elicon-all-renyuanxinxi', 'elicon-all-xinzengdanwei', 'elicon-all-bumen11', 'elicon-all-renyuanguanli1', 'elicon-all-shigongrenyuan', 'elicon-all-gangweishenqing', 'elicon-all-qishiyedanweitiaocha', 'elicon-all-bumen12', 'elicon-all-renyuanbanciguanli', 'elicon-all-renyuandangan', 'elicon-all-renyuanjiankong', 'elicon-all-renyuanleixing', 'elicon-all-renyuanpaiban', 'elicon-all-renyuanguanli2', 'elicon-all-xunjianchulirenyuan', 'elicon-all-zuoyedanwei', 'elicon-all-bumen13', 'elicon-all-caifang-weituodanwei', 'elicon-all-caifang-danweilianxirendianhua', 'elicon-all-caifang-renyuan',  'elicon-all-renyuanguanli3', 'elicon-all-renyuanxinxi1', 'elicon-all-drxx63', 'elicon-all-drxx45', 'elicon-all-drxx36', 'elicon-all-drxx34', 'elicon-all-drxx27', 'elicon-all-drxx24', 'elicon-all-drxx12', 'elicon-all-drxx91', 'elicon-all-drxx106', 'elicon-all-yunweirenyuan', 'elicon-all-xiashudanweiguanli', 'elicon-all-navicon-bmda', 'elicon-all-navicon-jldwsz', 'elicon-all-navicon-jldwz', 'elicon-all-zhifarenyuan', 'elicon-all-navicon-jldw', 'elicon-all-yihurenyuan', 'elicon-all-tree-round-people', 'elicon-all-tree-round-key-person', 'elicon-all-kefurenyuan', 'elicon-all-renyuan1', 'elicon-all-danwei1', 'elicon-all-dabianrenyuanfengong', 'elicon-all-yiwurenyuan', 'elicon-all-nb-', 'elicon-all-renyuanzuguanli', 'elicon-all-danweigongchengzhiliangjianyanjilu', 'elicon-all-shangpinbaozhuangdanwei', 'elicon-all-renyuandongtaifenbu', 'elicon-all-renyuandongtaizhuizong', 'elicon-all-shilianrenyuan', 'elicon-all-fujinrenyuanfenbu', 'elicon-all-renyuanjujiyujing', 'elicon-all-renyuanchaochubianjie', 'elicon-all-renyuanyidongyujing', 'elicon-all-renyuandengji', 'elicon-all-danweigongchengzhiliangjianyanjilu1', 'elicon-all-bumenguanli3', 'elicon-all-bumen14', 'elicon-all-jianzhujirenyuananquan', 'elicon-all-renyuan2', 'elicon-all-rrenyuanguanli-', 'elicon-all-xidurenyuanfenxi', 'elicon-all-Invitation-to-external-personnel', 'elicon-all-unit', 'elicon-all-zixunrenyuan', 'elicon-all-renyuankaoqin-copy-copy', 'elicon-all-guanlirenyuan', 'elicon-all-bumen15', 'elicon-all-jianzhuanquan', 'elicon-all-gangweiguanli', 'elicon-all-renyuan-shi', 'elicon-all-renyuan-kong', 'elicon-all-renyuanzu-shi', 'elicon-all-renyuanzu-kong', 'elicon-all-xinzengrenyuan-shi',  'elicon-all-xinzengrenyuan-kong', 'elicon-all-bumen1', 'elicon-all-huaban', 'elicon-all-post', 'elicon-all-bumenguanli_h', 'elicon-all-xiaoshourenyuanguanli', 'elicon-all-icon1', 'elicon-all-icon-test', 'elicon-all-renyuanguanli4', 'elicon-all-renyuanguanli5', 'elicon-all-qiyeguanli_gangweiguanli', 'elicon-all-zhuyaorenyuan', 'elicon-all-mendiangangwei_huaban', 'elicon-all-gongsidizhi', 'elicon-all-wtPost', 'elicon-all-danwei2', 'elicon-all-renyuanbaoming', 'elicon-all-yusherenyuan', 'elicon-all-wulumuqishigongandashujuguanlipingtai-ico-', 'elicon-all-wtbm', 'elicon-all-zhidingrenyuanbianji', 'elicon-all-yishenggangwei', 'elicon-all-guanjiaogangwei',  'elicon-all-ziyuanldpi', 'elicon-all-bumen18', 'elicon-all-icon-', 'elicon-all-icon-1', 'elicon-all-icon-2', 'elicon-all-icon-3', 'elicon-all-icon-4', 'elicon-all-danwei', 'elicon-all-renyuan3', 'elicon-all-renyuan4', 'elicon-all-renyuan5', 'elicon-all-renyuan6', 'elicon-all-renyuan7', 'elicon-all-renyuan8', 'elicon-all-xinzengrenyuan', 'elicon-all-erjidanweikaoqin', 'elicon-all-bumenguanli5', 'elicon-all-bumenguanli6', 'elicon-all-bumenwenjian', 'elicon-all-wj-rymc', 'elicon-all-bumenguanli7', 'elicon-all-danweizuzhi', 'elicon-all-wj-rysq', 'elicon-all-wj-ryxx', 'elicon-all-renyuanbaozhang', 'elicon-all-fuwurenyuan', 'elicon-all-shangwurenyuan', 'elicon-all-keyanrenyuan', 'elicon-all-jishurenyuan', 'elicon-all-guanlirenyuan1', 'elicon-all-bumen19', 'elicon-all-bumen20', 'elicon-all-huanweirenyuan',  'elicon-all-huanweirenyuan-s', 'elicon-all-yuangongchelianglika', 'elicon-all-yuangongcheliangjinr', 'elicon-all-danweiku', 'elicon-all-bumen21', 'elicon-all-renyuanjinchujifang', 'elicon-all-renyuan9', 'elicon-all-bumen22', 'elicon-all-peisongrenyuan', 'elicon-all-bumenguanli8', 'elicon-all-xinxidengji', 'elicon-all-bumen-moren', 'elicon-all-bumen-xuanzhong', 'elicon-all-renyuanguanli6', 'elicon-all-lianwangdanwei', 'elicon-all-renyuanxinxi2', 'elicon-all-zhuangtai', 'elicon-all-jixiaopinggu', 'elicon-all-ditu', 'elicon-all-gerenjixiao', 'elicon-all-jixiao', 'elicon-all-bumen23', 'elicon-all-bumenyongneng', 'elicon-all-bumenshezhi', 'elicon-all-gongsi', 'elicon-all-renyuanxinxi3', 'elicon-all-fangshegongzuorenyuanxinxi', 'elicon-all-renyuanguanli7', 'elicon-all-renyuanguanxi', 'elicon-all-huabanfuben', 'elicon-all-RectangleCopy', 'elicon-all-RectangleCopy1', 'elicon-all-gangweitiaodongx', 'elicon-all-xunhurenyuan', 'elicon-all-tongjidanweiguanli', 'elicon-all-lianwangdanwei1', 'elicon-all-renyuanbangding', 'elicon-all-renyuanguanli8', 'elicon-all-tianjiarenyuan', 'elicon-all-shenhetongguorenyuan', 'elicon-all-webduanmobancaozuo_renyuanxinxi', 'elicon-all-test', 'elicon-all-setup', 'elicon-all-print', 'elicon-all-lock', 'elicon-all-draw', 'elicon-all-test1', 'elicon-all-bank', 'elicon-all-notebook', 'elicon-all-calendar', 'elicon-all-notebook1', 'elicon-all-calendar1', 'elicon-all-bookmark', 'elicon-all-checklist', 'elicon-all-edit-tools', 'elicon-all-calendar2', 'elicon-all-monitor', 'elicon-all-notebook2', 'elicon-all-files-and-folders', 'elicon-all-conversation', 'elicon-all-folder', 'elicon-all-file', 'elicon-all-files-and-folders1', 'elicon-all-search', 'elicon-all-mails', 'elicon-all-telegram', 'elicon-all-app', 'elicon-all-paper-plane', 'elicon-all-talk', 'elicon-all-online-conference', 'elicon-all-group', 'elicon-all-shield', 'elicon-all-jiaobandanwei', 'elicon-all-renyuan10', 'elicon-all-bumenxinxishangbao', 'elicon-all-zhifarenyuan1', 'elicon-all-ml', 'elicon-all-renyuanjixiao', 'elicon-all-renyuan11', 'elicon-all-danwei4', 'elicon-all-danweiguanli1', 'elicon-all-bumentongbao', 'elicon-all-bumenpingyi', 'elicon-all-lituixiurenyuanxinxixiugaichaxun', 'elicon-all-renyuanchaxun', 'elicon-all-suoyourenyuan', 'elicon-all-renyuan-', 'elicon-all-kunnanshengrenyuanmingdan', 'elicon-all-chakanhuojiangrenyuanmingdan', 'elicon-all-danwei5', 'elicon-all-renyuanguanli9', 'elicon-all-gangwei', 'elicon-all-icon_danwei', 'elicon-all-danweitongxunlu', 'elicon-all-waiburenyuanchalvyudingshenpiliucheng', 'elicon-all-danwei6', 'elicon-all-renyuanguanli10', 'elicon-all-ziyuan', 'elicon-all-ziyuan1', 'elicon-all-icon_xinyong_xianxing_jijin-',  'elicon-all-renyuan12', 'elicon-all-zhongdianrenyuan', 'elicon-all-icon-GIS_renyuanjiankong', 'elicon-all-fangda', 'elicon-all-gengduo1',  'elicon-all-fenxiang', 'elicon-all-fanhui', 'elicon-all-daohang', 'elicon-all-chakan', 'elicon-all-chakanshezhi', 'elicon-all-fenlei1', 'elicon-all-erweima', 'elicon-all-gengduocaozuo', 'elicon-all-shezhi', 'elicon-all-jiajianbao', 'elicon-all-shijian1', 'elicon-all-fuzhi', 'elicon-all-jiarushijian', 'elicon-all-piliangdaochu', 'elicon-all-guanbi1', 'elicon-all-paixu', 'elicon-all-quanbudaochu', 'elicon-all-shangyi',  'elicon-all-jiarudaohang',  'elicon-all-xiayi', 'elicon-all-jiahuati', 'elicon-all-weixuan',  'elicon-all-suyuan',  'elicon-all-hulianwang', 'elicon-all-shaixuan', 'elicon-all-jianbao', 'elicon-all-tongji',  'elicon-all-bukejian1', 'elicon-all-shanchu2', 'elicon-all-yonghu',  'elicon-all-xinxijiance', 'elicon-all-zhuanti', 'elicon-all-sousuo1', 'elicon-all-xuancopy', 'elicon-all-wenhao', 'elicon-all-zhankai1', 'elicon-all-xuancopy1', 'elicon-all-yujing', 'elicon-all-you', 'elicon-all-xuancopy2', 'elicon-all-shouqi1', 'elicon-all-zhuti', 'elicon-all-rizhi', 'elicon-all-kefu',  'elicon-all-shejiaojiankong',  'elicon-all-xiugai', 'elicon-all-meitiliebiao', 'elicon-all-youxiang', 'elicon-all-qiehuan', 'elicon-all-bianji1',  'elicon-all-xitongxiaoxi', 'elicon-all-xuan', 'elicon-all-shoucang1', 'elicon-all-word', 'elicon-all-xlsx', 'elicon-all-zuo', 'elicon-all-icon-test1', 'elicon-all--', 'elicon-all-shouye1', 'elicon-all-weiye', 'elicon-all-suoxiao', 'elicon-all-tiaozhuan', 'elicon-all-x', 'elicon-all-guanzhu', 'elicon-all-pinglun', 'elicon-all-warning', 'elicon-all-zan', 'elicon-all-admin', 'elicon-all-apply', 'elicon-all-bbs', 'elicon-all-book', 'elicon-all-calendar3', 'elicon-all-chart', 'elicon-all-clock', 'elicon-all-email', 'elicon-all-false', 'elicon-all-hat', 'elicon-all-help', 'elicon-all-home', 'elicon-all-image', 'elicon-all-love', 'elicon-all-last',  'elicon-all-loseeyes', 'elicon-all-log', 'elicon-all-logo', 'elicon-all-nav', 'elicon-all-phone', 'elicon-all-safe', 'elicon-all-monitor1', 'elicon-all-radio', 'elicon-all-label', 'elicon-all-toolkit', 'elicon-all-message', 'elicon-all-password', 'elicon-all-wait', 'elicon-all-next', 'elicon-all-text', 'elicon-all-start', 'elicon-all-recycle', 'elicon-all-user', 'elicon-all-openeyes', 'elicon-all-warn', 'elicon-all-version', 'elicon-all-true', 'elicon-all-refuse',  'elicon-all-role',  'elicon-all-shuxing',  'elicon-all-users', 'elicon-all-zhankai', 'elicon-all-gerenzhongxin', 'elicon-all-chazhao', 'elicon-all-jiaoyiliushui', 'elicon-all-jiaoyiyiliushui', 'elicon-all-lishijilu',  'elicon-all-duanxintixing', 'elicon-all-tuichu',  'elicon-all-faqiqianyue', 'elicon-all-tianjia1', 'elicon-all-zhanghuchongzhi', 'elicon-all-jinyong', 'elicon-all-fangan', 'elicon-all-jiechu', 'elicon-all-bianji',  'elicon-all-qiyong', 'elicon-all-dakuanxiangqing', 'elicon-all-querendakuan', 'elicon-all-shanchu1', 'elicon-all-xiazai', 'elicon-all-moren', 'elicon-all-dakuanmingxi', 'elicon-all-chehuiqianyue', 'elicon-all-bangding', 'elicon-all-chakanxiangqing', 'elicon-all-shouqi',  'elicon-all-shouquan', 'elicon-all-dakuanyichang', 'elicon-all-tuihui', 'elicon-all-kaipiaowancheng', 'elicon-all-zhongqi', 'elicon-all-wtUser', 'elicon-all-xuyue', 'elicon-all-fankui', 'elicon-all-dingdan', 'elicon-all-gengduo', 'elicon-all-chaxun', 'elicon-all-fenlei', 'elicon-all-gouwuche', 'elicon-all-bukejian', 'elicon-all-gengxin', 'elicon-all-gongdan', 'elicon-all-dianzhan', 'elicon-all-jianjie', 'elicon-all-kejian', 'elicon-all-gonggepailie', 'elicon-all-peixunke', 'elicon-all-queren', 'elicon-all-baoming',  'elicon-all-guanbi', 'elicon-all-dianpu', 'elicon-all-shoujihao', 'elicon-all-liebiaopailie', 'elicon-all-wodedianzhan', 'elicon-all-jindu', 'elicon-all-gongkaike', 'elicon-all-jiazai', 'elicon-all-wenti', 'elicon-all-shijian', 'elicon-all-saoma', 'elicon-all-xiala', 'elicon-all-monikaoshi', 'elicon-all-luntan', 'elicon-all-shangcheng', 'elicon-all-shoucang', 'elicon-all-xihuan', 'elicon-all-xinxi', 'elicon-all-wode', 'elicon-all-zhexiantu', 'elicon-all-sousuo', 'elicon-all-yonghuming', 'elicon-all-qiandao', 'elicon-all-renzhengshenqing', 'elicon-all-shanchu', 'elicon-all-suijilianxi', 'elicon-all-xiajiantou', 'elicon-all-xueyuan', 'elicon-all-zhuzhuangtu', 'elicon-all-tianjia', 'elicon-all-zhishiku', 'elicon-all-shuaxin', 'elicon-all-hangyebiaozhun', 'elicon-all-dingwei', 'elicon-all-shangjiantou', 'elicon-all-shouye' ]
+        }
+    },
+    directives: {
+        // 注册一个局部的自定义指令 v-focus
+        focus: {
+            // 指令的定义
+            inserted: function(el) {
+                // 聚焦元素
+                el.querySelector('input').focus()
+            }
+        }
+    },
+    mounted(){
+        this.init()
+        this.GetAutoGuid()
+        window.onresize = () => {
+            this.tableheight=window.innerHeight - 240
+        }
+    },
+    methods:{
+        // 分页
+        handleSizeChange(val) {
+            this.page.pagesize = val
+            this.init()
+        },
+        handleCurrentChange(val) {
+            this.page.pageindex = val
+            this.init()
+        },
+        // 表格内容居中
+        cellStyle({ row, column, rowIndex, columnIndex }) {
+            return "text-align:center"
+        },
+        rowClass({ row, rowIndex }) {
+            return "text-align:center"
+        },
+        // 输入框内容发生变化事件
+        textChange(index, row) { 
+            row.viewstate = 'modify'
+            this.dataTable[index] = row
+        },
+        // 选择器的值发生变化事件
+        selectChange(row) {
+            row.viewstate = 'modify'
+        },
+        // 图标点击触发事件
+        clickIcon(index, row) {
+            console.log(row)
+            row.viewstate = 'modify'
+            this.num = index
+            this.drawer = true
+        },
+        // 选择图标库中图标触发事件
+        iconSelected(val) {
+            this.dataTable[this.num].iconClass = val
+        },
+        // 输入框失去焦点
+        inputBlur(row, event, column){ 
+            let tableD = this.dataTable;
+            tableD.forEach(function(item) {
+                item.editflag1 = false
+            });
+        },
+        // 点击单元格
+        clickCell(row, column, cell, event) {
+            if(cell.cellIndex === 2) {
+                row.editflag1 = true
+            }
+        },
+        // 选中行触发的事件
+        changeSelection(val) {
+            this.rowArr = val
+        },
+        init() {
+            const para = this.page
+            GetButResourceData(para).then(res => {
+                if (res.status == 'SUCCESS') {
+                    res.data.data.forEach(item => {
+                        item.editflag1 = false
+                    })
+                    this.totalCount = res.data.totalCount
+                    this.dataTable = res.data.data
+                }
+            })
+        },
+        handleClose(done) {
+            this.$confirm('确认关闭？').then(_ => {
+                done();
+            }).catch(_ => {});
+        },
+        // 获取Guid
+        GetAutoGuid() {
+            GetAutoGuid().then(res => {
+                this.sys_ButResourceOID = res.data.data
+            })
+        },
+        // 添加按钮
+        ButtonAdd() {
+            this.GetAutoGuid()
+            let addRow = {
+                sys_ButResourceOID: this.sys_ButResourceOID,
+                name: this.name,
+                iconClass: 'elicon-all-wtsy',
+                size: this.size,
+                busType: this.busType,
+                plain: true,
+                round: true,
+                circle: true,
+                loading: true,
+                disabled: true,
+                autofocus: true,
+                editflag1: true,
+                // editflag2: true,
+                nativeType: '',
+                viewstate: 'add',
+            }
+            this.dataTable.push(addRow)
+            addRow = {}
+        },
+        // 保存按钮
+        ButtonSave() {
+            this.edit = false
+            let editPara = []
+            this.dataTable.forEach( item => {
+                if(item.viewstate){
+                    editPara.push(item)
+                }
+            })
+            this.$confirm('确认保存吗?', '提示', { type: 'warning' }).then(() => {
+                SaveButResource(editPara).then(res => {
+                    if(res.status == 'SUCCESS'){
+                        this.$message({ type: 'success', message: '保存成功!' });
+                        this.init();
+                    } else {
+                        this.$message({ type: 'error', message: res.msg });
+                        this.init();
+                    }
+                })
+            })
+        },
+        // 删除按钮
+        ButtonDelete() {
+            let para = []
+            this.rowArr.map(item => {
+                para.push(item.sys_ButResourceOID)
+            })
+            this.$confirm('确认删除吗?', '提示', { type: 'warning' }).then(() => {
+                DeleteButResource(para).then(res => {
+                    if(res.status == 'SUCCESS') {
+                        this.$message({ type: 'success', message: '删除成功!' });
+                        this.init()
+                    } else {
+                        this.$message({ type: 'error', message: res.msg });
+                    }
+                })
+            }).catch(() => {
+            });
+        }
+    }
+}
+</script>
+
+<style>
+.Button_definition {
+  border-radius: 6px;
+  background: #fff;
+  box-shadow: 1px 1px 3px rgba(0,0,0,.2)
+}
+.Button_definition .pagination{
+      padding-top: 20px; 
+      padding-bottom: 20px;
+      bottom: 3%;
+      left: 45%;
+      /* transform: translate(-50%); */
+      position: fixed;
+  }
+.switchStyleBtn .el-switch__label {
+    position: absolute;
+    display: none;
+    color: #fff;
+}
+.switchStyleBtn .el-switch__label--left {
+    z-index: 9;
+    left: 5px;
+}
+.switchStyleBtn .el-switch__label--right {
+    z-index: 9;
+    left: -13px;
+}
+.switchStyleBtn .el-switch__label.is-active {
+    display: block;
+}
+.switchStyleBtn .el-switch .el-switch__core,
+.el-switch .el-switch__label {
+    width: 50px !important;
+}
+.switchStyleBtn .el-switch__label * {
+    line-height: 1;
+    font-size: 6px;
+    display: inline-block;
+}
+.iconDrawer {
+    overflow: auto
+}
+.icons {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    margin: 10px;
+}
+.iconfonts {
+    display: block;
+    font-size: 30px;
+    width: 40px;
+    height: 40px;
+    padding: 10px 10px;
+}
+</style>
\ No newline at end of file

src/components/systemManage/CM_DynamicLog.vue

+<template>
+<!-- 日志查看 操作 -->
+    <div style="display: flex; justify-content: flex-start">
+        <el-button size="mini" type="primary" @click.stop="handleViewDetails">查看明细</el-button>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['row', 'handlers'],
+    mounted() {
+    },
+    methods: {
+        handleViewDetails() {
+            this.handlers.firsth(this.row)
+        },
+    }
+}
+</script>

src/components/systemManage/DynamicLog.vue

+<template>
+    <div class="DynamicLog">
+    <!-- 日志查看 -->
+    <!--列表-->
+        <transition-group enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutLeft">
+            <div key="0" v-show="count === 0" style="margin-top:10px" class="tablePage">
+                <dg-table v-loading="loading" style=" width: 100%;" ref="tableForm" :data='tableData' :action-config="activeConfig" :column-config="config" @filter-change='getFilter' @select-change="handleSelectionChange" highlight-current-row height="450" :pagination="false" :pageindex="page.pageNumber" :pagesize="page.pageSize"></dg-table>
+                <div class="pagination" :style="{width:paginaWidth}">
+                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize" layout="total,sizes, prev, pager, next" :total="totalCou" background :current-page="page.pageNumber"></el-pagination>
+                </div>
+            </div>
+            <div key="1" v-show="count === 1" style="width: 100%" class="tablePage">
+                <el-button type="primary" size="small" icon="el-icon-back" @click="goBackDynamicLog" >返回</el-button>
+                <el-collapse>
+                    <el-collapse-item class="add">
+                        <template slot="title"> 新增记录 </template>
+                        <el-table :data="addAuditLogList" style="width: 100%">
+                            <el-table-column prop="TableName" label="表名" width="180"></el-table-column>
+                            <el-table-column prop="ActionType" label="动作名称" width="180"></el-table-column>
+                            <el-table-column prop="ActionParameters" label="字段" width="180"></el-table-column>
+                            <el-table-column prop="ActBeforeValue" label="旧值" width="180"></el-table-column>
+                            <el-table-column prop="ActAfterValue" label="新值" width="180"></el-table-column>
+                        </el-table>
+                    </el-collapse-item>
+                    <el-collapse-item class="update">
+                        <template slot="title"> 修改记录 </template>
+                        <el-table :data="updateAuditLogList" style="width: 100%">
+                            <el-table-column prop="TableName" label="表名" width="180"></el-table-column>
+                            <el-table-column prop="ActionType" label="动作名称" width="180"></el-table-column>
+                            <el-table-column prop="ActionParameters" label="字段" width="180"></el-table-column>
+                            <el-table-column prop="ActBeforeValue" label="旧值" width="180"></el-table-column>
+                            <el-table-column prop="ActAfterValue" label="新值" width="180"></el-table-column>
+                        </el-table>
+                    </el-collapse-item>
+                    <el-collapse-item class="delete">
+                        <template slot="title"> 删除记录 </template>
+                        <el-table :data="deleteAuditLogList" style="width: 100%">
+                            <el-table-column prop="TableName" label="表名" width="180"></el-table-column>
+                            <el-table-column prop="ActionType" label="动作名称" width="180"></el-table-column>
+                            <el-table-column prop="ActionParameters" label="字段" width="180"></el-table-column>
+                            <el-table-column prop="ActBeforeValue" label="旧值" width="180"></el-table-column>
+                            <el-table-column prop="ActAfterValue" label="新值" width="180"></el-table-column>
+                        </el-table>
+                    </el-collapse-item>
+                </el-collapse>
+            </div>
+        </transition-group>
+    </div>
+</template>
+<script>
+import { GetSystemLoggingList, GetAllAuditLogDetailed } from "../../api/api"
+import CM_DynamicLog from "./CM_DynamicLog"
+export default {
+    data(){
+        return{
+            count: 0,
+            addAuditLogList: [],
+            updateAuditLogList: [],
+            deleteAuditLogList: [],
+            paginaWidth:'100%',
+            tableData:[],
+            loading:false,
+            totalCou:0,
+            searchVal:'',
+            oidList:[],
+            page:{
+                pageNumber: 1,
+                pageSize: 10,
+            },
+            activeConfig: {
+                type: "customize",
+                label: "操作",
+                width:"120",
+                component: CM_DynamicLog,
+                handlers: {
+                    firsth: (row) => {
+                        this.handleViewDetails(row);
+                    }
+                }
+            },
+            config: [
+                {
+                prop: "userName",
+                label: "访问人",
+                filterConfig: {
+                    ftn: "访问人",
+                    type: "edit",
+                    key: "userName"
+                },
+                },
+                {
+                prop: "enterTime",
+                label: "开始时间",
+                filterConfig: {
+                    ftn: "开始时间",
+                    type: "date1", 
+                    key: "enterTime"
+                },
+                processdata: "time"
+                },
+                {
+                prop: "endTime",
+                label: "结束时间",
+                filterConfig: {
+                    ftn: "结束时间",
+                    type: "date1", 
+                    key: "endTime"
+                },
+                processdata: "time"
+                },
+                {
+                prop: "costTime",
+                label: "响应时间(s)",
+                filterConfig: {
+                    ftn: "响应时间(s)",
+                    type: "edit", 
+                    key: "costTime"
+                },
+                },
+                {
+                prop: "requestUri",
+                label: "请求地址",
+                filterConfig: {
+                    ftn: "请求地址",
+                    type: "edit",
+                    key: "requestUri"
+                }
+                },
+                {
+                prop: "requestParamaters",
+                label: "请求参数",
+                filterConfig: {
+                    ftn: "请求参数",
+                    // type: "edit",
+                    key: "requestParamaters",
+                }
+                },
+                {
+                prop: "responseParamaters",
+                label: "返回参数",
+                filterConfig: {
+                    ftn: "返回参数",
+                    // type: "edit",
+                    key: "responseParamaters"
+                }
+                },
+                {
+                prop: "userIP",
+                label: "返回IP",
+                filterConfig: {
+                    ftn: "返回IP",
+                    type: "edit",
+                    key: "userIP"
+                }
+                },
+                {
+                prop: "serverIP",
+                label: "服务器IP",
+                filterConfig: {
+                    ftn: "服务器IP",
+                    type: "edit",
+                    key: "serverIP"
+                }
+                },
+                {
+                prop: "browser",
+                label: "浏览器版本",
+                filterConfig: {
+                    ftn: "浏览器版本",
+                    type: "edit",
+                    key: "browser"
+                }
+                },
+            ],
+        }
+    },
+    mounted(){
+        this.paginaWidth=this.$refs.tableForm.$el.clientWidth+'px'
+        window.onresize = () => {
+            this.paginaWidth=this.$refs.tableForm.$el.clientWidth+'px'
+        };
+        this.getData()
+    },
+    methods:{
+        getData(){
+                this.loading=true
+                let para=this.page
+                GetSystemLoggingList(para).then(res=>{
+                    if(res.status='SUCCESS'){
+                    this.tableData=res.data.data
+                    this.totalCou=res.data.totalCount
+                    this.loading=false
+                }
+            })
+
+        },
+        getFilter(val) {
+            this.searchVal=val
+            this.searchUsers(val);
+        },
+        searchUsers(val) {
+            val.pageNumber=this.page.pageNumber     
+            val.pageSize = this.page.pageSize
+            this.page = val
+            if(this.page.enterTime){
+                this.page.enterTime.minValue=this.page.enterTime.gt
+                this.page.enterTime.maxValue=this.page.enterTime.lt
+                delete this.page.enterTime.gt
+                delete this.page.enterTime.lt
+            }
+            if(this.page.endTime){
+                this.page.endTime.minValue=this.page.endTime.gt
+                this.page.endTime.maxValue=this.page.endTime.lt
+                delete this.page.endTime.gt
+                delete this.page.endTime.lt
+            }
+            this.getData()
+            this.page={
+                pageNumber: 1,
+                pageSize: 10,
+            }
+        },
+        // 分页
+        handleSizeChange(val) {
+            this.page.pageSize = val
+            if(this.searchVal==='') {
+                this.getData()
+            } else {
+                this.searchUsers(this.searchVal)      
+            }
+        },
+        handleCurrentChange(val) {
+            this.page.pageNumber = val
+            if(this.searchVal==='') {
+                this.getData()
+            } else {
+                this.searchUsers(this.searchVal)      
+            }
+        },
+        //选项列发生变化时
+        handleSelectionChange(val) {
+            this.oidList = val;
+        },
+        handleViewDetails(row) {
+            const para = { SysytemLoggingOID: row.systemLoggingOID }
+            GetAllAuditLogDetailed(para).then((res) => {
+                this.addAuditLogList = res.data.addAuditLogList
+                this.updateAuditLogList = res.data.updateAuditLogList
+                this.deleteAuditLogList = res.data.deleteAuditLogList
+                // console.log(res.data.addAuditLogList)
+                // console.log(res.data.updateAuditLogList)
+                // console.log(res.data.deleteAuditLogList)
+            })
+            if (this.count < 1) {
+                this.count += 1
+            }
+        },
+        goBackDynamicLog() {
+            this.count = 0
+        }
+    }
+}
+</script>
+<style>
+.DynamicLog .pagination{
+    text-align: center;
+    bottom: 0;
+    position: fixed;
+    background: #fff;
+    border-radius: 6px;
+    box-shadow: 1px 1px 3px rgba(0,0,0,.2);
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+.DynamicLog {
+    position: relative;
+    height: 95%;
+}
+.DynamicLog .tablePage {
+	position: absolute;
+    top: 0;
+    left: 0;
+    margin-top: 20px;
+    width: 100%;
+}
+.DynamicLog .el-collapse-item__header, .el-table  {
+    padding-left: 20px;
+}
+.DynamicLog .add .el-collapse-item__header {
+    color: #67C23A;
+}
+.DynamicLog .update .el-collapse-item__header {
+    color: #409EFF;
+}
+.DynamicLog .delete .el-collapse-item__header {
+    color: #F56C6C
+}
+
+</style>
\ No newline at end of file

src/components/systemManage/Job_management.vue

+<template>
+<!-- 岗位管理 -->
+    <div class="Job_management" style="height: 100%;">
+        <el-row :gutter="10" style="height: 100%;">
+            <el-col :span="6" style="height: 100%;">
+                <el-scrollbar style="height: 100%;">
+                <div class="grid-content" style="min-width:360px">
+                    <div class="content-title">组织机构</div>
+                    <el-tree :expand-on-click-node="false" ref="centertree" node-key="id" :data="dataTree" :props="defaultProps" style="padding-top:10px;width:100%;" @node-click="handleNodeClick" highlight-current>
+                        <span slot-scope="{ node, data }">
+                        <i :class="data.icon" style="color:#1E90FF"></i>
+                        <span style="padding-left: 4px;">{{node.label}}</span>
+                        </span>
+                    </el-tree>
+                </div>
+                </el-scrollbar>
+            </el-col>
+            <el-col :span="18" style="height: 100%;">
+                <div class="grid-content">
+                    <el-row>
+                        <el-button type="primary" @click="addRow(tableData)" size="small">添加岗位</el-button>
+                        <el-button type="primary" @click="saveTable" size="small">保存</el-button>
+                    </el-row>
+                    <!-- <el-table @row-click="clickTableRow" @cell-click="clickCell" ref="tableData" :data="tableData" style="width:100%;margin-bottom: 5px;margin:0 auto;font-size:0.8rem" highlight-current-row @selection-change="handleSelectionChange"> -->
+                    <el-table @row-click="clickTableRow" @cell-click="clickCell" ref="tableData" :data="tableData" style="width:100%;margin-bottom: 5px;margin:0 auto;font-size:0.8rem" highlight-current-row>
+                        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
+                        <el-table-column type="index"  width="60" label="序号">
+                            <template slot-scope="scope">
+                                <span>{{scope.$index+(pageindex - 1) * pagesize + 1}} </span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="postID" label="编码" width type="string" required>
+                            <template slot-scope="scope">
+                                <template v-if="scope.row.editflag1">
+                                    <el-input v-focus size="small" v-model="scope.row.postID" @change="textChange(scope.$index,scope.row)" auto-complete="off" @blur="inputBlur"></el-input>
+                                </template>
+                                <span v-else>{{ scope.row.postID }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="postName" label="名称" width class="edit" type="string">
+                            <template slot-scope="scope">
+                                <template v-if="scope.row.editflag2">
+                                    <el-input v-focus size="small" v-model="scope.row.postName" @change="textChange(scope.$index,scope.row)" auto-complete="off" @blur="inputBlur"></el-input>
+                                </template>
+                                <span v-else>{{ scope.row.postName }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" width="140">
+                            <template slot-scope="scope">
+                                <el-button @click="handleDelete(scope.$index, scope.row)" type="primary" icon="el-icon-delete" size="small"></el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <div class="pagination">
+                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" layout="total,sizes, prev, pager, next" :total="totalCou" background :current-page="pageindex" ></el-pagination>
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+<script>
+import { JobManagement, getPostDataList, SavePostData, deletePostData } from "../../api/api";
+export default {
+    data() {
+        return {
+        edit: false,
+        tableData: [], //右表格数据
+        scope: "",
+        pagesize: 10, //分页
+        pageindex: 1,
+        totalCou: 0,
+        statu: "",
+        clickdata: "", //点击节点数据容器
+        dataTree: [], //树
+        selectLevelVisible: false, //
+        defaultProps: {
+            children: "children",
+            label: "name"
+        },
+        oid: "",
+        obj: ""
+        };
+    },
+    directives: {
+        // 注册一个局部的自定义指令 v-focus
+        focus: {
+        // 指令的定义
+            inserted: function(el) {
+                // 聚焦元素
+                el.querySelector("input").focus();
+            }
+        }
+    },
+    mounted() {
+        this.getTree();
+    },
+    methods: {
+        clickTableRow(row, column, event) {
+        },
+        textChange(index, row) {
+        //输入框内容发生变化事件
+            if (row.sys_PostOID) {
+                row.viewstate = "modify";
+                this.tableData[index] = row;
+            }
+        },
+        //选择上级菜单页面显示
+        selectLevel(index, row) {
+            this.selectLevelVisible = true;
+        },
+        // 分页
+        handleCurrentChange(cpage) {
+            this.pageindex = cpage;
+            this.getPostData();
+        },
+        handleSizeChange(psize) {
+            this.pagesize = psize;
+            this.getPostData();
+        },
+        // handleSelectionChange(val) {
+        // },
+        //获取树列表
+        getTree() {
+            JobManagement().then(res => {
+                this.dataTree = res.data.data;
+            });
+        },
+        //获取右侧列表
+        getPostDataList() {},
+        // 提交修改和插入数据
+        saveTable() {
+            this.edit = false;
+            let editPara = [];
+            this.tableData.forEach(item => {
+                if (item.viewstate) {
+                    editPara.push(item);
+                }
+            });
+            this.$confirm("确认保存吗?", "提示", { type: "warning" }).then(() => {
+                SavePostData(editPara).then(res => {
+                    if (res.status == "SUCCESS") {
+                        this.$message({ type: "success", message: "保存成功!" });
+                        this.getPostData();
+                    } else {
+                        this.$message({ type: "error", message: res.msg });
+                    }
+                });
+            });
+        },
+        // 新增按钮事件
+        addRow() {
+            let addForm = {
+                sys_PostOID: "",
+                postID: "",
+                sys_DivisionOID: this.oid,
+                parentOID: "00000000-0000-0000-0000-000000000000",
+                viewstate: "add",
+                remark: "",
+                postName: "",
+                editflag1: true,
+                editflag2: true,
+                editflag3: true
+            };
+            this.tableData.push(addForm);
+        },
+        inputBlur(row, event, column) {
+        //输入框失去焦点
+            let tableD = this.tableData;
+            tableD.forEach(function(item) {
+                item.editflag1 = false;
+                item.editflag2 = false;
+            });
+        },
+        clickCell(row, column, cell, event) {
+        //点击单元格
+            if (cell.cellIndex === 1) {
+                row.editflag1 = true;
+            }
+            if (cell.cellIndex === 2) {
+                row.editflag2 = true;
+            }
+        },
+        // 点击节点 获取右侧内容
+        handleNodeClick(data) {
+        //   console.log(data);
+            this.oid = data.oid;
+            this.getPostData();
+        },
+        //定义一个函数 来封装获取的右边的数据
+        getPostData() {
+            const getPostList = {
+                sys_DivisionOID: this.oid,
+                pagesize: this.pagesize,
+                pageindex: this.pageindex
+            };
+            const para = Object.assign({}, getPostList);
+            getPostDataList(para).then(res => {
+                let rightdata = res.data.data;
+                this.tableData = [];
+                for (var item of rightdata) {
+                    let obje = {
+                        postID: item.postID,
+                        sys_PostOID: item.sys_PostOID,
+                        sys_Organize_FK: item.sys_Organize_FK,
+                        sys_DivisionOID: item.sys_DivisionOID,
+                        parentPostName: item.parentPostName,
+                        parentOID: item.parentOID,
+                        fBasePostn: item.fBasePostn,
+                        viewstate: item.viewstate,
+                        remark: item.remark,
+                        postName: item.postName,
+                        editflag1: false,
+                        editflag2: false,
+                        editflag3: false
+                    };
+                    this.obj = obje;
+                    this.tableData.push(this.obj);
+                    this.totalCou = res.data.totalCount;
+                }
+            });
+        },
+        // 删除按钮
+        handleDelete(index, row) {
+            if (!row.sys_PostOID) {
+                this.tableData.splice(index, 1); //未保存的行  可直接删除
+                return;
+            }
+            let para = [];
+            para.push(row.sys_PostOID);
+            this.$confirm("确认删除吗?", "提示", { type: "warning" }).then(() => {
+                deletePostData(para).then(res => {
+                    if (res.status == "SUCCESS") {
+                        this.$message({ type: "success", message: "删除成功!" });
+                        this.getPostData();
+                    } else {
+                        this.$message({ type: "error", message: res.msg});
+                    }
+                });
+            }).catch(() => {});
+        }
+    }
+};
+</script>
+
+<style scoped>
+.el-tree-node {
+    position: relative;
+    padding-left: 16px;
+}
+.el-tree-node__children {
+    padding-left: 16px;
+}
+.el-tree-node :last-child:before {
+    height: 38px;
+}
+.el-tree > .el-tree-node:before {
+    border-left: none;
+}
+.el-tree > .el-tree-node:after {
+    border-top: none;
+}
+.el-tree-node:before, .el-tree-node:after {
+    content: "";
+    left: -4px;
+    position: absolute;
+    right: auto;
+    border-width: 1px;
+}
+.tree :first-child .el-tree-node:before {
+    border-left: none;
+}
+.el-tree-node:before {
+    border-left: 1px dashed #4386c6;
+    bottom: 0px;
+    height: 100%;
+    top: -20px;
+    width: 1px;
+}
+.el-tree-node:after {
+    border-top: 1px dashed #4386c6;
+    height: 20px;
+    top: 17px;
+    width: 24px;
+}
+.el-scrollbar__bar .is-horizontal {
+    display: none;
+}
+.grid-content .bg-purple-light {
+	height: 0% !important;
+}
+.Job_management .grid-content {
+    border-radius: 6px;
+    padding: 20px;
+    padding-bottom: 13px;
+    height: 95%;
+    background: #fff;
+    box-shadow: 1px 1px 3px rgba(0,0,0,.2);
+}
+
+.Job_management .pagination{
+      padding-top: 20px; 
+      padding-bottom: 30px;
+      bottom: 3%;
+      left: 55%;
+      /* transform: translate(-50%); */
+      position: fixed;
+  }
+.content-title{
+    display:block;
+    font-size: 16px;
+    margin-bottom: 13px;
+    border-bottom: 1px solid #eee;
+    color:#676a6c;
+    padding: 0px 7px 8px 11px;
+}
+</style>

src/components/systemManage/Organizational.vue

+<template>
+<!-- 组织机构管理 -->
+    <div class="Organizational" style="height: 100%;">
+        <el-row :gutter="10" style="height: 100%;">
+            <el-col :span="8" style="height: 100%;">
+                <el-scrollbar style="height: 100%;">
+                <div class="grid-content">
+                    <div class="content-title">组织机构</div>
+                    <el-button type="primary" @click="handleAddTop" size="mini">添加单位</el-button>
+                    <el-button type="primary" @click="handleAdd" size="mini">添加部门</el-button>
+                    <el-button type="primary" @click="handleDelete" size="mini">删除</el-button>
+                    <el-button type="primary" @click="saveClick" size="mini">保存</el-button>
+                    <el-tree :expand-on-click-node="false" ref="centertree" node-key='sys_OrganizeOID' :data="dataTree" :props="defaultProps" @node-click="handleNodeClick" :default-expanded-keys="['00000000-0000-0000-0000-000000000000']" default-expand-all>
+                        <span slot-scope="{ node, data }">
+                            <i :class="data.icon" style="color:#1E90FF"></i>
+                            <span style="padding-left: 4px;">{{node.label}}</span>
+                        </span>
+                    </el-tree>
+                </div>
+                </el-scrollbar>
+            </el-col>
+            <el-col v-show="colVisible" :span="16" style="height: 100%;">
+                <div class="grid-content">
+                    <el-form :inline="true" ref="form" :model="form" label-width="80px" style="margin-top: 25px; margin-bottom: 15px;">
+                        <el-row>
+                            <el-col :span="12"> 
+                                <el-form-item label="编码">
+                                    <el-input v-model="form.encoded" placeholder="请输入" ></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12"> 
+                                <el-form-item label="名称" :rules="[{required: true, message: '请输入活动名称', trigger: 'blur'},{min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}]">
+                                    <el-input v-model="form.label" placeholder="请输入"></el-input>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="电话号码">
+                                    <el-input v-model="form.phoneNumber" placeholder="请输入"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12"> 
+                                <el-form-item label="传真号">
+                                    <el-input v-model="form.faxNumber" placeholder="请输入"></el-input>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                            <el-form-item label="是否有效">
+                                <el-switch v-model="form.Isopen"></el-switch>
+                            </el-form-item>
+                            <el-form-item label="是否单位">
+                                <el-switch v-model="form.FLG" disabled></el-switch>
+                            </el-form-item>
+                        <el-row>
+                            <el-col :span="16">
+                            <el-form-item label="描述">
+                                <el-input class="textitem" type="textarea" v-model="form.desc" :rows="7"></el-input>
+                            </el-form-item>
+                            </el-col>
+                        </el-row>              
+                    </el-form>
+                </div>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+import { getTreeList, Add, Modify, Delete } from '../../api/api'
+export default {
+    data() {
+        return {
+            dataTree: [],
+            status: '',
+            rootID: '',
+            defaultProps: {
+                children: 'children',
+                label: 'orgName'
+            },
+            colVisible: false,
+            form: {
+                encoded: '',
+                label: '',
+                phoneNumber: '',
+                faxNumber: '',
+                Isopen: true,
+                FLG: true,
+                desc: ''
+            },
+            clickdata: '',
+            currentNode: '',
+            num: 0,
+            index: 0
+        }
+    },
+    mounted() {
+        this.getTree();
+    },
+    methods: {
+        // 获取组织机构管理数据树
+        getTree() {
+            getTreeList().then(
+                (res) => {
+                    this.dataTree = res.data.data
+                    this.rootID = this.dataTree[0].sys_OrganizeOID
+                }
+            )
+        },
+        // 点击节点
+        handleNodeClick: function(data) {
+            this.colVisible = true
+            this.clickdata = data 
+            this.form.encoded = data.orgNO
+            this.form.label = data.orgName
+            this.form.phoneNumber = data.telephoneNo
+            this.form.faxNumber = data.fax
+            this.form.Isopen = data.activE_FLAG
+            this.form.desc = data.desC_TEXT
+            this.form.FLG = data.orG_FLG === 1
+            if (this.clickdata.sys_OrganizeOID === this.clickdata.parentOID && this.clickdata.sys_OrganizeOID && this.clickdata.parentOID) {
+                this.colVisible = false
+            }
+            if (this.clickdata.sys_OrganizeOID && this.clickdata.children.sys_OrganizeOID !== 0) {
+                this.status = 'Update'
+            } else {
+                this.status = 'Insert'
+            }
+        },
+        // 添加单位
+        handleAddTop: function() {
+            this.status = 'Insert'
+            const Child = {
+                orgNO: '',
+                orgName: '新加单位',
+                telephoneNo: '',
+                fax: '',
+                activE_FLAG: true,
+                desC_TEXT: '',
+                children: [],
+                orG_FLG: 1,
+                poid: this.clickdata.sys_OrganizeOID,
+                icon:'iconfont elicon-all-wtOrg',
+            }
+            if (this.clickdata.orG_FLG == 0) {
+                this.$message({showClose: true, message: '部门下不能添加单位！', type: 'error'})
+            }
+            if (this.clickdata.orG_FLG == 1 && this.clickdata.sys_OrganizeOID) {
+                if (this.index !== 0) {
+                    this.$message({showClose: true, message: '请先保存正在编辑的部门！', type: 'error'})
+                } else {
+                    if (this.num == 0) {
+                        this.clickdata.children.push(Child)
+                        this.handleNodeClick(Child)
+                        // console.log(this.clickdata)
+                        this.num += 1
+                    } else {
+                        this.$message({showClose: true, message: '请先保存正在编辑的单位！', type: 'error'})
+                    }
+                }
+            } else {
+                this.$message({showClose: true, message: '请先保存正在编辑的单位！', type: 'error'})
+            }
+        },
+        // 添加部门
+        handleAdd: function() {
+            this.status = 'Insert'
+            const newChild = {
+                orgNO: '',
+                orgName: '新加部门',
+                telephoneNo: '',
+                fax: '',
+                activE_FLAG: true,
+                desC_TEXT: '',
+                children: [],
+                orG_FLG: 0,
+                poid: this.clickdata.sys_OrganizeOID,
+                icon:'iconfont elicon-all-wtbm'
+            }
+            if (this.clickdata === '') {
+                this.$message({showClose: true, message: '请选择单位后添加部门！', type: 'error'})
+            }
+            if (!this.clickdata.children) {
+                this.$set(this.clickdata, 'children', [])
+            }
+            if (this.clickdata.sys_OrganizeOID == this.rootID) {
+                this.$message({showClose: true, message: '根节点下不能添加部门！', type: 'error'})
+            } 
+            if (this.clickdata.sys_OrganizeOID) {
+                if (this.num !== 0) {
+                    this.$message({showClose: true, message: '请先保存正在编辑的单位！', type: 'error'})
+                } else {
+                    if (this.index == 0) {
+                        this.clickdata.children.push(newChild)
+                        this.handleNodeClick(newChild)
+                        // console.log(this.clickdata)
+                        this.index += 1
+                    } else{
+                        this.$message({showClose: true, message: '请先保存正在编辑的部门！', type: 'error'})
+                    }
+                }
+            } else {
+                this.$message({showClose: true, message: '请先保存正在编辑的部门！', type: 'error'})
+            }
+        },
+        // 调用接口新增单位或部门
+        insertData() {
+            const para = {
+                orgNO: this.form.encoded,
+                orgName: this.form.label,
+                telephoneNo: this.form.phoneNumber,
+                fax: this.form.faxNumber,
+                activE_FLAG: this.form.Isopen,
+                desC_TEXT: this.form.desc,
+                parentOID: this.clickdata.poid,
+                sys_OrganizeOID: '00000000-0000-0000-0000-000000000000',  
+                orG_FLG: this.clickdata.orG_FLG,
+                orG_TYPE: 0,
+                classCode: '',
+                sortNo: 0,
+            }
+            Add(para).then(res => {
+                if (res.data.status == 'SUCCESS') {
+                    this.$message({showClose: true, message: '添加成功', type: 'success'})
+                } else {
+                    this.$message({showClose: true, message: res.data.msg, type: 'error'})
+                }
+                this.getTree()
+                this.colVisible = false
+                this.num = 0
+                this.index = 0
+            })
+        },
+        // 调用接口修改单位或部门
+        updateData() {
+            const para = {
+                orgNO: this.form.encoded,
+                orgName: this.form.label,
+                telephoneNo: this.form.phoneNumber,
+                fax: this.form.faxNumber,
+                activE_FLAG: this.form.Isopen,
+                desC_TEXT: this.form.desc,
+                parentOID: this.clickdata.parentOID,
+                sys_OrganizeOID: this.clickdata.sys_OrganizeOID,
+                orG_FLG: this.clickdata.orG_FLG,
+                orG_TYPE: this.clickdata.orG_TYPE,
+                classCode: this.clickdata.classCode,
+                sortNo: this.clickdata.sortNo,
+            }
+            Modify(para).then(res => {
+                if (res.data.status == 'SUCCESS') {
+                    this.$message({showClose: true, message: '修改成功', type: 'success'})
+                } else {
+                    this.$message({showClose: true, message: res.data.msg, type: 'error'})
+                }
+                this.getTree()
+                this.colVisible = false
+                this.num = 0
+                this.index = 0
+            })
+        },
+        handleDelete: function () {
+            if (this.clickdata.sys_OrganizeOID == undefined) {
+                this.$message({showClose: true, message: '该单位或部门没有保存不能删除', type: 'error'})
+            } else {
+                const para = this.clickdata.sys_OrganizeOID
+                Delete(para).then((res) => {
+                    if (res.data.status == 'SUCCESS') {
+                        this.$message({showClose: true, message: '删除成功', type: 'success'})
+                    } else {
+                        this.$message({showClose: true, message: res.data.msg, type: 'error'})
+                    }
+                    this.getTree()
+                    this.colVisible = false
+                })
+            }
+        },
+        saveClick: function() {
+            if (this.status === 'Insert') {
+                this.insertData()
+            } else if (this.status === 'Update') {
+                this.updateData()
+            }
+        },
+    }
+}
+</script>
+
+<style scoped>
+.textitem {
+    width:300%;
+    }
+.leftpart .el-scrollbar__wrap {
+    overflow-x: hidden;
+}
+.el-scrollbar__bar .is-horizontal {
+    display: none;
+}
+.Organizational .el-button--mini, .el-button--mini.is-round{
+    padding-left: 7px;
+    padding-right: 7px;
+}
+
+.Organizational .grid-content {
+    border-radius: 6px;
+    padding: 20px;
+    padding-bottom: 13px;
+    height: 95%;
+    background: #fff;
+    box-shadow: 1px 1px 3px rgba(0,0,0,.2);
+}
+.content-title{
+    display:block;
+    font-size: 16px;
+    margin-bottom: 13px;
+    border-bottom: 1px solid #eee;
+    color:#676a6c;
+    padding: 0px 7px 8px 11px;
+}
+</style>>

src/components/systemManage/Personnel.vue

+<template>
+<!-- 人员管理 -->
+    <div class="Personnel" style="height: 100%;">
+        <el-row :gutter="10" style="height: 100%;">
+            <el-col :span="6" style="height: 100%;">
+              <el-scrollbar style="height: 100%;">
+                <div class="grid-content" >
+                    <div class="content-title">组织机构</div>
+                    <el-tree :expand-on-click-node="false" :data="dataTree" :props="defaultProps"  @node-click="handleNodeClick" >
+                        <span slot-scope="{ node, data }">
+                            <i :class="data.icon" style="color:#1E90FF"></i>
+                            <span style="padding-left: 4px;">{{node.label}}</span>
+                        </span>
+                    </el-tree>
+                </div>
+              </el-scrollbar>
+            </el-col>
+            <el-col :span="18" style="height: 100%;">
+                <div class="grid-content">
+                    <el-button type="primary" @click="handleAdd" size="small">添加人员信息</el-button>
+                    <el-button type="primary" @click="handleDel" size="small">删除选中人员</el-button>
+                    <el-table :data="dataTable" tooltip-effect="dark" style="width: 100%"  @selection-change="handleSelectionChange" :cell-style="cellStyle" :header-cell-style="rowClass">
+                    <el-table-column type="selection"></el-table-column>
+                    <el-table-column type="index" label="序号">
+                        <template slot-scope="scope"><span>{{scope.$index+(page - 1) * pageSize + 1}} </span></template>
+                    </el-table-column>
+                    <el-table-column prop="coN_EMP_NUM" label="编号" ></el-table-column>
+                    <el-table-column prop="employeeName" label="姓名"></el-table-column>
+                    <el-table-column prop="postName" label="岗位" ></el-table-column>
+                    <el-table-column prop="usR_LOGIN" label="登录账号" ></el-table-column>
+                    <el-table-column prop="status" label="状态"  :formatter="formatStatus"></el-table-column>
+                    <el-table-column align="center" label="操作" width="300">
+                        <template slot-scope="scope">
+                        <el-button type="primary" size="small" icon="el-icon-edit" @click="editList(scope.$index, scope.row)">修改</el-button>
+                        <el-button type="primary" size="small" icon="el-icon-delete" @click="delList(scope.$index, scope.row)">删除</el-button>
+                        <el-button type="primary" size="small" icon="el-icon-key" @click="delPassword(scope.$index, scope.row)">密码设置</el-button>
+                        </template>
+                    </el-table-column>
+                    </el-table>
+                    <div class="pagination">
+                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total,sizes, prev, pager, next" :total="totalCount" background :current-page="page"></el-pagination>
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
+        <!-- 添加人员信息 -->
+        <el-dialog :visible.sync="addFormVisible" :close-on-click-modal="false" width='900px' >
+            <el-form :inline="true" label-width="100px" ref="addForm" :model="addForm" :rules="addFormRules">
+                <el-form-item>
+                <el-button type="primary" @click="addSubmit" size="small">保存</el-button>
+                <el-button type="primary" @click="closeAdd" size="small">关闭</el-button>
+                </el-form-item>
+                <el-form-item>
+                <el-col :span="24">
+                    <el-col :span="18">
+                    <span style="background: #66b1ff; display:block; line-height:40px; border-radius:8px; margin: 10px 0">人员账号信息</span>
+                    <el-col :span="12">
+                    <el-form-item label="编号" prop="coN_EMP_NUM">
+                        <el-input v-model="addForm.coN_EMP_NUM" placeholder="请输入编号" ></el-input>
+                    </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                    <el-form-item label="姓名" prop="employeeName">
+                        <el-input v-model="addForm.employeeName" placeholder="请输入姓名" style="width:100%; margin-bottom: 5px"></el-input>
+                    </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                    <el-form-item label="登录账号" prop="usR_LOGIN">
+                        <el-input v-model="addForm.usR_LOGIN" placeholder="请输入登录账号" style="width:100%; margin-bottom: 5px"></el-input>
+                    </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                    <el-form-item label="岗位名称" prop="postName">
+                        <el-input v-model="addForm.postName" @focus="GetPostTable" placeholder="请选择岗位名称" style="width:100%; margin-bottom: 5px"></el-input>
+                    </el-form-item>
+                    </el-col> 
+                    <el-col :span="24">
+                    <el-form-item label="密码" prop="passWord">
+                        <el-input v-model="addForm.passWord" placeholder="至少8位大小写字母和数字" style="width:94%; margin-bottom: 5px" show-password></el-input>
+                    </el-form-item>
+                    </el-col>
+                    
+                    <el-col :span="12">
+                    <el-form-item label="是否允许登录" prop="isLogin">
+                        <el-switch v-model="addForm.isLogin"></el-switch>
+                    </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                    <el-form-item label="是否有效" prop="status">
+                        <el-switch v-model="addForm.status"></el-switch>
+                    </el-form-item>
+                    </el-col>
+                    </el-col>
+                    <el-col :span="6">
+                    <div>
+                        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :on-success="handleAvatarSuccess" :show-file-list="false" :before-upload="beforeAvatarUpload">
+                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                        </el-upload>
+                    </div>
+                    </el-col>
+                </el-col>
+                <el-col :span="24">
+                    <span style="background: #66b1ff; display:block; line-height:40px; border-radius:8px; margin: 10px 0">人员详细信息</span>
+                    <el-form-item label="性别" prop="sex" style="width:40%">
+                    <el-select v-model="addForm.sex" placeholder="请选择性别" style="width:93%; margin-bottom: 5px">
+                        <el-option v-for="item in status1" :key="item.value" :label="item.label" :value="item.value">
+                        <span>{{ item.label }}</span>
+                        </el-option>
+                    </el-select>
+                    </el-form-item>
+                    
+                    <el-form-item label="婚姻状况" prop="marriageSta" style="width:40%">
+                    <el-select v-model="addForm.marriageSta" placeholder="请选择婚姻状况" style="width:93%; margin-bottom: 5px">
+                        <el-option v-for="item in status2" :key="item.value" :label="item.label" :value="item.value">
+                        <span>{{ item.label }}</span>
+                        </el-option>
+                    </el-select>
+                    </el-form-item>
+                    <el-form-item label="出生日期" prop="birthday" style="width:40%">
+                    <el-date-picker v-model="addForm.birthday" type="date" placeholder="年月日" value-format="yyyy-MM-dd" style="width:87.5%; margin-bottom: 5px"></el-date-picker>
+                    </el-form-item>
+                    <el-form-item label="身份证号" prop="certifNO" style="width:40%">
+                    <el-input v-model="addForm.certifNO" placeholder="请输入身份证号" style="width:100%; margin-bottom: 5px"></el-input>
+                    </el-form-item>
+                    <el-form-item label="银行卡号" prop="bankNo" style="width:40%">
+                    <el-input v-model="addForm.bankNo" placeholder="请输入银行卡号" style="width:100%; margin-bottom: 5px"></el-input>
+                    </el-form-item>
+                    <el-form-item label="工作电话" prop="worK_PH_NUM" style="width:40%">
+                    <el-input v-model="addForm.worK_PH_NUM" placeholder="请输入" style="width:100%; margin-bottom: 5px"></el-input>
+                    </el-form-item>
+                    <el-form-item label="移动电话" prop="mobilePhone" style="width:40%">
+                    <el-input v-model="addForm.mobilePhone" placeholder="请输入" style="width:100%; margin-bottom: 5px"></el-input>
+                    </el-form-item>
+                    <el-form-item label="邮箱地址" prop="coN_EMAIL_ADDR" style="width:40%">
+                    <el-input v-model="addForm.coN_EMAIL_ADDR" placeholder="请输入" style="width:100% margin-bottom: 5px"></el-input>
+                    </el-form-item>
+                    <el-form-item label="描述" prop="remark" style="width:100%">
+                    <el-input type="textarea" v-model="addForm.remark" :rows="7" style="width:295%"></el-input>
+                    </el-form-item>
+                </el-col>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+        <el-dialog title="选择岗位" :visible.sync="hanleDialog" :close-on-click-modal="false">
+            <el-table highlight-current-row :data="tableDepertment" style="width: 100%" @current-change="handleSlectRow">
+                <el-table-column prop="postID" label="编码" width="180"></el-table-column>
+                <el-table-column prop="postName" label="名称" width="180"></el-table-column>
+                <el-table-column prop="orgName" label="所属部门" width="180"></el-table-column>
+            </el-table>
+            <el-button type="primary" @click="handleClick" size="small">选择并关闭</el-button>
+            <el-button type="primary" @click="hanleDialog = false" size="small">关闭</el-button>
+        </el-dialog>
+        <el-dialog title="修改密码" :visible.sync="passDialog" :close-on-click-modal="false">
+            <el-row>
+                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
+                    <el-form-item label="新密码：" prop="inputPass">
+                    <el-input v-model="form.inputPass" placeholder="密码至少8位，包含大小写字母和数字" @blur="inputBlur" show-password></el-input>
+                    </el-form-item>
+                    <el-form-item style="text-align: right;">
+                    <el-button type="primary" @click="handleUpdatePass" size="small">确认</el-button>
+                    <el-button  @click="closePass" size="small">关闭</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-row>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { getOrgTree, getTableData, AddUser, getPostTable, delPersion, getPersionInfo, UpdateUser, UpdatePass } from "../../api/api";
+export default {
+  data() {
+    var isanswer = (rule, value, callback) => {
+      //身份证验证
+      // var reg =/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$)^.{8,16}$/
+      var reg=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,}$/;
+      if (reg.test(value)) {
+        callback();
+      } else {
+        return callback(new Error("密码格式错误"));
+      }
+    };
+    return {
+      form:{
+        inputPass:''
+      },
+      dataTree: [],
+      oid: "",
+      totalCount: 0,
+      page: 1,
+      pageSize: 10,
+      defaultProps: {
+        children: "children",
+        label: "name"
+      },
+      dataTable: [],
+      addFormVisible: false,
+      hanleDialog: false,
+      imageUrl: "",
+      addFormRules: {},
+      // 新增界面数据
+      addForm: {
+        coN_EMP_NUM: "",
+        employeeName: "",
+        usR_LOGIN: "",
+        isLogin: true,
+        postName: "",
+        status: true,
+        sex: 0,
+        birthday: "",
+        certifNO: "",
+        marriageSta: 0,
+        bankNo: "",
+        worK_PH_NUM: "",
+        mobilePhone: "",
+        coN_EMAIL_ADDR: "",
+        remark: "",
+        sys_PostOID: "",
+        photo: "",
+        passWord:''
+      },
+      addFormRules: {
+        coN_EMP_NUM: [
+          { required: true, message: "请输入编号", trigger: "blur" }
+        ],
+        employeeName: [
+          { required: true, message: "请输入姓名", trigger: "blur" }
+        ],
+        usR_LOGIN: [
+          { required: true, message: "请输入登录账户", trigger: "blur" }
+        ],
+        passWord:[
+          { required: true,validator: isanswer, trigger: "blur" }
+        ],
+        postName:[
+          { required: true, message: "请选择岗位", trigger: "blur" }
+        ]
+      },
+      status1: [{ value: 0, label: "男" }, { value: 1, label: "女" }],
+      status2: [
+        { value: 0, label: "未婚" },
+        { value: 1, label: "已婚" },
+        { value: 2, label: "离异" }
+      ],
+      tableDepertment: [],
+      jobID: "",
+      para1: [],
+      operate: "",
+      sys_UserOID: "",
+      passDialog: false,
+      pass: 1,
+      newPass: "",
+      inputPass: "",
+      markNum: "",
+      isbatch: false,
+      rules: {
+        inputPass: [{ validator: isanswer, trigger: "blur" }],
+      }
+      
+    };
+  },
+  created() {
+    this.init();
+  },
+  methods: {  
+    getBase64(file) {
+      return new Promise(function(resolve, reject) {
+        let reader = new FileReader();
+        let imgResult = "";
+        reader.readAsDataURL(file);
+        reader.onload = function() {
+          imgResult = reader.result;
+        };
+        reader.onerror = function(error) {
+          reject(error);
+        };
+        reader.onloadend = function() {
+          resolve(imgResult);
+        };
+      });
+    },
+    handleAvatarSuccess(res, file) {
+        this.getBase64(file.raw).then(res => {
+            this.imageUrl = res
+        });
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isJPG) {
+        this.$message.error("上传头像图片只能是 JPG 格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+      return isJPG && isLt2M;
+    },
+    // 获取组织机构管理数据树
+    init() {
+      getOrgTree().then(res => {
+        this.dataTree = res.data.data;
+        this.oid = this.dataTree[0].oid;
+        if (this.oid) {
+          this.getTable();
+        }
+      });
+    },
+    getTable() {
+      const para = {
+        sys_DivisionOID: this.oid,
+        pageNumber: this.page,
+        pageSize: this.pageSize
+      };
+      getTableData(para).then(res => {
+        this.totalCount = res.data.data.totalCount;
+        this.dataTable = res.data.data.data;
+      });
+    },
+    //状态显示转换
+    formatStatus: function(row, column) {
+      return row.status == true ? "有效" : row.sex == false ? "无效" : "未知";
+    },
+    // 表格内容居中
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      return "text-align:center";
+    },
+    rowClass({ row, rowIndex }) {
+      return "text-align:center";
+    },
+    //分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.init();
+    },
+    handleCurrentChange(val) {
+      this.page = val;
+      this.init();
+    },
+
+    handleSelectionChange(val) {
+      const arr = [];
+      for (let i = 0; i < val.length; i++) {
+        if (arr.indexOf(val[i].sys_UserOID <= -1)) {
+          arr.push(val[i].sys_UserOID);
+        }
+        this.para1 = arr;
+      }
+    },
+    handleNodeClick(val) {
+      this.oid = val.oid;
+      this.getTable();
+    },
+    GetPostTable() {
+      this.hanleDialog = true;
+      const para = {
+        sys_DivisionOID: this.oid,
+        pageNumber: this.page,
+        pageSize: this.pageSize
+      };
+      getPostTable(para).then(res => {
+        this.tableDepertment = res.data.data.data;
+      });
+    },
+    handleSlectRow(val) {
+      this.jobID = val.sys_PostOID;
+      this.jobName = val.postName;
+    },
+    handleClick() {
+      this.addForm.postName = this.jobName;
+      this.hanleDialog = false;
+    },
+    handleAdd() {
+      this.addFormVisible = true;
+      this.addForm = {
+        coN_EMP_NUM: "",
+        employeeName: "",
+        usR_LOGIN: "",
+        isLogin: true,
+        postName: "",
+        status: true,
+        sex: 0,
+        birthday: "",
+        certifNO: "",
+        marriageSta: 0,
+        bankNo: "",
+        worK_PH_NUM: "",
+        mobilePhone: "",
+        coN_EMAIL_ADDR: "",
+        remark: "",
+        sys_PostOID: "",
+        photo: ""
+      };
+      this.operate = "add";
+      this.imageUrl = ''
+    },
+    handleDel() {
+      this.$confirm("确认删除该用户吗？", "提示", {}).then(() => {
+        const userOIDList = this.para1;
+        const para = { userOIDList };
+        delPersion(para).then(res => {
+          if (res.data.status == "SUCCESS") {
+            this.$message({
+              showClose: true,
+              message: "删除成功",
+              type: "success"
+            });
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.data.msg,
+              type: "error"
+            });
+          }
+          this.para1 = [];
+          (this.para = {}), this.getTable();
+        });
+      });
+    },
+    // 批量密码修改
+    handleUpdate() {
+      this.passDialog = true;
+      this.isbatch = true;
+    },
+    editList(index, row) {
+        this.imageUrl = ''
+        this.addFormVisible = true;
+        this.operate = "update";
+        this.sys_UserOID = row.sys_UserOID;
+        const para = { Sys_UserOID: row.sys_UserOID };
+        getPersionInfo(para).then(res => {
+            this.addForm = res.data.data;
+            this.addForm.passWord=''
+            this.imageUrl = res.data.data.photo;
+        });
+    },
+    delList(index, row) {
+        this.para1.push(row.sys_UserOID);
+        this.handleDel();
+    },
+    delPassword(index, row) {
+      (this.passDialog = true), (this.sys_UserOID = row.sys_UserOID);
+    },
+    passChange(val) {
+      this.markNum = val;
+    },
+    // 密码校验
+    inputBlur(){
+      
+    },
+    handleUpdatePass() {
+      this.passDialog = true;
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          const arr2 = [];
+          arr2.push(this.sys_UserOID);
+          const para = {
+              userOIDList: arr2,
+              passWord: this.form.inputPass
+          };
+        UpdatePass(para).then(res => {
+          if (res.data.status == "SUCCESS") {
+            this.$message({
+              showClose: true,
+              message: "密码修改成功",
+              type: "success"
+            });
+          this.passDialog = false;
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.data.msg,
+              type: "error"
+            });
+          }
+          this.arr2 = [];
+          this.para = {};
+          this.markNum = "";
+        });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+      this.form.inputPass=''
+    },
+    closePass(){
+      this.form.inputPass=''
+      this.$refs['form'].clearValidate();
+      this.passDialog = false;
+    },
+    closeAdd(){
+      this.$refs['addForm'].clearValidate();
+      this.addFormVisible=false
+    },
+    addSubmit() {
+      if (this.operate == "add") {
+        this.$refs.addForm.validate(valid => {
+          if (valid) {
+            this.$confirm("确认提交吗？", "提示", {}).then(() => {
+              const para = {
+                coN_EMP_NUM: this.addForm.coN_EMP_NUM,
+                usR_LOGIN: this.addForm.usR_LOGIN,
+                employeeName: this.addForm.employeeName,
+                passWord: this.addForm.passWord,
+                status: this.addForm.status,
+                isLogin: this.addForm.isLogin,
+                sys_PostOID: this.jobID,
+                sys_OrganizeOID: this.oid,
+                coN_EMAIL_ADDR: this.addForm.coN_EMAIL_ADDR,
+                sex: this.addForm.sex,
+                birthday: this.addForm.birthday,
+                marriageSta: this.addForm.marriageSta,
+                certifNO: this.addForm.certifNO,
+                worK_PH_NUM: this.addForm.worK_PH_NUM,
+                mobilePhone: this.addForm.mobilePhone,
+                coN_EMAIL_ADDR: this.addForm.coN_EMAIL_ADDR,
+                bankNo: this.addForm.bankNo,
+                remark: this.addForm.remark,
+                photo: this.imageUrl
+              };
+              AddUser(para).then(res => {
+                if (res.data.status == "SUCCESS") {
+                  this.$message({
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success"
+                  });
+                  this.addFormVisible = false;
+                } else {
+                  this.$message({
+                    showClose: true,
+                    message: res.data.msg,
+                    type: "error"
+                  });
+                  this.addFormVisible = false;
+                }
+                this.sys_PostOID = "";
+                this.operate = "";
+                this.para = {};
+                this.getTable();
+              });
+            });
+          }
+        });
+      }
+      if (this.operate == "update") {
+        this.$refs.addForm.validate(valid => {
+          if (valid) {
+            this.$confirm("确认提交吗？", "提示", {}).then(() => {
+              const para = {
+                sys_UserOID: this.sys_UserOID,
+                coN_EMP_NUM: this.addForm.coN_EMP_NUM,
+                usR_LOGIN: this.addForm.usR_LOGIN,
+                employeeName: this.addForm.employeeName,
+                passWord: this.addForm.passWord,
+                status: this.addForm.status,
+                isLogin: this.addForm.isLogin,
+                sys_PostOID: this.jobID ? this.jobID : this.addForm.sys_PostOID,
+                sys_OrganizeOID: this.oid,
+                coN_EMAIL_ADDR: this.addForm.coN_EMAIL_ADDR,
+                sex: this.addForm.sex,
+                birthday: this.addForm.birthday,
+                marriageSta: this.addForm.marriageSta,
+                certifNO: this.addForm.certifNO,
+                worK_PH_NUM: this.addForm.worK_PH_NUM,
+                mobilePhone: this.addForm.mobilePhone,
+                coN_EMAIL_ADDR: this.addForm.coN_EMAIL_ADDR,
+                sys_CONTACTOID: this.addForm.sys_CONTACTOID,
+                bankNo: this.addForm.bankNo,
+                remark: this.addForm.remark,
+                photo: this.addForm.photo,
+              };
+              UpdateUser(para).then(res => {
+                if (res.data.status == "SUCCESS") {
+                  this.$message({
+                    showClose: true,
+                    message: "修改成功",
+                    type: "success"
+                  });
+                  this.addFormVisible = false;
+                } else {
+                  this.$message({
+                    showClose: true,
+                    message: res.data.msg,
+                    type: "error"
+                  });
+                  this.addFormVisible = false;
+                }
+                this.para = {};
+                this.sys_PostOID = '';
+                this.getTable();
+              });
+            });
+          }
+        });
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+.avatar-uploader {
+    padding-top: 40px;
+}
+.avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 50%;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+}
+.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+}
+.avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+}
+.Personnel .grid-content {
+    border-radius: 6px;
+    padding: 20px;
+    padding-bottom: 13px;
+    height: 95%;
+    background: #fff;
+    box-shadow: 1px 1px 3px rgba(0,0,0,.2);
+}
+
+  .Personnel .pagination{
+      padding-top: 20px; 
+      padding-bottom: 30px;
+      bottom: 3%;
+      left: 55%;
+      /* transform: translate(-50%); */
+      position: fixed;
+  }
+.content-title{
+    display:block;
+    font-size: 16px;
+    margin-bottom: 13px;
+    border-bottom: 1px solid #eee;
+    color:#676a6c;
+    padding: 0px 7px 8px 11px;
+}
+</style>

src/filter/index.js

+Date.prototype.Format = function (fmt) {
+    var o = {
+        "M+": this.getMonth() + 1, // 月份
+        "d+": this.getDate(), // 日
+        "h+": this.getHours(), // 小时
+        "m+": this.getMinutes(), // 分
+        "s+": this.getSeconds(), // 秒
+        "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
+        "S": this.getMilliseconds() // 毫秒
+    };
+    if (/(y+)/.test(fmt))
+        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+    for (var k in o)
+        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+    return fmt;
+}

src/main.js

+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import axios from 'axios';
+import store from './store/index.js'
+import ElementUI from 'element-ui';
+import 'element-theme-chalk';
+import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
+import VueI18n from 'vue-i18n';
+import { messages } from './components/common/i18n';
+// import '../static/css/theme-green/index.css';       // 浅绿色主题
+import 'font-awesome/css/font-awesome.min.css'
+import './assets/css/icon.css';
+import './assets/css/iconfont/iconfont.css'
+import "babel-polyfill";
+import root from './api/variable'
+import DGTable from 'dg-table'
+import VueQuillEditor from 'vue-quill-editor'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+import vcolorpicker from 'vcolorpicker'
+// 引入第三方图标
+import './assets/iconfont/iconfont.css';
+Vue.use(vcolorpicker)
+Vue.use(VueQuillEditor)
+Vue.use(DGTable)
+Vue.config.productionTip = false
+Vue.use(VueI18n);
+// Vue.use($)
+Vue.use(ElementUI, {
+    size: 'small'
+});
+Vue.prototype.$axios = axios;
+Vue.prototype.url= root;
+const i18n = new VueI18n({
+    locale: 'zh',
+    messages
+})
+axios.interceptors.request.use(function(config){
+    let token = localStorage.getItem('token')
+    if(token){
+        config.headers.common['api_key'] = token
+    }
+    return config
+},function(error){
+    return Promise.reject(error)
+})
+
+// axios.defaults.headers['Content-Type'] = 'AUTH_TOKEN';
+// axios.defaults.headers.common['Authorization'] = localStorage.getItem('token');
+
+//使用钩子函数对路由进行权限跳转
+// router.beforeEach((to, from, next) => {
+//     const role = localStorage.getItem('username');
+//     if (!role && to.path !== '/login') {
+//         next('/login');
+//     } else if (to.meta.permission) {
+//         // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
+//         role === 'admin' ? next() : next('/403');
+//     } else {
+//         // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
+//         if (navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor') {
+//             Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看', '浏览器不兼容通知', {
+//                 confirmButtonText: '确定'
+//             });
+//         } else {
+//             next();
+//         }
+//     };
+// })
+
+
+new Vue({
+    router,
+    i18n,
+    store,
+    render: h => h(App)
+}).$mount('#app')
\ No newline at end of file

src/router/index.js

+import Vue from 'vue';
+import Router from 'vue-router';
+
+Vue.use(Router);
+
+export default new Router({
+    routes: [
+        {
+            path: '/',
+            redirect: '/login'
+        },
+        {
+            path: '/',
+            component: resolve => require(['../components/common/Home.vue'], resolve),
+            meta: { title: '自述文件' },
+            children:[
+                { 
+                    path: '/sampleType', 
+                    component: resolve => require(['../components/basicData/sampleType.vue'], resolve), 
+                    meta: { title: '样本类型库' }
+                },
+                { 
+                    path: '/tumorTypes', 
+                    component: resolve => require(['../components/basicData/tumorTypes.vue'], resolve), 
+                    meta: { title: '肿瘤类型库' }
+                },
+                { 
+                    path: '/targetDrug', 
+                    component: resolve => require(['../components/basicData/targetDrug.vue'], resolve), 
+                    meta: { title: '靶药库' }
+                },
+                { 
+                    path: '/pmid', 
+                    component: resolve => require(['../components/basicData/pmid.vue'], resolve), 
+                    meta: { title: 'PMID库' }
+                },
+                { 
+                    path: '/basicInformation', 
+                    component: resolve => require(['../components/basicData/basicInformation.vue'], resolve), 
+                    meta: { title: '受检者基本信息' }
+                },
+                { 
+                    path: '/genePool', 
+                    component: resolve => require(['../components/basicData/genePool.vue'], resolve), 
+                    meta: { title: '基因库' }
+                },
+                { 
+                    path: '/sampleQualityControl', 
+                    component: resolve => require(['../components/basicData/sampleQualityControl.vue'], resolve), 
+                    meta: { title: '样本质控情况' }
+                },
+                // ------------------------------基础数据--------------------------------
+                { 
+                    path: '/geneResults', 
+                    component: resolve => require(['../components/indicators/geneResults.vue'], resolve), 
+                    meta: { title: '基因检测结果导入' }
+                },
+                { 
+                    path: '/geneticRisk', 
+                    component: resolve => require(['../components/indicators/geneticRisk.vue'], resolve), 
+                    meta: { title: '遗传风险' }
+                },
+                // -------------------------------监测指标导入------------------------------------------
+                { 
+                    path: '/noticeOfInformation', 
+                    component: resolve => require(['../components/TestReport/noticeOfInformation.vue'], resolve), 
+                    meta: { title: '知情通知书配置' }
+                },
+                { 
+                    path: '/tmb', 
+                    component: resolve => require(['../components/TestReport/tmb.vue'], resolve), 
+                    meta: { title: 'TMB等级说明' }
+                },
+                { 
+                    path: '/mis', 
+                    component: resolve => require(['../components/TestReport/mis.vue'], resolve), 
+                    meta: { title: 'MIS结果提示' }
+                },
+                { 
+                    path: '/targetDrugReferences', 
+                    component: resolve => require(['../components/TestReport/targetDrugReferences.vue'], resolve), 
+                    meta: { title: '靶药参考文献' }
+                },
+                { 
+                    path: '/chemicalMedicineReferences', 
+                    component: resolve => require(['../components/TestReport/chemicalMedicineReferences.vue'], resolve), 
+                    meta: { title: '化药参考文献' }
+                },
+                { 
+                    path: '/listOfRelated', 
+                    component: resolve => require(['../components/TestReport/listOfRelated.vue'], resolve), 
+                    meta: { title: '相关基因列表' }
+                },
+                // --------------------------------------监测报告模板配置-----------------------------------
+                { 
+                    path: '/dictionary', 
+                    component: resolve => require(['../components/allocation/dictionary.vue'], resolve), 
+                    meta: { title: '数据字典' }
+                },
+                // ----------------------------------------数据配置-----------------------------------------
+                { 
+                    path: '/reportDerived', 
+                    component: resolve => require(['../components/reportOutput/reportDerived.vue'], resolve), 
+                    meta: { title: '报告导出' }
+                },
+                // ---------------------------------------报告输出-------------------------------------------
+                { 
+                    path: '/Menu_Registration', 
+                    component: resolve => require(['../components/authorizationManage/Menu_Registration'], resolve), 
+                    meta: { title: '菜单注册' }
+                },
+                { 
+                    path: '/Menu_Personnel', 
+                    component: resolve => require(['../components/authorizationManage/Menu_Personnel'], resolve), 
+                    meta: { title: '人员菜单' }
+                },
+                { 
+                    path: '/Menu_Authorization', 
+                    component: resolve => require(['../components/authorizationManage/Menu_Authorization'], resolve), 
+                    meta: { title: '责任设置' }
+                },
+                // ----------------------------------------权限管理-----------------------------------------
+                { 
+                    path: '/Organizational', 
+                    component: resolve => require(['../components/systemManage/Organizational'], resolve), 
+                    meta: { title: '组织机构管理' }
+                },
+                { 
+                    path: '/Job_management', 
+                    component: resolve => require(['../components/systemManage/Job_management'], resolve), 
+                    meta: { title: '岗位管理' }
+                },
+                { 
+                    path: '/Personnel', 
+                    component: resolve => require(['../components/systemManage/Personnel'], resolve), 
+                    meta: { title: '人员管理' }
+                },
+                { 
+                    path: '/DynamicLog', 
+                    component: resolve => require(['../components/systemManage/DynamicLog'], resolve), 
+                    meta: { title: '日志查看' }
+                },
+                { 
+                    path: '/Button_definition', 
+                    component: resolve => require(['../components/systemManage/Button_definition'], resolve), 
+                    meta: { title: '按钮定义' }
+                },
+            ]
+        },
+
+        {
+            path: '/login',
+            component: resolve => require(['../components/page/Login.vue'], resolve)
+        },
+    ]
+})

src/store/index.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+import state from './state.js';
+import getters from './getters.js';
+import mutations from './mutations.js';
+import actions from './actions.js';
+
+
+
+Vue.use(Vuex);
+const store = new Vuex.Store({
+    state,
+    getters,
+    actions,
+    mutations
+}) 
+
+export default store;
\ No newline at end of file

src/store/mutations.js

+const mutations = {
+    add(num){
+        num.count++;
+    },
+    mul(num){
+        num.count--;
+    }
+}
+
+
+export default mutations
\ No newline at end of file

src/store/state.js

+const state = {
+    count:0,
+    // api1:'http://106.15.197.131:12001/api/'//后台管理接口
+    api1:'http://192.168.6.131:10122/'
+}
+
+export default state
\ No newline at end of file

vue.config.js

+module.exports = {
+    configureWebpack: {
+      externals:  {
+        //此处引号中的urlConfig必须和window.urlConfig一致
+        urlConfig: "urlConfig"
+      }
+    },
+    publicPath: './',
+    devServer: {
+      proxy: {
+        "/url1": {
+          target: "http://192.168.6.131:10122/", // 本地模拟数据服务器
+          changeOrigin: true,
+          pathRewrite: {
+            '/url1': ''  
+          },
+        },
+        "/url2": {
+          target: "http://192.168.6.131:10123/", // 本地模拟数据服务器
+          changeOrigin: true,
+          pathRewrite: {
+            '/url2': ''  
+          }
+        }
+      }
+  }
+  }
\ No newline at end of file