提交更新

src/api/data/dataDrugs.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询药品数据列表
+export function listDataDrugs(query) {
+  return request({
+    url: '/data/dataDrugs/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询药品数据详细
+export function getDataDrugs(id) {
+  return request({
+    url: '/data/dataDrugs/' + id,
+    method: 'get'
+  })
+}
+
+// 新增药品数据
+export function addDataDrugs(data) {
+  return request({
+    url: '/data/dataDrugs',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改药品数据
+export function updateDataDrugs(data) {
+  return request({
+    url: '/data/dataDrugs',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除药品数据
+export function delDataDrugs(id) {
+  return request({
+    url: '/data/dataDrugs/' + id,
+    method: 'delete'
+  })
+}

src/api/tool/gen.js

@@ -0,0 +1,85 @@
+import request from '@/utils/request'
+
+// 查询生成表数据
+export function listTable(query) {
+  return request({
+    url: '/tool/gen/list',
+    method: 'get',
+    params: query
+  })
+}
+// 查询db数据库列表
+export function listDbTable(query) {
+  return request({
+    url: '/tool/gen/db/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询表详细信息
+export function getGenTable(tableId) {
+  return request({
+    url: '/tool/gen/' + tableId,
+    method: 'get'
+  })
+}
+
+// 修改代码生成信息
+export function updateGenTable(data) {
+  return request({
+    url: '/tool/gen',
+    method: 'put',
+    data: data
+  })
+}
+
+// 导入表
+export function importTable(data) {
+  return request({
+    url: '/tool/gen/importTable',
+    method: 'post',
+    params: data
+  })
+}
+
+// 创建表
+export function createTable(data) {
+  return request({
+    url: '/tool/gen/createTable',
+    method: 'post',
+    params: data
+  })
+}
+
+// 预览生成代码
+export function previewTable(tableId) {
+  return request({
+    url: '/tool/gen/preview/' + tableId,
+    method: 'get'
+  })
+}
+
+// 删除表数据
+export function delTable(tableId) {
+  return request({
+    url: '/tool/gen/' + tableId,
+    method: 'delete'
+  })
+}
+
+// 生成代码（自定义路径）
+export function genCode(tableName) {
+  return request({
+    url: '/tool/gen/genCode/' + tableName,
+    method: 'get'
+  })
+}
+
+// 同步数据库
+export function synchDb(tableName) {
+  return request({
+    url: '/tool/gen/synchDb/' + tableName,
+    method: 'get'
+  })
+}

src/router/index.js

@@ -165,7 +165,21 @@ export const dynamicRoutes = [
         meta: { title: '字典数据', activeMenu: '/system/dict' }
       }
     ]
-  }
+  },
+    {
+      path: '/tool/gen-edit',
+      component: Layout,
+      hidden: true,
+      permissions: ['tool:gen:edit'],
+      children: [
+        {
+          path: 'index/:tableId(\\d+)',
+          component: () => import('@/views/tool/gen/editTable'),
+          name: 'GenEdit',
+          meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
+        }
+      ]
+    }
 ]
 
 // 防止连续点击多次路由报错

src/views/data/dataBase/byt.vue

@@ -1,26 +1,26 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
-      <el-form-item label="唯一注册号" prop="assemblyAccession">
+      <el-form-item label="NCBI基因组序列编号" prop="assemblyAccession">
         <el-input
           v-model="queryParams.assemblyAccession"
-          placeholder="请输入唯一注册号"
+          placeholder="请输入NCBI基因组序列编号"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="生物名称" prop="organismName">
+      <el-form-item label="病原体名称" prop="organismName">
         <el-input
           v-model="queryParams.organismName"
-          placeholder="请输入生物名称"
+          placeholder="请输入病原体名称"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="病源类型" prop="group">
+      <el-form-item label="病原类型" prop="group">
         <el-input
           v-model="queryParams.group"
-          placeholder="请输入病源类型"
+          placeholder="请输入病原类型"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -33,10 +33,10 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="中文解释" prop="defined">
+      <el-form-item label="中文注释" prop="defined">
         <el-input
           v-model="queryParams.defined"
-          placeholder="请输入中文解释"
+          placeholder="请输入中文注释"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -70,11 +70,11 @@
     </el-row>
 
     <el-table v-loading="loading" :data="dataBaseList" >
-      <el-table-column label="唯一注册号" align="center" prop="assemblyAccession" />
-      <el-table-column label="生物名称" align="center" prop="organismName" />
-      <el-table-column label="病源类型" align="center" prop="group" />
+      <el-table-column label="NCBI基因组序列编号" align="center" prop="assemblyAccession" />
+      <el-table-column label="病原体名称" align="center" prop="organismName" />
+      <el-table-column label="病原类型" align="center" prop="group" />
       <el-table-column label="子类标签" align="center" prop="group1" />
-      <el-table-column label="中文解释" align="center" prop="defined"  width="500" />
+      <el-table-column label="中文注释" align="center" prop="defined"  width="500" />
       <el-table-column label="解释的来源" align="center" prop="definedSource" width="200" />
       <!-- <el-table-column label="参考基因组类型" align="center" prop="refseqCategory" />
       <el-table-column label="分类号" align="center" prop="taxid" />
@@ -100,14 +100,9 @@
       <el-table-column label="翻译蛋白基因数" align="center" prop="proteinCodingGeneCount" />      
       <el-table-column label="非编码基因数" align="center" prop="nonCodingGeneCount" />      
       <el-table-column label="毒力基因" align="center" prop="dljy" />      
-      <el-table-column label="毒力基因解释" align="center" prop="dljyExpress" />      
-      <el-table-column label="毒力基因解释来源" align="center" prop="dljySource" />
-      <el-table-column label="耐药基因" align="center" prop="nyjy" />      
-      <el-table-column label="耐药基因解释" align="center" prop="nyjyExpress" />      
-      <el-table-column label="耐药基因解释来源" align="center" prop="nyjySource" />
-      <el-table-column label="点突变" align="center" prop="dtpnyjy" />      
-      <el-table-column label="点突变解释" align="center" prop="dtpnyjyExpress" />      
-      <el-table-column label="点突变解释来源" align="center" prop="dtpnyjySource" /> -->
+      <el-table-column label="毒力基因注释" align="center" prop="dljyExpress" />      
+      <el-table-column label="毒力基因注释来源" align="center" prop="dljySource" />
+      <el-table-column label="耐药药品" align="center" prop="nyjy" /> -->
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
         <template slot-scope="scope">
           <el-button
@@ -137,20 +132,20 @@
     <!-- 添加或修改病原体管理对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="140px">
-        <el-form-item label="唯一注册号" prop="assemblyAccession">
-           <el-input v-model="form.assemblyAccession" :disabled="disabledAssemblyAccession" placeholder="请输入唯一注册号" />
+        <el-form-item label="NCBI基因组序列编号" prop="assemblyAccession">
+           <el-input v-model="form.assemblyAccession" :disabled="disabledAssemblyAccession" placeholder="请输入NCBI基因组序列编号" />
         </el-form-item>
-        <el-form-item label="生物名称" prop="organismName">
-           <el-input v-model="form.organismName" placeholder="请输入生物名称" />
+        <el-form-item label="病原体名称" prop="organismName">
+           <el-input v-model="form.organismName" placeholder="请输入病原体名称" />
         </el-form-item>
-        <el-form-item label="病源类型" prop="group">
-          <el-input v-model="form.group" placeholder="请输入病源类型" />
+        <el-form-item label="病原类型" prop="group">
+          <el-input v-model="form.group" placeholder="请输入病原类型" />
         </el-form-item>
         <el-form-item label="子类标签" prop="group1">
           <el-input v-model="form.group1" placeholder="请输入子类标签" />
         </el-form-item>
-        <el-form-item label="中文解释" prop="defined">
-          <el-input type="textarea" v-model="form.defined" placeholder="请输入中文解释" />
+        <el-form-item label="中文注释" prop="defined">
+          <el-input type="textarea" v-model="form.defined" placeholder="请输入中文注释" />
         </el-form-item>
         <el-form-item label="解释的来源" prop="definedSource">
           <el-input v-model="form.definedSource" placeholder="请输入解释的来源" />
@@ -227,29 +222,14 @@
         <el-form-item label="毒力基因" prop="dljy">
           <el-input v-model="form.dljy" placeholder="请输入毒力基因" />
         </el-form-item>
-        <el-form-item label="毒力基因解释" prop="dljyExpress">
-          <el-input v-model="form.dljyExpress" placeholder="请输入毒力基因解释" />
+        <el-form-item label="毒力基因注释" prop="dljyExpress">
+          <el-input v-model="form.dljyExpress" placeholder="请输入毒力基因注释" />
         </el-form-item>
-        <el-form-item label="毒力基因解释来源" prop="dljySource">
-          <el-input v-model="form.dljySource" placeholder="请输入毒力基因解释来源" />
+        <el-form-item label="毒力基因注释来源" prop="dljySource">
+          <el-input v-model="form.dljySource" placeholder="请输入毒力基因注释来源" />
         </el-form-item>
-        <el-form-item label="耐药基因" prop="nyjy">
-          <el-input v-model="form.nyjy" placeholder="请输入耐药基因" />
-        </el-form-item>
-        <el-form-item label="耐药基因解释" prop="nyjyExpress">
-          <el-input v-model="form.nyjyExpress" placeholder="请输入耐药基因解释" />
-        </el-form-item>
-        <el-form-item label="耐药基因解释来源" prop="nyjySource">
-          <el-input v-model="form.nyjySource" placeholder="请输入耐药基因解释来源" />
-        </el-form-item>
-        <el-form-item label="点突变" prop="dtpnyjy">
-          <el-input v-model="form.dtpnyjy" placeholder="请输入点突变" />
-        </el-form-item>
-        <el-form-item label="点突变解释" prop="dtpnyjyExpress">
-          <el-input v-model="form.dtpnyjyExpress" placeholder="请输入点突变解释" />
-        </el-form-item>
-        <el-form-item label="点突变解释来源" prop="dtpnyjySource">
-          <el-input v-model="form.dtpnyjySource" placeholder="请输入点突变解释来源" />
+        <el-form-item label="耐药药品" prop="nyjy">
+          <el-input v-model="form.nyjy" placeholder="请输入耐药药品" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -411,10 +391,7 @@ importDataBase(formData).then(response => {
         seqSource: null,
         express: null,
         filePath: null,
-        dtpnyjy: null,
-        dtpnyjyExpress: null,
         nyjy: null,
-        nyjyExpress: null,
         dljy: null,
         dljyExpress: null,
         createBy: null,

src/views/data/dataBase/dljy.vue

@@ -1,26 +1,26 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="140px">
-      <el-form-item label="唯一注册号" prop="assemblyAccession">
+      <el-form-item label="NCBI基因组序列编号" prop="assemblyAccession">
         <el-input
           v-model="queryParams.assemblyAccession"
-          placeholder="请输入唯一注册号"
+          placeholder="请输入NCBI基因组序列编号"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="生物名称" prop="organismName">
+      <el-form-item label="病原体名称" prop="organismName">
         <el-input
           v-model="queryParams.organismName"
-          placeholder="请输入生物名称"
+          placeholder="请输入病原体名称"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="病源类型" prop="group">
+      <el-form-item label="病原类型" prop="group">
         <el-input
           v-model="queryParams.group"
-          placeholder="请输入病源类型"
+          placeholder="请输入病原类型"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -33,10 +33,10 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="中文解释" prop="defined">
+      <el-form-item label="中文注释" prop="defined">
         <el-input
           v-model="queryParams.defined"
-          placeholder="请输入中文解释"
+          placeholder="请输入中文注释"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -49,18 +49,18 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="毒力基因解释" prop="dljyExpress">
+      <el-form-item label="毒力基因注释" prop="dljyExpress">
         <el-input
           v-model="queryParams.dljyExpress"
-          placeholder="请输入毒力基因解释"
+          placeholder="请输入毒力基因注释"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="毒力基因解释来源" prop="dljySource">
+      <el-form-item label="毒力基因注释来源" prop="dljySource">
         <el-input
           v-model="queryParams.dljySource"
-          placeholder="请输入毒力基因解释来源"
+          placeholder="请输入毒力基因注释来源"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -94,15 +94,15 @@
       </el-row>
 
       <el-table v-loading="loading" :data="dataBaseList" >
-        <el-table-column label="唯一注册号" align="center" prop="assemblyAccession" width="100" />
-        <el-table-column label="生物名称" align="center" prop="organismName" width="150"/>
-        <el-table-column label="病源类型" align="center" prop="group" />
+        <el-table-column label="NCBI基因组序列编号" align="center" prop="assemblyAccession" width="100" />
+        <el-table-column label="病原体名称" align="center" prop="organismName" width="150"/>
+        <el-table-column label="病原类型" align="center" prop="group" />
         <el-table-column label="子类标签" align="center" prop="group1" />
-        <el-table-column label="中文解释" align="center" prop="defined"  width="500" />
+        <el-table-column label="中文注释" align="center" prop="defined"  width="500" />
         <el-table-column label="解释的来源" align="center" prop="definedSource" width="200" />
         <el-table-column label="毒力基因" align="center" prop="dljy" />      
-        <el-table-column label="毒力基因解释" align="center" prop="dljyExpress" width="100"  />      
-        <el-table-column label="毒力基因解释来源" align="center" prop="dljySource" width="200"  />
+        <el-table-column label="毒力基因注释" align="center" prop="dljyExpress" width="100"  />      
+        <el-table-column label="毒力基因注释来源" align="center" prop="dljySource" width="200"  />
       <!-- <el-table-column label="参考基因组类型" align="center" prop="refseqCategory" />
       <el-table-column label="分类号" align="center" prop="taxid" />
       <el-table-column label="种分类号" align="center" prop="speciesTaxid" />
@@ -126,12 +126,7 @@
       <el-table-column label="总基因数" align="center" prop="totalGeneCount" />
       <el-table-column label="翻译蛋白基因数" align="center" prop="proteinCodingGeneCount" />      
       <el-table-column label="非编码基因数" align="center" prop="nonCodingGeneCount" />      
-      <el-table-column label="耐药基因" align="center" prop="nyjy" />      
-      <el-table-column label="耐药基因解释" align="center" prop="nyjyExpress" />      
-      <el-table-column label="耐药基因解释来源" align="center" prop="nyjySource" />
-      <el-table-column label="点突变" align="center" prop="dtpnyjy" />      
-      <el-table-column label="点突变解释" align="center" prop="dtpnyjyExpress" />      
-      <el-table-column label="点突变解释来源" align="center" prop="dtpnyjySource" /> -->
+      <el-table-column label="耐药药品" align="center" prop="nyjy" /> -->
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
         <template slot-scope="scope">
           <el-button
@@ -162,20 +157,20 @@
     <!-- 添加或修改病原体管理对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="140px">
-        <el-form-item label="唯一注册号" prop="assemblyAccession">
-           <el-input v-model="form.assemblyAccession" :disabled="disabledAssemblyAccession" placeholder="请输入唯一注册号" />
+        <el-form-item label="NCBI基因组序列编号" prop="assemblyAccession">
+           <el-input v-model="form.assemblyAccession" :disabled="disabledAssemblyAccession" placeholder="请输入NCBI基因组序列编号" />
         </el-form-item>
-        <el-form-item label="生物名称" prop="organismName">
-           <el-input v-model="form.organismName" placeholder="请输入生物名称" />
+        <el-form-item label="病原体名称" prop="organismName">
+           <el-input v-model="form.organismName" placeholder="请输入病原体名称" />
         </el-form-item>
-        <el-form-item label="病源类型" prop="group">
-          <el-input v-model="form.group" placeholder="请输入病源类型" />
+        <el-form-item label="病原类型" prop="group">
+          <el-input v-model="form.group" placeholder="请输入病原类型" />
         </el-form-item>
         <el-form-item label="子类标签" prop="group1">
           <el-input v-model="form.group1" placeholder="请输入子类标签" />
         </el-form-item>
-        <el-form-item label="中文解释" prop="defined">
-          <el-input type="textarea" v-model="form.defined" placeholder="请输入中文解释" />
+        <el-form-item label="中文注释" prop="defined">
+          <el-input type="textarea" v-model="form.defined" placeholder="请输入中文注释" />
         </el-form-item>
         <el-form-item label="解释的来源" prop="definedSource">
           <el-input v-model="form.definedSource" placeholder="请输入解释的来源" />
@@ -252,11 +247,11 @@
         <el-form-item label="毒力基因" prop="dljy">
           <el-input v-model="form.dljy" placeholder="请输入毒力基因" />
         </el-form-item>
-        <el-form-item label="毒力基因解释" prop="dljyExpress">
-          <el-input v-model="form.dljyExpress" placeholder="请输入毒力基因解释" />
+        <el-form-item label="毒力基因注释" prop="dljyExpress">
+          <el-input v-model="form.dljyExpress" placeholder="请输入毒力基因注释" />
         </el-form-item>
-        <el-form-item label="毒力基因解释来源" prop="dljySource">
-          <el-input v-model="form.dljySource" placeholder="请输入毒力基因解释来源" />
+        <el-form-item label="毒力基因注释来源" prop="dljySource">
+          <el-input v-model="form.dljySource" placeholder="请输入毒力基因注释来源" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -421,10 +416,7 @@ importDataBase(formData).then(response => {
         seqSource: null,
         express: null,
         filePath: null,
-        dtpnyjy: null,
-        dtpnyjyExpress: null,
         nyjy: null,
-        nyjyExpress: null,
         dljy: null,
         dljyExpress: null,
         createBy: null,

src/views/data/dataBase/dtbnyjy.vue

@@ -1,505 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="140px">
-      <el-form-item label="唯一注册号" prop="assemblyAccession">
-        <el-input
-          v-model="queryParams.assemblyAccession"
-          placeholder="请输入唯一注册号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="生物名称" prop="organismName">
-        <el-input
-          v-model="queryParams.organismName"
-          placeholder="请输入生物名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="病源类型" prop="group">
-        <el-input
-          v-model="queryParams.group"
-          placeholder="请输入病源类型"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="子类标签" prop="group1">
-        <el-input
-          v-model="queryParams.group1"
-          placeholder="请输入子类标签"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="中文解释" prop="defined">
-        <el-input
-          v-model="queryParams.defined"
-          placeholder="请输入中文解释"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="点突变" prop="dtpnyjy">
-        <el-input
-          v-model="queryParams.dtpnyjy"
-          placeholder="请输入点突变"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="点突变解释" prop="dtpnyjyExpress">
-        <el-input
-          v-model="queryParams.dtpnyjyExpress"
-          placeholder="请输入点突变解释"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="点突变解释来源" prop="dtpnyjySource">
-        <el-input
-          v-model="queryParams.dtpnyjySource"
-          placeholder="请输入点突变解释来源"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-upload"
-          size="mini"
-          @click="$refs.upload_file.click()"
-        >导入</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="dataBaseList" >
-      <el-table-column label="唯一注册号" align="center" prop="assemblyAccession" width="100" />
-      <el-table-column label="生物名称" align="center" prop="organismName" width="150" />
-      <el-table-column label="病源类型" align="center" prop="group" />
-      <el-table-column label="子类标签" align="center" prop="group1" />
-      <el-table-column label="中文解释" align="center" prop="defined"  width="500" />
-      <el-table-column label="解释的来源" align="center" prop="definedSource" width="200" />
-      <el-table-column label="点突变" align="center" prop="dtpnyjy" />      
-      <el-table-column label="点突变解释" align="center" prop="dtpnyjyExpress" width="100" />      
-      <el-table-column label="点突变解释来源" align="center" prop="dtpnyjySource" width="200" /> 
-      <!-- <el-table-column label="参考基因组类型" align="center" prop="refseqCategory" />
-      <el-table-column label="分类号" align="center" prop="taxid" />
-      <el-table-column label="种分类号" align="center" prop="speciesTaxid" />
-      <el-table-column label="亚种名称" align="center" prop="infraspecificName"/>
-      <el-table-column label="分类类型" align="center" prop="isolate" />
-      <el-table-column label="拼装级别" align="center" prop="assemblyLevel" />
-      <el-table-column label="基因组级别" align="center" prop="genomeRep" />
-      <el-table-column label="seqRelDate" align="center" prop="seqRelDate" />     
-      <el-table-column label="ASM编号" align="center" prop="asmName" />
-      <el-table-column label="gbrs_paired_asm" align="center" prop="gbrsPairedAsm" />
-      <el-table-column label="paired_asm_comp" align="center" prop="pairedAsmComp" />
-      <el-table-column label="ftp_path" align="center" prop="ftpPath" />
-      <el-table-column label="excluded_from_refseq" align="center" prop="excludedFromRefseq" />
-      <el-table-column label="装配类型" align="center" prop="assemblyType" />
-      <el-table-column label="基因组大小" align="center" prop="genomeSize" />
-      <el-table-column label="基因组大小(无缺口)" align="center" prop="genomeSizeUngapped" />
-      <el-table-column label="GC比例" align="center" prop="gcPercent" />
-      <el-table-column label="replicon_count" align="center" prop="repliconCount" />
-      <el-table-column label="scaffold_count" align="center" prop="scaffoldCount" />
-      <el-table-column label="contig_count" align="center" prop="contigCount" />
-      <el-table-column label="总基因数" align="center" prop="totalGeneCount" />
-      <el-table-column label="翻译蛋白基因数" align="center" prop="proteinCodingGeneCount" />      
-      <el-table-column label="非编码基因数" align="center" prop="nonCodingGeneCount" />      
-      <el-table-column label="毒力基因" align="center" prop="dljy" />      
-      <el-table-column label="毒力基因解释" align="center" prop="dljyExpress" />      
-      <el-table-column label="毒力基因解释来源" align="center" prop="dljySource" />
-      <el-table-column label="耐药基因" align="center" prop="nyjy" />      
-      <el-table-column label="耐药基因解释" align="center" prop="nyjyExpress" />      
-      <el-table-column label="耐药基因解释来源" align="center" prop="nyjySource" />-->
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['data:dataReportByt:edit']"
-          >编辑</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['data:dataBase:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改病原体管理对话框 -->
-    <!-- 添加或修改病原体管理对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
-        <el-form-item label="唯一注册号" prop="assemblyAccession">
-           <el-input v-model="form.assemblyAccession" :disabled="disabledAssemblyAccession" placeholder="请输入唯一注册号" />
-        </el-form-item>
-        <el-form-item label="生物名称" prop="organismName">
-           <el-input v-model="form.organismName" placeholder="请输入生物名称" />
-        </el-form-item>
-        <el-form-item label="病源类型" prop="group">
-          <el-input v-model="form.group" placeholder="请输入病源类型" />
-        </el-form-item>
-        <el-form-item label="子类标签" prop="group1">
-          <el-input v-model="form.group1" placeholder="请输入子类标签" />
-        </el-form-item>
-        <el-form-item label="中文解释" prop="defined">
-          <el-input type="textarea" v-model="form.defined" placeholder="请输入中文解释" />
-        </el-form-item>
-        <el-form-item label="解释的来源" prop="definedSource">
-          <el-input v-model="form.definedSource" placeholder="请输入解释的来源" />
-        </el-form-item>
-        <el-form-item label="参考基因组类型" prop="refseqCategory">
-          <el-input v-model="form.refseqCategory" placeholder="请输入参考基因组类型" />
-        </el-form-item>
-        <el-form-item label="分类号" prop="taxid">
-          <el-input v-model="form.taxid" placeholder="请输入分类号" />
-        </el-form-item>
-        <el-form-item label="种分类号" prop="speciesTaxid">
-          <el-input v-model="form.speciesTaxid" placeholder="请输入种分类号" />
-        </el-form-item>
-        <el-form-item label="亚种名称" prop="infraspecificName">
-          <el-input v-model="form.infraspecificName" placeholder="请输入亚种名称" />
-        </el-form-item>
-        <el-form-item label="分类类型" prop="isolate">
-          <el-input v-model="form.isolate" placeholder="请输入分类类型" />
-        </el-form-item>
-        <el-form-item label="拼装级别" prop="assemblyLevel">
-          <el-input v-model="form.assemblyLevel" placeholder="请输入拼装级别" />
-        </el-form-item>
-        <el-form-item label="基因组级别" prop="genomeRep">
-          <el-input v-model="form.genomeRep" placeholder="请输入基因组级别" />
-        </el-form-item>
-        <el-form-item label="seq_rel_date" prop="seqRelDate">
-          <el-input v-model="form.seqRelDate" placeholder="请输入seq_rel_date" />
-        </el-form-item>
-        <el-form-item label="ASM编号" prop="asmName">
-          <el-input v-model="form.asmName" placeholder="请输入ASM编号" />
-        </el-form-item>
-        <el-form-item label="gbrs_paired_asm" prop="gbrs_paired_asm">
-          <el-input v-model="form.gbrs_paired_asm" placeholder="请输入gbrs_paired_asm" />
-        </el-form-item>
-        <el-form-item label="paired_asm_comp" prop="paired_asm_comp">
-          <el-input v-model="form.paired_asm_comp" placeholder="请输入paired_asm_comp" />
-        </el-form-item>
-        <el-form-item label="ftp_path" prop="ftp_path">
-          <el-input v-model="form.ftp_path" placeholder="请输入ftp_path" />
-        </el-form-item>
-        <el-form-item label="excluded_from_refseq" prop="excluded_from_refseq">
-          <el-input v-model="form.excluded_from_refseq" placeholder="请输入excluded_from_refseq" />
-        </el-form-item>        
-        <el-form-item label="装配类型" prop="assemblyType">
-          <el-input v-model="form.assemblyType" placeholder="请输入装配类型" />
-        </el-form-item>
-        <el-form-item label="基因组大小" prop="genomeSize">
-          <el-input v-model="form.genomeSize" placeholder="请输入基因组大小" />
-        </el-form-item>
-        <el-form-item label="基因组大小(无缺口)" prop="genomeSizeUngapped">
-          <el-input v-model="form.genomeSizeUngapped" placeholder="请输入基因组大小(无缺口)" />
-        </el-form-item>
-        <el-form-item label="GC比例" prop="gcPercent">
-          <el-input v-model="form.gcPercent" placeholder="请输入GC比例" />
-        </el-form-item>
-        <el-form-item label="replicon_count" prop="replicon_count">
-          <el-input v-model="form.replicon_count" placeholder="请输入replicon_count" />
-        </el-form-item>
-        <el-form-item label="scaffold_count" prop="scaffold_count">
-          <el-input v-model="form.scaffold_count" placeholder="请输入scaffold_count" />
-        </el-form-item>
-        <el-form-item label="contig_count" prop="contig_count">
-          <el-input v-model="form.contig_count" placeholder="请输入contig_count" />
-        </el-form-item>
-        <el-form-item label="总基因数" prop="totalGeneCount">
-          <el-input v-model="form.totalGeneCount" placeholder="请输入总基因数" />
-        </el-form-item>
-        <el-form-item label="翻译蛋白基因数" prop="proteinCodingGeneCount">
-          <el-input v-model="form.proteinCodingGeneCount" placeholder="请输入翻译蛋白基因数" />
-        </el-form-item>
-        <el-form-item label="非编码基因数" prop="nonCodingGeneCount">
-          <el-input v-model="form.nonCodingGeneCount" placeholder="请输入非编码基因数" />
-        </el-form-item>
-        <el-form-item label="点突变" prop="dtpnyjy">
-          <el-input v-model="form.dtpnyjy" placeholder="请输入点突变" />
-        </el-form-item>
-        <el-form-item label="点突变解释" prop="dtpnyjyExpress">
-          <el-input v-model="form.dtpnyjyExpress" placeholder="请输入点突变解释" />
-        </el-form-item>
-        <el-form-item label="点突变解释来源" prop="dtpnyjySource">
-          <el-input v-model="form.dtpnyjySource" placeholder="请输入点突变解释来源" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-    <!-- 上传文件  -->
-    <input hidden type="file" ref="upload_file" accept=".xls,.xlsx" class="upload_file" @change="readExcel($event)" />
-
-  </div>
-</template>
-
-<script>
-import { listDataBase, getDataBase, delDataBase, addDataBase, updateDataBase,importDataBase } from "@/api/data/dataBase"
-import * as XLSX from "xlsx"
-
-export default {
-  name: "DataBase",
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 病原体管理表格数据
-      dataBaseList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        type:4,
-        assemblyAccession: null,
-        organismName: null,
-        group: null,
-        group1: null,
-        defined: null,
-        dtpnyjy:null,
-        dtpnyjyExpress:null,
-        dtpnyjySource:null
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-      },
-      upload_file: "",
-      lists: [],
-      disabledAssemblyAccession:false
-    }
-  },
-  created() {
-    this.getList()
-  },
-  methods: {
-    // 读取Excel文件
-    readExcel(e) {
-      console.log("读取Excel文件", e);
-      console.log("读取Excel文件11", XLSX);
-  // 读取表格文件
-  let that = this;
-  const files = e.target.files;
-  if (files.length <= 0) {
-    return false;
-  } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
-    this.$message({
-      message: "上传格式不正确，请上传xls或者xlsx格式",
-      type: "warning",
-    });
-    return false;
-  } else {
-    this.uploadFile(files[0]);
-    // 更新获取文件名
-    // that.upload_file = files[0].name;
-  }
-  // const fileReader = new FileReader();
-  // fileReader.onload = (ev) => {
-  //   try {
-  //     const data = ev.target.result;
-  //     const workbook = XLSX.read(data, {
-  //       type: "binary",
-  //     });
-  //     const wsname = workbook.SheetNames[0]; //取第一张表
-  //     console.log(XLSX);
-  //     console.log(wsname);
-  //     console.log(workbook);
-  //     const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
-  //     that.lists = [];
-  //     console.log(ws);
-  //   } catch (e) {
-  //     return false;
-  //   }
-  // };
-  // fileReader.readAsBinaryString(files[0]);
-},
-uploadFile(file) {
-  console.log("上传文件", file);
-  // 创建FormData对象
-const formData = new FormData(); // 创建FormData对象
-formData.append('file', file); // 将文件添加到FormData对象中，
-importDataBase(formData).then(response => {
-  this.$modal.msgSuccess("导入成功")
-  this.getList()
-})
-},
-    /** 查询病原体管理列表 */
-    getList() {
-      this.loading = true
-      listDataBase(this.queryParams).then(response => {
-        this.dataBaseList = response.rows
-        this.total = response.total
-        this.loading = false
-      })
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false
-      this.reset()
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        assemblyAccession: null,
-        refseqCategory: null,
-        taxid: null,
-        speciesTaxid: null,
-        organismName: null,
-        infraspecificName: null,
-        isolate: null,
-        assemblyLevel: null,
-        genomeRep: null,
-        seqRelDate: null,
-        asmName: null,
-        gbrsPairedAsm: null,
-        pairedAsmComp: null,
-        ftpPath: null,
-        excludedFromRefseq: null,
-        assemblyType: null,
-        group: null,
-        genomeSize: null,
-        genomeSizeUngapped: null,
-        gcPercent: null,
-        repliconCount: null,
-        scaffoldCount: null,
-        contigCount: null,
-        totalGeneCount: null,
-        proteinCodingGeneCount: null,
-        nonCodingGeneCount: null,
-        nameCn: null,
-        defined: null,
-        seqSource: null,
-        express: null,
-        filePath: null,
-        dtpnyjy: null,
-        dtpnyjyExpress: null,
-        nyjy: null,
-        nyjyExpress: null,
-        dljy: null,
-        dljyExpress: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null,
-        remark: null
-      }
-      this.resetForm("form")
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1
-      this.getList()
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm")
-      this.handleQuery()
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.assemblyAccession)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.assemblyAccession || this.ids
-      this.$modal.confirm('是否确认删除病原体管理编号为"' + ids + '"的数据项？').then(function() {
-        return delDataBase(ids)
-      }).then(() => {
-        this.getList()
-        this.$modal.msgSuccess("删除成功")
-      }).catch(() => {})
-    },
-     /** 新增按钮操作 */
-    handleAdd() {
-      this.reset()
-      this.open = true
-      this.disabledAssemblyAccession = false
-      this.title = "添加病原体信息"
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset()
-      const id = row.assemblyAccession
-      this.disabledAssemblyAccession = true;
-      getDataBase(id).then(response => {
-        this.form = response.data
-        this.open = true
-        this.title = "修改病原体信息"
-      })
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.assemblyAccession != null) {
-            updateDataBase(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功")
-              this.open = false
-              this.getList()
-            })
-          } else {
-            addDataBase(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功")
-              this.open = false
-              this.getList()
-            })
-          }
-        }
-      })
-    },
-  }
-}
-</script>

src/views/data/dataBase/nyjy.vue

@@ -1,26 +1,26 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="140px">
-      <el-form-item label="唯一注册号" prop="assemblyAccession">
+      <el-form-item label="NCBI基因组序列编号" prop="assemblyAccession">
         <el-input
           v-model="queryParams.assemblyAccession"
-          placeholder="请输入唯一注册号"
+          placeholder="请输入NCBI基因组序列编号"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="生物名称" prop="organismName">
+      <el-form-item label="病原体名称" prop="organismName">
         <el-input
           v-model="queryParams.organismName"
-          placeholder="请输入生物名称"
+          placeholder="请输入病原体名称"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="病源类型" prop="group">
+      <el-form-item label="病原类型" prop="group">
         <el-input
           v-model="queryParams.group"
-          placeholder="请输入病源类型"
+          placeholder="请输入病原类型"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -33,34 +33,18 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="中文解释" prop="defined">
+      <el-form-item label="中文注释" prop="defined">
         <el-input
           v-model="queryParams.defined"
-          placeholder="请输入中文解释"
+          placeholder="请输入中文注释"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="耐药基因" prop="nyjy">
+      <el-form-item label="耐药药品" prop="nyjy">
         <el-input
           v-model="queryParams.nyjy"
-          placeholder="请输入耐药基因"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="耐药基因解释" prop="nyjyExpress">
-        <el-input
-          v-model="queryParams.nyjyExpress"
-          placeholder="请输入耐药基因解释"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="耐药基因解释来源" prop="nyjySource">
-        <el-input
-          v-model="queryParams.nyjySource"
-          placeholder="请输入耐药基因解释来源"
+          placeholder="请输入耐药药品"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -94,15 +78,13 @@
     </el-row>
 
     <el-table v-loading="loading" :data="dataBaseList" >
-      <el-table-column label="唯一注册号" align="center" prop="assemblyAccession" width="100"/>
-      <el-table-column label="生物名称" align="center" prop="organismName" width="150"/>
-      <el-table-column label="病源类型" align="center" prop="group" />
+      <el-table-column label="NCBI基因组序列编号" align="center" prop="assemblyAccession" width="100"/>
+      <el-table-column label="病原体名称" align="center" prop="organismName" width="150"/>
+      <el-table-column label="病原类型" align="center" prop="group" />
       <el-table-column label="子类标签" align="center" prop="group1" />
-      <el-table-column label="中文解释" align="center" prop="defined"  width="500" />
+      <el-table-column label="中文注释" align="center" prop="defined"  width="500" />
       <el-table-column label="解释的来源" align="center" prop="definedSource" width="200" />
-      <el-table-column label="耐药基因" align="center" prop="nyjy" />      
-      <el-table-column label="耐药基因解释" align="center" prop="nyjyExpress" width="100" />      
-      <el-table-column label="耐药基因解释来源" align="center" prop="nyjySource" width="200" />
+      <el-table-column label="耐药药品" align="center" prop="nyjy" /> 
       <!-- <el-table-column label="参考基因组类型" align="center" prop="refseqCategory" />
       <el-table-column label="分类号" align="center" prop="taxid" />
       <el-table-column label="种分类号" align="center" prop="speciesTaxid" />
@@ -127,11 +109,8 @@
       <el-table-column label="翻译蛋白基因数" align="center" prop="proteinCodingGeneCount" />      
       <el-table-column label="非编码基因数" align="center" prop="nonCodingGeneCount" />      
       <el-table-column label="毒力基因" align="center" prop="dljy" />      
-      <el-table-column label="毒力基因解释" align="center" prop="dljyExpress" />      
-      <el-table-column label="毒力基因解释来源" align="center" prop="dljySource" />
-      <el-table-column label="点突变" align="center" prop="dtpnyjy" />      
-      <el-table-column label="点突变解释" align="center" prop="dtpnyjyExpress" />      
-      <el-table-column label="点突变解释来源" align="center" prop="dtpnyjySource" /> -->
+      <el-table-column label="毒力基因注释" align="center" prop="dljyExpress" />      
+      <el-table-column label="毒力基因注释来源" align="center" prop="dljySource" /> -->
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
         <template slot-scope="scope">
           <el-button
@@ -162,20 +141,20 @@
     <!-- 添加或修改病原体管理对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="140px">
-        <el-form-item label="唯一注册号" prop="assemblyAccession">
-           <el-input v-model="form.assemblyAccession" :disabled="disabledAssemblyAccession" placeholder="请输入唯一注册号" />
+        <el-form-item label="NCBI基因组序列编号" prop="assemblyAccession">
+           <el-input v-model="form.assemblyAccession" :disabled="disabledAssemblyAccession" placeholder="请输入NCBI基因组序列编号" />
         </el-form-item>
-        <el-form-item label="生物名称" prop="organismName">
-           <el-input v-model="form.organismName" placeholder="请输入生物名称" />
+        <el-form-item label="病原体名称" prop="organismName">
+           <el-input v-model="form.organismName" placeholder="请输入病原体名称" />
         </el-form-item>
-        <el-form-item label="病源类型" prop="group">
-          <el-input v-model="form.group" placeholder="请输入病源类型" />
+        <el-form-item label="病原类型" prop="group">
+          <el-input v-model="form.group" placeholder="请输入病原类型" />
         </el-form-item>
         <el-form-item label="子类标签" prop="group1">
           <el-input v-model="form.group1" placeholder="请输入子类标签" />
         </el-form-item>
-        <el-form-item label="中文解释" prop="defined">
-          <el-input type="textarea" v-model="form.defined" placeholder="请输入中文解释" />
+        <el-form-item label="中文注释" prop="defined">
+          <el-input type="textarea" v-model="form.defined" placeholder="请输入中文注释" />
         </el-form-item>
         <el-form-item label="解释的来源" prop="definedSource">
           <el-input v-model="form.definedSource" placeholder="请输入解释的来源" />
@@ -249,14 +228,8 @@
         <el-form-item label="非编码基因数" prop="nonCodingGeneCount">
           <el-input v-model="form.nonCodingGeneCount" placeholder="请输入非编码基因数" />
         </el-form-item>
-        <el-form-item label="耐药基因" prop="nyjy">
-          <el-input v-model="form.nyjy" placeholder="请输入耐药基因" />
-        </el-form-item>
-        <el-form-item label="耐药基因解释" prop="nyjyExpress">
-          <el-input v-model="form.nyjyExpress" placeholder="请输入耐药基因解释" />
-        </el-form-item>
-        <el-form-item label="耐药基因解释来源" prop="nyjySource">
-          <el-input v-model="form.nyjySource" placeholder="请输入耐药基因解释来源" />
+        <el-form-item label="耐药药品" prop="nyjy">
+          <el-input type="textarea" v-model="form.nyjy" placeholder="请输入耐药药品" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -306,9 +279,7 @@ export default {
         group: null,
         group1: null,
         defined: null,
-        nyjy:null,
-        nyjyExpress:null,
-        nyjySource:null
+        nyjy:null
       },
       // 表单参数
       form: {},
@@ -422,10 +393,7 @@ importDataBase(formData).then(response => {
         seqSource: null,
         express: null,
         filePath: null,
-        dtpnyjy: null,
-        dtpnyjyExpress: null,
         nyjy: null,
-        nyjyExpress: null,
         dljy: null,
         dljyExpress: null,
         createBy: null,

src/views/data/dataDrugs/index.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="药品名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入药品名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="疾病" prop="disease">
+        <el-input
+          v-model="queryParams.disease"
+          placeholder="请输入疾病"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="主要用途" prop="mainUse">
+        <el-date-picker clearable
+          v-model="queryParams.mainUse"
+          type="date"
+          value-format="yyyy-MM-dd"
+          placeholder="请选择主要用途">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="来源" prop="source">
+        <el-input
+          v-model="queryParams.source"
+          placeholder="请输入来源"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['data:dataDrugs:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['data:dataDrugs:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['data:dataDrugs:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['data:dataDrugs:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="dataDrugsList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="药品名称" align="center" prop="name" />
+      <el-table-column label="疾病" align="center" prop="disease" />
+      <el-table-column label="主要用途" align="center" prop="mainUse" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.mainUse, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="来源" align="center" prop="source" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['data:dataDrugs:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['data:dataDrugs:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改药品数据对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="药品名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入药品名称" />
+        </el-form-item>
+        <el-form-item label="疾病" prop="disease">
+          <el-input v-model="form.disease" placeholder="请输入疾病" />
+        </el-form-item>
+        <el-form-item label="主要用途" prop="mainUse">
+          <el-date-picker clearable
+            v-model="form.mainUse"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="请选择主要用途">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="来源" prop="source">
+          <el-input v-model="form.source" placeholder="请输入来源" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listDataDrugs, getDataDrugs, delDataDrugs, addDataDrugs, updateDataDrugs } from "@/api/data/dataDrugs"
+
+export default {
+  name: "DataDrugs",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 药品数据表格数据
+      dataDrugsList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        disease: null,
+        mainUse: null,
+        source: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 查询药品数据列表 */
+    getList() {
+      this.loading = true
+      listDataDrugs(this.queryParams).then(response => {
+        this.dataDrugsList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        disease: null,
+        mainUse: null,
+        source: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null
+      }
+      this.resetForm("form")
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = "添加药品数据"
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const id = row.id || this.ids
+      getDataDrugs(id).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = "修改药品数据"
+      })
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateDataDrugs(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功")
+              this.open = false
+              this.getList()
+            })
+          } else {
+            addDataDrugs(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功")
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除药品数据编号为"' + ids + '"的数据项？').then(function() {
+        return delDataDrugs(ids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('data/dataDrugs/export', {
+        ...this.queryParams
+      }, `dataDrugs_${new Date().getTime()}.xlsx`)
+    }
+  }
+}
+</script>

src/views/data/dataReportByt/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="唯一注册号" prop="assemblyAccession">
+      <el-form-item label="NCBI基因组序列编号" prop="assemblyAccession">
         <el-input
           v-model="queryParams.assemblyAccession"
-          placeholder="请输入唯一注册号"
+          placeholder="请输入NCBI基因组序列编号"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -104,7 +104,7 @@
     <el-table v-loading="loading" :data="dataReportBytList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="唯一注册号" align="center" prop="assemblyAccession" />
+      <el-table-column label="NCBI基因组序列编号" align="center" prop="assemblyAccession" />
       <el-table-column label="病原体名称" align="center" prop="name" />
       <el-table-column label="统计时间" align="center" prop="reportDate" width="180">
         <template slot-scope="scope">
@@ -147,8 +147,8 @@
     <!-- 添加或修改病原体历史统计对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="唯一注册号" prop="assemblyAccession">
-          <el-input v-model="form.assemblyAccession" placeholder="请输入唯一注册号" />
+        <el-form-item label="NCBI基因组序列编号" prop="assemblyAccession">
+          <el-input v-model="form.assemblyAccession" placeholder="请输入NCBI基因组序列编号" />
         </el-form-item>
         <el-form-item label="病原体名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入病原体名称" />

src/views/sample/sampleExperiment/filterReport.vue

@@ -780,7 +780,7 @@ export default {
     this.sampleInfoId = this.$route.query.id;
     this.baseid = this.$route.query.baseid;
 
-    // this.$route.meta.title = '过滤设置【实验编码：】'
+    // this.$route.meta.title = '过滤设置【实验编号：】'
     // this.$store.dispatch('tagsView/editVisitedViews', this.$route)
   },
   methods: {

src/views/sample/sampleExperiment/index.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="实验编码" prop="experimentCode">
+      <el-form-item label="实验编号" prop="experimentCode">
         <el-input
           v-model="queryParams.experimentCode"
-          placeholder="请输入实验编码"
+          placeholder="请输入实验编号"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="样本编码" prop="sampleInfoCode" v-if="sampleInfoId == null">
+      <el-form-item label="样本编号" prop="sampleInfoCode" v-if="sampleInfoId == null">
         <el-input
           v-model="queryParams.sampleInfoCode"
-          placeholder="请输入样本编码"
+          placeholder="请输入样本编号"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -59,8 +59,8 @@
 
     <el-table v-loading="loading" :data="sampleExperimentList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="实验编码" align="center" prop="experimentCode" />
-      <el-table-column label="样本编码" align="center" prop="sampleCode" />
+      <el-table-column label="实验编号" align="center" prop="experimentCode" />
+      <el-table-column label="样本编号" align="center" prop="sampleCode" />
       <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.buss_read_type" :value="scope.row.status"/>
@@ -125,8 +125,8 @@
     <!-- 添加或修改解读管理对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="实验编码" prop="experimentCode">
-          <el-input v-model="form.experimentCode" placeholder="请输入实验编码" />
+        <el-form-item label="实验编号" prop="experimentCode">
+          <el-input v-model="form.experimentCode" placeholder="请输入实验编号" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
@@ -181,7 +181,7 @@ export default {
       baseUrl: process.env.VUE_APP_BASE_API,
       // 表单校验
       rules: {
-        experimentCode:[ { required: true, message: "实验编码不能为空", trigger: "blur" }]
+        experimentCode:[ { required: true, message: "实验编号不能为空", trigger: "blur" }]
       }
     }
   },

src/views/sample/sampleInfo/index.vue

@@ -8,10 +8,10 @@
       v-show="showSearch"
       label-width="100px"
     >
-      <el-form-item label="样本编码" prop="sampleCode">
+      <el-form-item label="样本编号" prop="sampleCode">
         <el-input
           v-model="queryParams.sampleCode"
-          placeholder="请输入样本编码"
+          placeholder="请输入样本编号"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -64,10 +64,10 @@
           </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="医生名字" prop="doctorName">
+      <el-form-item label="医生姓名" prop="doctorName">
         <el-input
           v-model="queryParams.doctorName"
-          placeholder="请输入医生名字"
+          placeholder="请输入医生姓名"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -134,9 +134,9 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" align="center" />
-
-      <el-table-column label="样本编码" align="center" prop="sampleCode" />
-      <el-table-column label="患者名称" align="center" prop="patientName" />
+      
+      <el-table-column label="样本编号" align="center" prop="sampleCode" />
+      <el-table-column label="患者姓名" align="center" prop="patientName" />
       <el-table-column label="患者电话" align="center" prop="patientPhone" />
 
       <el-table-column label="样本类型" align="center" prop="sampleTypeName" />
@@ -147,7 +147,7 @@
       />
       <el-table-column label="送检科室" align="center" prop="sampleDeptName" />
 
-      <el-table-column label="医生名字" align="center" prop="doctorName" />
+      <el-table-column label="医生姓名" align="center" prop="doctorName" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column
         label="操作"
@@ -180,8 +180,8 @@
     <!-- 添加或修改样本管理对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="样本编码" prop="sampleCode">
-          <el-input v-model="form.sampleCode" placeholder="请输入样本编码" />
+        <el-form-item label="样本编号" prop="sampleCode">
+          <el-input v-model="form.sampleCode" placeholder="请输入样本编号" />
         </el-form-item>
         <el-form-item label="样本类型" prop="sampleTypeId">
           <el-select
@@ -253,8 +253,8 @@
             </el-col>
           </el-row>
         </el-form-item>
-        <el-form-item label="医生名字" prop="doctorName">
-          <el-input v-model="form.doctorName" placeholder="请输入医生名字" />
+        <el-form-item label="医生姓名" prop="doctorName">
+          <el-input v-model="form.doctorName" placeholder="请输入医生姓名" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input

src/views/system/area/index.vue

@@ -9,18 +9,10 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="维度" prop="lat">
+      <el-form-item label="英文名称" prop="areaEng">
         <el-input
-          v-model="queryParams.lat"
-          placeholder="请输入维度"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="经度" prop="lng">
-        <el-input
-          v-model="queryParams.lng"
-          placeholder="请输入经度"
+          v-model="queryParams.areaEng"
+          placeholder="请输入英文名称"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -83,8 +75,7 @@
       <el-table-column label="父ID" align="center" prop="areaParentId" />
       <el-table-column label="层级" align="center" prop="areaDeep" />
       <el-table-column label="中文名称" align="center" prop="areaName" />
-      <el-table-column label="维度" align="center" prop="lat" />
-      <el-table-column label="经度" align="center" prop="lng" />
+      <el-table-column label="英文名称" align="center" prop="areaEng" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -119,11 +110,8 @@
         <el-form-item label="中文名称" prop="areaName">
           <el-input v-model="form.areaName" placeholder="请输入中文名称" />
         </el-form-item>
-        <el-form-item label="维度" prop="lat">
-          <el-input v-model="form.lat" placeholder="请输入维度" />
-        </el-form-item>
-        <el-form-item label="经度" prop="lng">
-          <el-input v-model="form.lng" placeholder="请输入经度" />
+        <el-form-item label="英文名称" prop="areaEng">
+          <el-input v-model="form.areaEng" placeholder="请输入维度" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -166,8 +154,7 @@ export default {
         areaParentId: null,
         areaDeep: null,
         areaName: null,
-        lat: null,
-        lng: null
+        areaEng: null
       },
       // 表单参数
       form: {},
@@ -201,8 +188,7 @@ export default {
         areaParentId: null,
         areaDeep: null,
         areaName: null,
-        lat: null,
-        lng: null
+        areaEng: null
       }
       this.resetForm("form")
     },

src/views/tool/build/CodeTypeDialog.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <el-dialog
+      v-bind="$attrs"
+      width="500px"
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+      v-on="$listeners"
+      @open="onOpen"
+      @close="onClose"
+    >
+      <el-row :gutter="15">
+        <el-form
+          ref="elForm"
+          :model="formData"
+          :rules="rules"
+          size="medium"
+          label-width="100px"
+        >
+          <el-col :span="24">
+            <el-form-item label="生成类型" prop="type">
+              <el-radio-group v-model="formData.type">
+                <el-radio-button
+                  v-for="(item, index) in typeOptions"
+                  :key="index"
+                  :label="item.value"
+                  :disabled="item.disabled"
+                >
+                  {{ item.label }}
+                </el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="showFileName" label="文件名" prop="fileName">
+              <el-input v-model="formData.fileName" placeholder="请输入文件名" clearable />
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+
+      <div slot="footer">
+        <el-button @click="close">
+          取消
+        </el-button>
+        <el-button type="primary" @click="handleConfirm">
+          确定
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  inheritAttrs: false,
+  props: ['showFileName'],
+  data() {
+    return {
+      formData: {
+        fileName: undefined,
+        type: 'file'
+      },
+      rules: {
+        fileName: [{
+          required: true,
+          message: '请输入文件名',
+          trigger: 'blur'
+        }],
+        type: [{
+          required: true,
+          message: '生成类型不能为空',
+          trigger: 'change'
+        }]
+      },
+      typeOptions: [{
+        label: '页面',
+        value: 'file'
+      }, {
+        label: '弹窗',
+        value: 'dialog'
+      }]
+    }
+  },
+  computed: {
+  },
+  watch: {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      if (this.showFileName) {
+        this.formData.fileName = `${+new Date()}.vue`
+      }
+    },
+    onClose() {
+    },
+    close(e) {
+      this.$emit('update:visible', false)
+    },
+    handleConfirm() {
+      this.$refs.elForm.validate(valid => {
+        if (!valid) return
+        this.$emit('confirm', { ...this.formData })
+        this.close()
+      })
+    }
+  }
+}
+</script>

src/views/tool/build/DraggableItem.vue

@@ -0,0 +1,100 @@
+<script>
+import draggable from 'vuedraggable'
+import render from '@/utils/generator/render'
+
+const components = {
+  itemBtns(h, element, index, parent) {
+    const { copyItem, deleteItem } = this.$listeners
+    return [
+      <span class="drawing-item-copy" title="复制" onClick={event => {
+        copyItem(element, parent); event.stopPropagation()
+      }}>
+        <i class="el-icon-copy-document" />
+      </span>,
+      <span class="drawing-item-delete" title="删除" onClick={event => {
+        deleteItem(index, parent); event.stopPropagation()
+      }}>
+        <i class="el-icon-delete" />
+      </span>
+    ]
+  }
+}
+const layouts = {
+  colFormItem(h, element, index, parent) {
+    const { activeItem } = this.$listeners
+    let className = this.activeId === element.formId ? 'drawing-item active-from-item' : 'drawing-item'
+    if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered'
+    return (
+      <el-col span={element.span} class={className}
+        nativeOnClick={event => { activeItem(element); event.stopPropagation() }}>
+        <el-form-item label-width={element.labelWidth ? `${element.labelWidth}px` : null}
+          label={element.label} required={element.required}>
+          <render key={element.renderKey} conf={element} onInput={ event => {
+            this.$set(element, 'defaultValue', event)
+          }} />
+        </el-form-item>
+        {components.itemBtns.apply(this, arguments)}
+      </el-col>
+    )
+  },
+  rowFormItem(h, element, index, parent) {
+    const { activeItem } = this.$listeners
+    const className = this.activeId === element.formId ? 'drawing-row-item active-from-item' : 'drawing-row-item'
+    let child = renderChildren.apply(this, arguments)
+    if (element.type === 'flex') {
+      child = <el-row type={element.type} justify={element.justify} align={element.align}>
+              {child}
+            </el-row>
+    }
+    return (
+      <el-col span={element.span}>
+        <el-row gutter={element.gutter} class={className}
+          nativeOnClick={event => { activeItem(element); event.stopPropagation() }}>
+          <span class="component-name">{element.componentName}</span>
+          <draggable list={element.children} animation={340} group="componentsGroup" class="drag-wrapper">
+            {child}
+          </draggable>
+          {components.itemBtns.apply(this, arguments)}
+        </el-row>
+      </el-col>
+    )
+  }
+}
+
+function renderChildren(h, element, index, parent) {
+  if (!Array.isArray(element.children)) return null
+  return element.children.map((el, i) => {
+    const layout = layouts[el.layout]
+    if (layout) {
+      return layout.call(this, h, el, i, element.children)
+    }
+    return layoutIsNotFound()
+  })
+}
+
+function layoutIsNotFound() {
+  throw new Error(`没有与${this.element.layout}匹配的layout`)
+}
+
+export default {
+  components: {
+    render,
+    draggable
+  },
+  props: [
+    'element',
+    'index',
+    'drawingList',
+    'activeId',
+    'formConf'
+  ],
+  render(h) {
+    const layout = layouts[this.element.layout]
+
+    if (layout) {
+      return layout.call(this, h, this.element, this.index, this.drawingList)
+    }
+    return layoutIsNotFound()
+  }
+}
+</script>

src/views/tool/build/IconsDialog.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="icon-dialog">
+    <el-dialog
+      v-bind="$attrs"
+      width="980px"
+      :modal-append-to-body="false"
+      v-on="$listeners"
+      @open="onOpen"
+      @close="onClose"
+    >
+      <div slot="title">
+        选择图标
+        <el-input
+          v-model="key"
+          size="mini"
+          :style="{width: '260px'}"
+          placeholder="请输入图标名称"
+          prefix-icon="el-icon-search"
+          clearable
+        />
+      </div>
+      <ul class="icon-ul">
+        <li
+          v-for="icon in iconList"
+          :key="icon"
+          :class="active===icon?'active-item':''"
+          @click="onSelect(icon)"
+        >
+          <i :class="icon" />
+          <div>{{ icon }}</div>
+        </li>
+      </ul>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import iconList from '@/utils/generator/icon.json'
+
+const originList = iconList.map(name => `el-icon-${name}`)
+
+export default {
+  inheritAttrs: false,
+  props: ['current'],
+  data() {
+    return {
+      iconList: originList,
+      active: null,
+      key: ''
+    }
+  },
+  watch: {
+    key(val) {
+      if (val) {
+        this.iconList = originList.filter(name => name.indexOf(val) > -1)
+      } else {
+        this.iconList = originList
+      }
+    }
+  },
+  methods: {
+    onOpen() {
+      this.active = this.current
+      this.key = ''
+    },
+    onClose() {},
+    onSelect(icon) {
+      this.active = icon
+      this.$emit('select', icon)
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.icon-ul {
+  margin: 0;
+  padding: 0;
+  font-size: 0;
+  li {
+    list-style-type: none;
+    text-align: center;
+    font-size: 14px;
+    display: inline-block;
+    width: 16.66%;
+    box-sizing: border-box;
+    height: 108px;
+    padding: 15px 6px 6px 6px;
+    cursor: pointer;
+    overflow: hidden;
+    &:hover {
+      background: #f2f2f2;
+    }
+    &.active-item{
+      background: #e1f3fb;
+      color: #7a6df0
+    }
+    > i {
+      font-size: 30px;
+      line-height: 50px;
+    }
+  }
+}
+.icon-dialog {
+  ::v-deep .el-dialog {
+    border-radius: 8px;
+    margin-bottom: 0;
+    margin-top: 4vh !important;
+    display: flex;
+    flex-direction: column;
+    max-height: 92vh;
+    overflow: hidden;
+    box-sizing: border-box;
+    .el-dialog__header {
+      padding-top: 14px;
+    }
+    .el-dialog__body {
+      margin: 0 20px 20px 20px;
+      padding: 0;
+      overflow: auto;
+    }
+  }
+}
+</style>

src/views/tool/build/RightPanel.vue

@@ -0,0 +1,946 @@
+<template>
+  <div class="right-board">
+    <el-tabs v-model="currentTab" class="center-tabs">
+      <el-tab-pane label="组件属性" name="field" />
+      <el-tab-pane label="表单属性" name="form" />
+    </el-tabs>
+    <div class="field-box">
+      <a class="document-link" target="_blank" :href="documentLink" title="查看组件文档">
+        <i class="el-icon-link" />
+      </a>
+      <el-scrollbar class="right-scrollbar">
+        <!-- 组件属性 -->
+        <el-form v-show="currentTab==='field' && showField" size="small" label-width="90px">
+          <el-form-item v-if="activeData.changeTag" label="组件类型">
+            <el-select
+              v-model="activeData.tagIcon"
+              placeholder="请选择组件类型"
+              :style="{width: '100%'}"
+              @change="tagChange"
+            >
+              <el-option-group v-for="group in tagList" :key="group.label" :label="group.label">
+                <el-option
+                  v-for="item in group.options"
+                  :key="item.label"
+                  :label="item.label"
+                  :value="item.tagIcon"
+                >
+                  <svg-icon class="node-icon" :icon-class="item.tagIcon" />
+                  <span> {{ item.label }}</span>
+                </el-option>
+              </el-option-group>
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="activeData.vModel!==undefined" label="字段名">
+            <el-input v-model="activeData.vModel" placeholder="请输入字段名（v-model）" />
+          </el-form-item>
+          <el-form-item v-if="activeData.componentName!==undefined" label="组件名">
+            {{ activeData.componentName }}
+          </el-form-item>
+          <el-form-item v-if="activeData.label!==undefined" label="标题">
+            <el-input v-model="activeData.label" placeholder="请输入标题" />
+          </el-form-item>
+          <el-form-item v-if="activeData.placeholder!==undefined" label="占位提示">
+            <el-input v-model="activeData.placeholder" placeholder="请输入占位提示" />
+          </el-form-item>
+          <el-form-item v-if="activeData['start-placeholder']!==undefined" label="开始占位">
+            <el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示" />
+          </el-form-item>
+          <el-form-item v-if="activeData['end-placeholder']!==undefined" label="结束占位">
+            <el-input v-model="activeData['end-placeholder']" placeholder="请输入占位提示" />
+          </el-form-item>
+          <el-form-item v-if="activeData.span!==undefined" label="表单栅格">
+            <el-slider v-model="activeData.span" :max="24" :min="1" :marks="{12:''}" @change="spanChange" />
+          </el-form-item>
+          <el-form-item v-if="activeData.layout==='rowFormItem'" label="栅格间隔">
+            <el-input-number v-model="activeData.gutter" :min="0" placeholder="栅格间隔" />
+          </el-form-item>
+          <el-form-item v-if="activeData.layout==='rowFormItem'" label="布局模式">
+            <el-radio-group v-model="activeData.type">
+              <el-radio-button label="default" />
+              <el-radio-button label="flex" />
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="activeData.justify!==undefined&&activeData.type==='flex'" label="水平排列">
+            <el-select v-model="activeData.justify" placeholder="请选择水平排列" :style="{width: '100%'}">
+              <el-option
+                v-for="(item, index) in justifyOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="activeData.align!==undefined&&activeData.type==='flex'" label="垂直排列">
+            <el-radio-group v-model="activeData.align">
+              <el-radio-button label="top" />
+              <el-radio-button label="middle" />
+              <el-radio-button label="bottom" />
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="activeData.labelWidth!==undefined" label="标签宽度">
+            <el-input v-model.number="activeData.labelWidth" type="number" placeholder="请输入标签宽度" />
+          </el-form-item>
+          <el-form-item v-if="activeData.style&&activeData.style.width!==undefined" label="组件宽度">
+            <el-input v-model="activeData.style.width" placeholder="请输入组件宽度" clearable />
+          </el-form-item>
+          <el-form-item v-if="activeData.vModel!==undefined" label="默认值">
+            <el-input
+              :value="setDefaultValue(activeData.defaultValue)"
+              placeholder="请输入默认值"
+              @input="onDefaultValueInput"
+            />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag==='el-checkbox-group'" label="至少应选">
+            <el-input-number
+              :value="activeData.min"
+              :min="0"
+              placeholder="至少应选"
+              @input="$set(activeData, 'min', $event?$event:undefined)"
+            />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag==='el-checkbox-group'" label="最多可选">
+            <el-input-number
+              :value="activeData.max"
+              :min="0"
+              placeholder="最多可选"
+              @input="$set(activeData, 'max', $event?$event:undefined)"
+            />
+          </el-form-item>
+          <el-form-item v-if="activeData.prepend!==undefined" label="前缀">
+            <el-input v-model="activeData.prepend" placeholder="请输入前缀" />
+          </el-form-item>
+          <el-form-item v-if="activeData.append!==undefined" label="后缀">
+            <el-input v-model="activeData.append" placeholder="请输入后缀" />
+          </el-form-item>
+          <el-form-item v-if="activeData['prefix-icon']!==undefined" label="前图标">
+            <el-input v-model="activeData['prefix-icon']" placeholder="请输入前图标名称">
+              <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('prefix-icon')">
+                选择
+              </el-button>
+            </el-input>
+          </el-form-item>
+          <el-form-item v-if="activeData['suffix-icon'] !== undefined" label="后图标">
+            <el-input v-model="activeData['suffix-icon']" placeholder="请输入后图标名称">
+              <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('suffix-icon')">
+                选择
+              </el-button>
+            </el-input>
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-cascader'" label="选项分隔符">
+            <el-input v-model="activeData.separator" placeholder="请输入选项分隔符" />
+          </el-form-item>
+          <el-form-item v-if="activeData.autosize !== undefined" label="最小行数">
+            <el-input-number v-model="activeData.autosize.minRows" :min="1" placeholder="最小行数" />
+          </el-form-item>
+          <el-form-item v-if="activeData.autosize !== undefined" label="最大行数">
+            <el-input-number v-model="activeData.autosize.maxRows" :min="1" placeholder="最大行数" />
+          </el-form-item>
+          <el-form-item v-if="activeData.min !== undefined" label="最小值">
+            <el-input-number v-model="activeData.min" placeholder="最小值" />
+          </el-form-item>
+          <el-form-item v-if="activeData.max !== undefined" label="最大值">
+            <el-input-number v-model="activeData.max" placeholder="最大值" />
+          </el-form-item>
+          <el-form-item v-if="activeData.step !== undefined" label="步长">
+            <el-input-number v-model="activeData.step" placeholder="步数" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-input-number'" label="精度">
+            <el-input-number v-model="activeData.precision" :min="0" placeholder="精度" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-input-number'" label="按钮位置">
+            <el-radio-group v-model="activeData['controls-position']">
+              <el-radio-button label="">
+                默认
+              </el-radio-button>
+              <el-radio-button label="right">
+                右侧
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="activeData.maxlength !== undefined" label="最多输入">
+            <el-input v-model="activeData.maxlength" placeholder="请输入字符长度">
+              <template slot="append">
+                个字符
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item v-if="activeData['active-text'] !== undefined" label="开启提示">
+            <el-input v-model="activeData['active-text']" placeholder="请输入开启提示" />
+          </el-form-item>
+          <el-form-item v-if="activeData['inactive-text'] !== undefined" label="关闭提示">
+            <el-input v-model="activeData['inactive-text']" placeholder="请输入关闭提示" />
+          </el-form-item>
+          <el-form-item v-if="activeData['active-value'] !== undefined" label="开启值">
+            <el-input
+              :value="setDefaultValue(activeData['active-value'])"
+              placeholder="请输入开启值"
+              @input="onSwitchValueInput($event, 'active-value')"
+            />
+          </el-form-item>
+          <el-form-item v-if="activeData['inactive-value'] !== undefined" label="关闭值">
+            <el-input
+              :value="setDefaultValue(activeData['inactive-value'])"
+              placeholder="请输入关闭值"
+              @input="onSwitchValueInput($event, 'inactive-value')"
+            />
+          </el-form-item>
+          <el-form-item
+            v-if="activeData.type !== undefined && 'el-date-picker' === activeData.tag"
+            label="时间类型"
+          >
+            <el-select
+              v-model="activeData.type"
+              placeholder="请选择时间类型"
+              :style="{ width: '100%' }"
+              @change="dateTypeChange"
+            >
+              <el-option
+                v-for="(item, index) in dateOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="activeData.name !== undefined" label="文件字段名">
+            <el-input v-model="activeData.name" placeholder="请输入上传文件字段名" />
+          </el-form-item>
+          <el-form-item v-if="activeData.accept !== undefined" label="文件类型">
+            <el-select
+              v-model="activeData.accept"
+              placeholder="请选择文件类型"
+              :style="{ width: '100%' }"
+              clearable
+            >
+              <el-option label="图片" value="image/*" />
+              <el-option label="视频" value="video/*" />
+              <el-option label="音频" value="audio/*" />
+              <el-option label="excel" value=".xls,.xlsx" />
+              <el-option label="word" value=".doc,.docx" />
+              <el-option label="pdf" value=".pdf" />
+              <el-option label="txt" value=".txt" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="activeData.fileSize !== undefined" label="文件大小">
+            <el-input v-model.number="activeData.fileSize" placeholder="请输入文件大小">
+              <el-select slot="append" v-model="activeData.sizeUnit" :style="{ width: '66px' }">
+                <el-option label="KB" value="KB" />
+                <el-option label="MB" value="MB" />
+                <el-option label="GB" value="GB" />
+              </el-select>
+            </el-input>
+          </el-form-item>
+          <el-form-item v-if="activeData.action !== undefined" label="上传地址">
+            <el-input v-model="activeData.action" placeholder="请输入上传地址" clearable />
+          </el-form-item>
+          <el-form-item v-if="activeData['list-type'] !== undefined" label="列表类型">
+            <el-radio-group v-model="activeData['list-type']" size="small">
+              <el-radio-button label="text">
+                text
+              </el-radio-button>
+              <el-radio-button label="picture">
+                picture
+              </el-radio-button>
+              <el-radio-button label="picture-card">
+                picture-card
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            v-if="activeData.buttonText !== undefined"
+            v-show="'picture-card' !== activeData['list-type']"
+            label="按钮文字"
+          >
+            <el-input v-model="activeData.buttonText" placeholder="请输入按钮文字" />
+          </el-form-item>
+          <el-form-item v-if="activeData['range-separator'] !== undefined" label="分隔符">
+            <el-input v-model="activeData['range-separator']" placeholder="请输入分隔符" />
+          </el-form-item>
+          <el-form-item v-if="activeData['picker-options'] !== undefined" label="时间段">
+            <el-input
+              v-model="activeData['picker-options'].selectableRange"
+              placeholder="请输入时间段"
+            />
+          </el-form-item>
+          <el-form-item v-if="activeData.format !== undefined" label="时间格式">
+            <el-input
+              :value="activeData.format"
+              placeholder="请输入时间格式"
+              @input="setTimeValue($event)"
+            />
+          </el-form-item>
+          <template v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.tag) > -1">
+            <el-divider>选项</el-divider>
+            <draggable
+              :list="activeData.options"
+              :animation="340"
+              group="selectItem"
+              handle=".option-drag"
+            >
+              <div v-for="(item, index) in activeData.options" :key="index" class="select-item">
+                <div class="select-line-icon option-drag">
+                  <i class="el-icon-s-operation" />
+                </div>
+                <el-input v-model="item.label" placeholder="选项名" size="small" />
+                <el-input
+                  placeholder="选项值"
+                  size="small"
+                  :value="item.value"
+                  @input="setOptionValue(item, $event)"
+                />
+                <div class="close-btn select-line-icon" @click="activeData.options.splice(index, 1)">
+                  <i class="el-icon-remove-outline" />
+                </div>
+              </div>
+            </draggable>
+            <div style="margin-left: 20px;">
+              <el-button
+                style="padding-bottom: 0"
+                icon="el-icon-circle-plus-outline"
+                type="text"
+                @click="addSelectItem"
+              >
+                添加选项
+              </el-button>
+            </div>
+            <el-divider />
+          </template>
+
+          <template v-if="['el-cascader'].indexOf(activeData.tag) > -1">
+            <el-divider>选项</el-divider>
+            <el-form-item label="数据类型">
+              <el-radio-group v-model="activeData.dataType" size="small">
+                <el-radio-button label="dynamic">
+                  动态数据
+                </el-radio-button>
+                <el-radio-button label="static">
+                  静态数据
+                </el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+
+            <template v-if="activeData.dataType === 'dynamic'">
+              <el-form-item label="标签键名">
+                <el-input v-model="activeData.labelKey" placeholder="请输入标签键名" />
+              </el-form-item>
+              <el-form-item label="值键名">
+                <el-input v-model="activeData.valueKey" placeholder="请输入值键名" />
+              </el-form-item>
+              <el-form-item label="子级键名">
+                <el-input v-model="activeData.childrenKey" placeholder="请输入子级键名" />
+              </el-form-item>
+            </template>
+
+            <el-tree
+              v-if="activeData.dataType === 'static'"
+              draggable
+              :data="activeData.options"
+              node-key="id"
+              :expand-on-click-node="false"
+              :render-content="renderContent"
+            />
+            <div v-if="activeData.dataType === 'static'" style="margin-left: 20px">
+              <el-button
+                style="padding-bottom: 0"
+                icon="el-icon-circle-plus-outline"
+                type="text"
+                @click="addTreeItem"
+              >
+                添加父级
+              </el-button>
+            </div>
+            <el-divider />
+          </template>
+
+          <el-form-item v-if="activeData.optionType !== undefined" label="选项样式">
+            <el-radio-group v-model="activeData.optionType">
+              <el-radio-button label="default">
+                默认
+              </el-radio-button>
+              <el-radio-button label="button">
+                按钮
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="activeData['active-color'] !== undefined" label="开启颜色">
+            <el-color-picker v-model="activeData['active-color']" />
+          </el-form-item>
+          <el-form-item v-if="activeData['inactive-color'] !== undefined" label="关闭颜色">
+            <el-color-picker v-model="activeData['inactive-color']" />
+          </el-form-item>
+
+          <el-form-item v-if="activeData['allow-half'] !== undefined" label="允许半选">
+            <el-switch v-model="activeData['allow-half']" />
+          </el-form-item>
+          <el-form-item v-if="activeData['show-text'] !== undefined" label="辅助文字">
+            <el-switch v-model="activeData['show-text']" @change="rateTextChange" />
+          </el-form-item>
+          <el-form-item v-if="activeData['show-score'] !== undefined" label="显示分数">
+            <el-switch v-model="activeData['show-score']" @change="rateScoreChange" />
+          </el-form-item>
+          <el-form-item v-if="activeData['show-stops'] !== undefined" label="显示间断点">
+            <el-switch v-model="activeData['show-stops']" />
+          </el-form-item>
+          <el-form-item v-if="activeData.range !== undefined" label="范围选择">
+            <el-switch v-model="activeData.range" @change="rangeChange" />
+          </el-form-item>
+          <el-form-item
+            v-if="activeData.border !== undefined && activeData.optionType === 'default'"
+            label="是否带边框"
+          >
+            <el-switch v-model="activeData.border" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-color-picker'" label="颜色格式">
+            <el-select
+              v-model="activeData['color-format']"
+              placeholder="请选择颜色格式"
+              :style="{ width: '100%' }"
+              @change="colorFormatChange"
+            >
+              <el-option
+                v-for="(item, index) in colorFormatOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="activeData.size !== undefined &&
+              (activeData.optionType === 'button' ||
+                activeData.border ||
+                activeData.tag === 'el-color-picker')"
+            label="选项尺寸"
+          >
+            <el-radio-group v-model="activeData.size">
+              <el-radio-button label="medium">
+                中等
+              </el-radio-button>
+              <el-radio-button label="small">
+                较小
+              </el-radio-button>
+              <el-radio-button label="mini">
+                迷你
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="activeData['show-word-limit'] !== undefined" label="输入统计">
+            <el-switch v-model="activeData['show-word-limit']" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-input-number'" label="严格步数">
+            <el-switch v-model="activeData['step-strictly']" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-cascader'" label="是否多选">
+            <el-switch v-model="activeData.props.props.multiple" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-cascader'" label="展示全路径">
+            <el-switch v-model="activeData['show-all-levels']" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-cascader'" label="可否筛选">
+            <el-switch v-model="activeData.filterable" />
+          </el-form-item>
+          <el-form-item v-if="activeData.clearable !== undefined" label="能否清空">
+            <el-switch v-model="activeData.clearable" />
+          </el-form-item>
+          <el-form-item v-if="activeData.showTip !== undefined" label="显示提示">
+            <el-switch v-model="activeData.showTip" />
+          </el-form-item>
+          <el-form-item v-if="activeData.multiple !== undefined" label="多选文件">
+            <el-switch v-model="activeData.multiple" />
+          </el-form-item>
+          <el-form-item v-if="activeData['auto-upload'] !== undefined" label="自动上传">
+            <el-switch v-model="activeData['auto-upload']" />
+          </el-form-item>
+          <el-form-item v-if="activeData.readonly !== undefined" label="是否只读">
+            <el-switch v-model="activeData.readonly" />
+          </el-form-item>
+          <el-form-item v-if="activeData.disabled !== undefined" label="是否禁用">
+            <el-switch v-model="activeData.disabled" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-select'" label="是否可搜索">
+            <el-switch v-model="activeData.filterable" />
+          </el-form-item>
+          <el-form-item v-if="activeData.tag === 'el-select'" label="是否多选">
+            <el-switch v-model="activeData.multiple" @change="multipleChange" />
+          </el-form-item>
+          <el-form-item v-if="activeData.required !== undefined" label="是否必填">
+            <el-switch v-model="activeData.required" />
+          </el-form-item>
+
+          <template v-if="activeData.layoutTree">
+            <el-divider>布局结构树</el-divider>
+            <el-tree
+              :data="[activeData]"
+              :props="layoutTreeProps"
+              node-key="renderKey"
+              default-expand-all
+              draggable
+            >
+              <span slot-scope="{ node, data }">
+                <span class="node-label">
+                  <svg-icon class="node-icon" :icon-class="data.tagIcon" />
+                  {{ node.label }}
+                </span>
+              </span>
+            </el-tree>
+          </template>
+
+          <template v-if="activeData.layout === 'colFormItem' && activeData.tag !== 'el-button'">
+            <el-divider>正则校验</el-divider>
+            <div
+              v-for="(item, index) in activeData.regList"
+              :key="index"
+              class="reg-item"
+            >
+              <span class="close-btn" @click="activeData.regList.splice(index, 1)">
+                <i class="el-icon-close" />
+              </span>
+              <el-form-item label="表达式">
+                <el-input v-model="item.pattern" placeholder="请输入正则" />
+              </el-form-item>
+              <el-form-item label="错误提示" style="margin-bottom:0">
+                <el-input v-model="item.message" placeholder="请输入错误提示" />
+              </el-form-item>
+            </div>
+            <div style="margin-left: 20px">
+              <el-button icon="el-icon-circle-plus-outline" type="text" @click="addReg">
+                添加规则
+              </el-button>
+            </div>
+          </template>
+        </el-form>
+        <!-- 表单属性 -->
+        <el-form v-show="currentTab === 'form'" size="small" label-width="90px">
+          <el-form-item label="表单名">
+            <el-input v-model="formConf.formRef" placeholder="请输入表单名（ref）" />
+          </el-form-item>
+          <el-form-item label="表单模型">
+            <el-input v-model="formConf.formModel" placeholder="请输入数据模型" />
+          </el-form-item>
+          <el-form-item label="校验模型">
+            <el-input v-model="formConf.formRules" placeholder="请输入校验模型" />
+          </el-form-item>
+          <el-form-item label="表单尺寸">
+            <el-radio-group v-model="formConf.size">
+              <el-radio-button label="medium">
+                中等
+              </el-radio-button>
+              <el-radio-button label="small">
+                较小
+              </el-radio-button>
+              <el-radio-button label="mini">
+                迷你
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="标签对齐">
+            <el-radio-group v-model="formConf.labelPosition">
+              <el-radio-button label="left">
+                左对齐
+              </el-radio-button>
+              <el-radio-button label="right">
+                右对齐
+              </el-radio-button>
+              <el-radio-button label="top">
+                顶部对齐
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="标签宽度">
+            <el-input-number v-model="formConf.labelWidth" placeholder="标签宽度" />
+          </el-form-item>
+          <el-form-item label="栅格间隔">
+            <el-input-number v-model="formConf.gutter" :min="0" placeholder="栅格间隔" />
+          </el-form-item>
+          <el-form-item label="禁用表单">
+            <el-switch v-model="formConf.disabled" />
+          </el-form-item>
+          <el-form-item label="表单按钮">
+            <el-switch v-model="formConf.formBtns" />
+          </el-form-item>
+          <el-form-item label="显示未选中组件边框">
+            <el-switch v-model="formConf.unFocusedComponentBorder" />
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
+    </div>
+
+    <treeNode-dialog :visible.sync="dialogVisible" title="添加选项" @commit="addNode" />
+    <icons-dialog :visible.sync="iconsVisible" :current="activeData[currentIconModel]" @select="setIcon" />
+  </div>
+</template>
+
+<script>
+import { isArray } from 'util'
+import draggable from 'vuedraggable'
+import TreeNodeDialog from './TreeNodeDialog'
+import { isNumberStr } from '@/utils/index'
+import IconsDialog from './IconsDialog'
+import {
+  inputComponents,
+  selectComponents,
+  layoutComponents
+} from '@/utils/generator/config'
+
+const dateTimeFormat = {
+  date: 'yyyy-MM-dd',
+  week: 'yyyy 第 WW 周',
+  month: 'yyyy-MM',
+  year: 'yyyy',
+  datetime: 'yyyy-MM-dd HH:mm:ss',
+  daterange: 'yyyy-MM-dd',
+  monthrange: 'yyyy-MM',
+  datetimerange: 'yyyy-MM-dd HH:mm:ss'
+}
+
+export default {
+  components: {
+    draggable,
+    TreeNodeDialog,
+    IconsDialog
+  },
+  props: ['showField', 'activeData', 'formConf'],
+  data() {
+    return {
+      currentTab: 'field',
+      currentNode: null,
+      dialogVisible: false,
+      iconsVisible: false,
+      currentIconModel: null,
+      dateTypeOptions: [
+        {
+          label: '日(date)',
+          value: 'date'
+        },
+        {
+          label: '周(week)',
+          value: 'week'
+        },
+        {
+          label: '月(month)',
+          value: 'month'
+        },
+        {
+          label: '年(year)',
+          value: 'year'
+        },
+        {
+          label: '日期时间(datetime)',
+          value: 'datetime'
+        }
+      ],
+      dateRangeTypeOptions: [
+        {
+          label: '日期范围(daterange)',
+          value: 'daterange'
+        },
+        {
+          label: '月范围(monthrange)',
+          value: 'monthrange'
+        },
+        {
+          label: '日期时间范围(datetimerange)',
+          value: 'datetimerange'
+        }
+      ],
+      colorFormatOptions: [
+        {
+          label: 'hex',
+          value: 'hex'
+        },
+        {
+          label: 'rgb',
+          value: 'rgb'
+        },
+        {
+          label: 'rgba',
+          value: 'rgba'
+        },
+        {
+          label: 'hsv',
+          value: 'hsv'
+        },
+        {
+          label: 'hsl',
+          value: 'hsl'
+        }
+      ],
+      justifyOptions: [
+        {
+          label: 'start',
+          value: 'start'
+        },
+        {
+          label: 'end',
+          value: 'end'
+        },
+        {
+          label: 'center',
+          value: 'center'
+        },
+        {
+          label: 'space-around',
+          value: 'space-around'
+        },
+        {
+          label: 'space-between',
+          value: 'space-between'
+        }
+      ],
+      layoutTreeProps: {
+        label(data, node) {
+          return data.componentName || `${data.label}: ${data.vModel}`
+        }
+      }
+    }
+  },
+  computed: {
+    documentLink() {
+      return (
+        this.activeData.document
+        || 'https://element.eleme.cn/#/zh-CN/component/installation'
+      )
+    },
+    dateOptions() {
+      if (
+        this.activeData.type !== undefined
+        && this.activeData.tag === 'el-date-picker'
+      ) {
+        if (this.activeData['start-placeholder'] === undefined) {
+          return this.dateTypeOptions
+        }
+        return this.dateRangeTypeOptions
+      }
+      return []
+    },
+    tagList() {
+      return [
+        {
+          label: '输入型组件',
+          options: inputComponents
+        },
+        {
+          label: '选择型组件',
+          options: selectComponents
+        }
+      ]
+    }
+  },
+  methods: {
+    addReg() {
+      this.activeData.regList.push({
+        pattern: '',
+        message: ''
+      })
+    },
+    addSelectItem() {
+      this.activeData.options.push({
+        label: '',
+        value: ''
+      })
+    },
+    addTreeItem() {
+      ++this.idGlobal
+      this.dialogVisible = true
+      this.currentNode = this.activeData.options
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <div class="custom-tree-node">
+          <span>{node.label}</span>
+          <span class="node-operation">
+            <i on-click={() => this.append(data)}
+              class="el-icon-plus"
+              title="添加"
+            ></i>
+            <i on-click={() => this.remove(node, data)}
+              class="el-icon-delete"
+              title="删除"
+            ></i>
+          </span>
+        </div>
+      )
+    },
+    append(data) {
+      if (!data.children) {
+        this.$set(data, 'children', [])
+      }
+      this.dialogVisible = true
+      this.currentNode = data.children
+    },
+    remove(node, data) {
+      const { parent } = node
+      const children = parent.data.children || parent.data
+      const index = children.findIndex(d => d.id === data.id)
+      children.splice(index, 1)
+    },
+    addNode(data) {
+      this.currentNode.push(data)
+    },
+    setOptionValue(item, val) {
+      item.value = isNumberStr(val) ? +val : val
+    },
+    setDefaultValue(val) {
+      if (Array.isArray(val)) {
+        return val.join(',')
+      }
+      if (['string', 'number'].indexOf(val) > -1) {
+        return val
+      }
+      if (typeof val === 'boolean') {
+        return `${val}`
+      }
+      return val
+    },
+    onDefaultValueInput(str) {
+      if (isArray(this.activeData.defaultValue)) {
+        // 数组
+        this.$set(
+          this.activeData,
+          'defaultValue',
+          str.split(',').map(val => (isNumberStr(val) ? +val : val))
+        )
+      } else if (['true', 'false'].indexOf(str) > -1) {
+        // 布尔
+        this.$set(this.activeData, 'defaultValue', JSON.parse(str))
+      } else {
+        // 字符串和数字
+        this.$set(
+          this.activeData,
+          'defaultValue',
+          isNumberStr(str) ? +str : str
+        )
+      }
+    },
+    onSwitchValueInput(val, name) {
+      if (['true', 'false'].indexOf(val) > -1) {
+        this.$set(this.activeData, name, JSON.parse(val))
+      } else {
+        this.$set(this.activeData, name, isNumberStr(val) ? +val : val)
+      }
+    },
+    setTimeValue(val, type) {
+      const valueFormat = type === 'week' ? dateTimeFormat.date : val
+      this.$set(this.activeData, 'defaultValue', null)
+      this.$set(this.activeData, 'value-format', valueFormat)
+      this.$set(this.activeData, 'format', val)
+    },
+    spanChange(val) {
+      this.formConf.span = val
+    },
+    multipleChange(val) {
+      this.$set(this.activeData, 'defaultValue', val ? [] : '')
+    },
+    dateTypeChange(val) {
+      this.setTimeValue(dateTimeFormat[val], val)
+    },
+    rangeChange(val) {
+      this.$set(
+        this.activeData,
+        'defaultValue',
+        val ? [this.activeData.min, this.activeData.max] : this.activeData.min
+      )
+    },
+    rateTextChange(val) {
+      if (val) this.activeData['show-score'] = false
+    },
+    rateScoreChange(val) {
+      if (val) this.activeData['show-text'] = false
+    },
+    colorFormatChange(val) {
+      this.activeData.defaultValue = null
+      this.activeData['show-alpha'] = val.indexOf('a') > -1
+      this.activeData.renderKey = +new Date() // 更新renderKey,重新渲染该组件
+    },
+    openIconsDialog(model) {
+      this.iconsVisible = true
+      this.currentIconModel = model
+    },
+    setIcon(val) {
+      this.activeData[this.currentIconModel] = val
+    },
+    tagChange(tagIcon) {
+      let target = inputComponents.find(item => item.tagIcon === tagIcon)
+      if (!target) target = selectComponents.find(item => item.tagIcon === tagIcon)
+      this.$emit('tag-change', target)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right-board {
+  width: 350px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding-top: 3px;
+  .field-box {
+    position: relative;
+    height: calc(100vh - 42px);
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+  .el-scrollbar {
+    height: 100%;
+  }
+}
+.select-item {
+  display: flex;
+  border: 1px dashed #fff;
+  box-sizing: border-box;
+  & .close-btn {
+    cursor: pointer;
+    color: #f56c6c;
+  }
+  & .el-input + .el-input {
+    margin-left: 4px;
+  }
+}
+.select-item + .select-item {
+  margin-top: 4px;
+}
+.select-item.sortable-chosen {
+  border: 1px dashed #409eff;
+}
+.select-line-icon {
+  line-height: 32px;
+  font-size: 22px;
+  padding: 0 4px;
+  color: #777;
+}
+.option-drag {
+  cursor: move;
+}
+.time-range {
+  .el-date-editor {
+    width: 227px;
+  }
+  ::v-deep .el-icon-time {
+    display: none;
+  }
+}
+.document-link {
+  position: absolute;
+  display: block;
+  width: 26px;
+  height: 26px;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  background: #409eff;
+  z-index: 1;
+  border-radius: 0 0 6px 0;
+  text-align: center;
+  line-height: 26px;
+  color: #fff;
+  font-size: 18px;
+}
+.node-label{
+  font-size: 14px;
+}
+.node-icon{
+  color: #bebfc3;
+}
+</style>

src/views/tool/build/TreeNodeDialog.vue

@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <el-dialog
+      v-bind="$attrs"
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+      v-on="$listeners"
+      @open="onOpen"
+      @close="onClose"
+    >
+      <el-row :gutter="0">
+        <el-form
+          ref="elForm"
+          :model="formData"
+          :rules="rules"
+          size="small"
+          label-width="100px"
+        >
+          <el-col :span="24">
+            <el-form-item
+              label="选项名"
+              prop="label"
+            >
+              <el-input
+                v-model="formData.label"
+                placeholder="请输入选项名"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item
+              label="选项值"
+              prop="value"
+            >
+              <el-input
+                v-model="formData.value"
+                placeholder="请输入选项值"
+                clearable
+              >
+                <el-select
+                  slot="append"
+                  v-model="dataType"
+                  :style="{width: '100px'}"
+                >
+                  <el-option
+                    v-for="(item, index) in dataTypeOptions"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                    :disabled="item.disabled"
+                  />
+                </el-select>
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+      <div slot="footer">
+        <el-button
+          type="primary"
+          @click="handleConfirm"
+        >
+          确定
+        </el-button>
+        <el-button @click="close">
+          取消
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { isNumberStr } from '@/utils/index'
+
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      id: 100,
+      formData: {
+        label: undefined,
+        value: undefined
+      },
+      rules: {
+        label: [
+          {
+            required: true,
+            message: '请输入选项名',
+            trigger: 'blur'
+          }
+        ],
+        value: [
+          {
+            required: true,
+            message: '请输入选项值',
+            trigger: 'blur'
+          }
+        ]
+      },
+      dataType: 'string',
+      dataTypeOptions: [
+        {
+          label: '字符串',
+          value: 'string'
+        },
+        {
+          label: '数字',
+          value: 'number'
+        }
+      ]
+    }
+  },
+  computed: {},
+  watch: {
+    'formData.value': function (val) {
+      this.dataType = isNumberStr(val) ? 'number' : 'string'
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData = {
+        label: undefined,
+        value: undefined
+      }
+    },
+    onClose() {},
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handleConfirm() {
+      this.$refs.elForm.validate(valid => {
+        if (!valid) return
+        if (this.dataType === 'number') {
+          this.formData.value = parseFloat(this.formData.value)
+        }
+        this.formData.id = this.id++
+        this.$emit('commit', this.formData)
+        this.close()
+      })
+    }
+  }
+}
+</script>

src/views/tool/build/index.vue

@@ -0,0 +1,767 @@
+<template>
+  <div class="container">
+    <div class="left-board">
+      <div class="logo-wrapper">
+        <div class="logo">
+          <img :src="logo" alt="logo"> Form Generator
+        </div>
+      </div>
+      <el-scrollbar class="left-scrollbar">
+        <div class="components-list">
+          <div class="components-title">
+            <svg-icon icon-class="component" />输入型组件
+          </div>
+          <draggable
+            class="components-draggable"
+            :list="inputComponents"
+            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
+            :clone="cloneComponent"
+            draggable=".components-item"
+            :sort="false"
+            @end="onEnd"
+          >
+            <div
+              v-for="(element, index) in inputComponents" :key="index" class="components-item"
+              @click="addComponent(element)"
+            >
+              <div class="components-body">
+                <svg-icon :icon-class="element.tagIcon" />
+                {{ element.label }}
+              </div>
+            </div>
+          </draggable>
+          <div class="components-title">
+            <svg-icon icon-class="component" />选择型组件
+          </div>
+          <draggable
+            class="components-draggable"
+            :list="selectComponents"
+            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
+            :clone="cloneComponent"
+            draggable=".components-item"
+            :sort="false"
+            @end="onEnd"
+          >
+            <div
+              v-for="(element, index) in selectComponents"
+              :key="index"
+              class="components-item"
+              @click="addComponent(element)"
+            >
+              <div class="components-body">
+                <svg-icon :icon-class="element.tagIcon" />
+                {{ element.label }}
+              </div>
+            </div>
+          </draggable>
+          <div class="components-title">
+            <svg-icon icon-class="component" /> 布局型组件
+          </div>
+          <draggable
+            class="components-draggable" :list="layoutComponents"
+            :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
+            draggable=".components-item" :sort="false" @end="onEnd"
+          >
+            <div
+              v-for="(element, index) in layoutComponents" :key="index" class="components-item"
+              @click="addComponent(element)"
+            >
+              <div class="components-body">
+                <svg-icon :icon-class="element.tagIcon" />
+                {{ element.label }}
+              </div>
+            </div>
+          </draggable>
+        </div>
+      </el-scrollbar>
+    </div>
+
+    <div class="center-board">
+      <div class="action-bar">
+        <el-button icon="el-icon-download" type="text" @click="download">
+          导出vue文件
+        </el-button>
+        <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">
+          复制代码
+        </el-button>
+        <el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">
+          清空
+        </el-button>
+      </div>
+      <el-scrollbar class="center-scrollbar">
+        <el-row class="center-board-row" :gutter="formConf.gutter">
+          <el-form
+            :size="formConf.size"
+            :label-position="formConf.labelPosition"
+            :disabled="formConf.disabled"
+            :label-width="formConf.labelWidth + 'px'"
+          >
+            <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
+              <draggable-item
+                v-for="(element, index) in drawingList"
+                :key="element.renderKey"
+                :drawing-list="drawingList"
+                :element="element"
+                :index="index"
+                :active-id="activeId"
+                :form-conf="formConf"
+                @activeItem="activeFormItem"
+                @copyItem="drawingItemCopy"
+                @deleteItem="drawingItemDelete"
+              />
+            </draggable>
+            <div v-show="!drawingList.length" class="empty-info">
+              从左侧拖入或点选组件进行表单设计
+            </div>
+          </el-form>
+        </el-row>
+      </el-scrollbar>
+    </div>
+
+    <right-panel
+      :active-data="activeData"
+      :form-conf="formConf"
+      :show-field="!!drawingList.length"
+      @tag-change="tagChange"
+    />
+
+    <code-type-dialog
+      :visible.sync="dialogVisible"
+      title="选择生成类型"
+      :show-file-name="showFileName"
+      @confirm="generate"
+    />
+    <input id="copyNode" type="hidden">
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import beautifier from 'js-beautify'
+import ClipboardJS from 'clipboard'
+import render from '@/utils/generator/render'
+import RightPanel from './RightPanel'
+import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config'
+import { beautifierConf, titleCase } from '@/utils/index'
+import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html'
+import { makeUpJs } from '@/utils/generator/js'
+import { makeUpCss } from '@/utils/generator/css'
+import drawingDefault from '@/utils/generator/drawingDefault'
+import logo from '@/assets/logo/logo.png'
+import CodeTypeDialog from './CodeTypeDialog'
+import DraggableItem from './DraggableItem'
+
+let oldActiveId
+let tempActiveData
+
+export default {
+  components: {
+    draggable,
+    render,
+    RightPanel,
+    CodeTypeDialog,
+    DraggableItem
+  },
+  data() {
+    return {
+      logo,
+      idGlobal: 100,
+      formConf,
+      inputComponents,
+      selectComponents,
+      layoutComponents,
+      labelWidth: 100,
+      drawingList: drawingDefault,
+      drawingData: {},
+      activeId: drawingDefault[0].formId,
+      drawerVisible: false,
+      formData: {},
+      dialogVisible: false,
+      generateConf: null,
+      showFileName: false,
+      activeData: drawingDefault[0]
+    }
+  },
+  created() {
+    // 防止 firefox 下 拖拽 会新打卡一个选项卡
+    document.body.ondrop = event => {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+  },
+  watch: {
+    'activeData.label': function (val, oldVal) {
+      if (
+        this.activeData.placeholder === undefined
+        || !this.activeData.tag
+        || oldActiveId !== this.activeId
+      ) {
+        return
+      }
+      this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
+    },
+    activeId: {
+      handler(val) {
+        oldActiveId = val
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    const clipboard = new ClipboardJS('#copyNode', {
+      text: trigger => {
+        const codeStr = this.generateCode()
+        this.$notify({
+          title: '成功',
+          message: '代码已复制到剪切板，可粘贴。',
+          type: 'success'
+        })
+        return codeStr
+      }
+    })
+    clipboard.on('error', e => {
+      this.$message.error('代码复制失败')
+    })
+  },
+  methods: {
+    activeFormItem(element) {
+      this.activeData = element
+      this.activeId = element.formId
+    },
+    onEnd(obj, a) {
+      if (obj.from !== obj.to) {
+        this.activeData = tempActiveData
+        this.activeId = this.idGlobal
+      }
+    },
+    addComponent(item) {
+      const clone = this.cloneComponent(item)
+      this.drawingList.push(clone)
+      this.activeFormItem(clone)
+    },
+    cloneComponent(origin) {
+      const clone = JSON.parse(JSON.stringify(origin))
+      clone.formId = ++this.idGlobal
+      clone.span = formConf.span
+      clone.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件
+      if (!clone.layout) clone.layout = 'colFormItem'
+      if (clone.layout === 'colFormItem') {
+        clone.vModel = `field${this.idGlobal}`
+        clone.placeholder !== undefined && (clone.placeholder += clone.label)
+        tempActiveData = clone
+      } else if (clone.layout === 'rowFormItem') {
+        delete clone.label
+        clone.componentName = `row${this.idGlobal}`
+        clone.gutter = this.formConf.gutter
+        tempActiveData = clone
+      }
+      return tempActiveData
+    },
+    AssembleFormData() {
+      this.formData = {
+        fields: JSON.parse(JSON.stringify(this.drawingList)),
+        ...this.formConf
+      }
+    },
+    generate(data) {
+      const func = this[`exec${titleCase(this.operationType)}`]
+      this.generateConf = data
+      func && func(data)
+    },
+    execRun(data) {
+      this.AssembleFormData()
+      this.drawerVisible = true
+    },
+    execDownload(data) {
+      const codeStr = this.generateCode()
+      const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
+      this.$download.saveAs(blob, data.fileName)
+    },
+    execCopy(data) {
+      document.getElementById('copyNode').click()
+    },
+    empty() {
+      this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
+        () => {
+          this.drawingList = []
+        }
+      )
+    },
+    drawingItemCopy(item, parent) {
+      let clone = JSON.parse(JSON.stringify(item))
+      clone = this.createIdAndKey(clone)
+      parent.push(clone)
+      this.activeFormItem(clone)
+    },
+    createIdAndKey(item) {
+      item.formId = ++this.idGlobal
+      item.renderKey = +new Date()
+      if (item.layout === 'colFormItem') {
+        item.vModel = `field${this.idGlobal}`
+      } else if (item.layout === 'rowFormItem') {
+        item.componentName = `row${this.idGlobal}`
+      }
+      if (Array.isArray(item.children)) {
+        item.children = item.children.map(childItem => this.createIdAndKey(childItem))
+      }
+      return item
+    },
+    drawingItemDelete(index, parent) {
+      parent.splice(index, 1)
+      this.$nextTick(() => {
+        const len = this.drawingList.length
+        if (len) {
+          this.activeFormItem(this.drawingList[len - 1])
+        }
+      })
+    },
+    generateCode() {
+      const { type } = this.generateConf
+      this.AssembleFormData()
+      const script = vueScript(makeUpJs(this.formData, type))
+      const html = vueTemplate(makeUpHtml(this.formData, type))
+      const css = cssStyle(makeUpCss(this.formData))
+      return beautifier.html(html + script + css, beautifierConf.html)
+    },
+    download() {
+      this.dialogVisible = true
+      this.showFileName = true
+      this.operationType = 'download'
+    },
+    run() {
+      this.dialogVisible = true
+      this.showFileName = false
+      this.operationType = 'run'
+    },
+    copy() {
+      this.dialogVisible = true
+      this.showFileName = false
+      this.operationType = 'copy'
+    },
+    tagChange(newTag) {
+      newTag = this.cloneComponent(newTag)
+      newTag.vModel = this.activeData.vModel
+      newTag.formId = this.activeId
+      newTag.span = this.activeData.span
+      delete this.activeData.tag
+      delete this.activeData.tagIcon
+      delete this.activeData.document
+      Object.keys(newTag).forEach(key => {
+        if (this.activeData[key] !== undefined
+          && typeof this.activeData[key] === typeof newTag[key]) {
+          newTag[key] = this.activeData[key]
+        }
+      })
+      this.activeData = newTag
+      this.updateDrawingList(newTag, this.drawingList)
+    },
+    updateDrawingList(newTag, list) {
+      const index = list.findIndex(item => item.formId === this.activeId)
+      if (index > -1) {
+        list.splice(index, 1, newTag)
+      } else {
+        list.forEach(item => {
+          if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children)
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+.editor-tabs{
+  background: #121315;
+  .el-tabs__header{
+    margin: 0;
+    border-bottom-color: #121315;
+    .el-tabs__nav{
+      border-color: #121315;
+    }
+  }
+  .el-tabs__item{
+    height: 32px;
+    line-height: 32px;
+    color: #888a8e;
+    border-left: 1px solid #121315 !important;
+    background: #363636;
+    margin-right: 5px;
+    user-select: none;
+  }
+  .el-tabs__item.is-active{
+    background: #1e1e1e;
+    border-bottom-color: #1e1e1e!important;
+    color: #fff;
+  }
+  .el-icon-edit{
+    color: #f1fa8c;
+  }
+  .el-icon-document{
+    color: #a95812;
+  }
+}
+
+// home
+.right-scrollbar {
+  .el-scrollbar__view {
+    padding: 12px 18px 15px 15px;
+  }
+}
+.left-scrollbar .el-scrollbar__wrap {
+  box-sizing: border-box;
+  overflow-x: hidden !important;
+  margin-bottom: 0 !important;
+}
+.center-tabs{
+  .el-tabs__header{
+    margin-bottom: 0!important;
+  }
+  .el-tabs__item{
+    width: 50%;
+    text-align: center;
+  }
+  .el-tabs__nav{
+    width: 100%;
+  }
+}
+.reg-item{
+  padding: 12px 6px;
+  background: #f8f8f8;
+  position: relative;
+  border-radius: 4px;
+  .close-btn{
+    position: absolute;
+    right: -6px;
+    top: -6px;
+    display: block;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 50%;
+    color: #fff;
+    text-align: center;
+    z-index: 1;
+    cursor: pointer;
+    font-size: 12px;
+    &:hover{
+      background: rgba(210, 23, 23, 0.5)
+    }
+  }
+  & + .reg-item{
+    margin-top: 18px;
+  }
+}
+.action-bar{
+  & .el-button+.el-button {
+    margin-left: 15px;
+  }
+  & i {
+    font-size: 20px;
+    vertical-align: middle;
+    position: relative;
+    top: -1px;
+  }
+}
+
+.custom-tree-node{
+  width: 100%;
+  font-size: 14px;
+  .node-operation{
+    float: right;
+  }
+  i[class*="el-icon"] + i[class*="el-icon"]{
+    margin-left: 6px;
+  }
+  .el-icon-plus{
+    color: #409EFF;
+  }
+  .el-icon-delete{
+    color: #157a0c;
+  }
+}
+
+.left-scrollbar .el-scrollbar__view{
+  overflow-x: hidden;
+}
+
+.el-rate{
+  display: inline-block;
+  vertical-align: text-top;
+}
+.el-upload__tip{
+  line-height: 1.2;
+}
+
+$selectedColor: #f6f7ff;
+$lighterBlue: #409EFF;
+
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.components-list {
+  padding: 8px;
+  box-sizing: border-box;
+  height: 100%;
+  .components-item {
+    display: inline-block;
+    width: 48%;
+    margin: 1%;
+    transition: transform 0ms !important;
+  }
+}
+.components-draggable{
+  padding-bottom: 20px;
+}
+.components-title{
+  font-size: 14px;
+  color: #222;
+  margin: 6px 2px;
+  .svg-icon{
+    color: #666;
+    font-size: 18px;
+  }
+}
+
+.components-body {
+  padding: 8px 10px;
+  background: $selectedColor;
+  font-size: 12px;
+  cursor: move;
+  border: 1px dashed $selectedColor;
+  border-radius: 3px;
+  .svg-icon{
+    color: #777;
+    font-size: 15px;
+  }
+  &:hover {
+    border: 1px dashed #787be8;
+    color: #787be8;
+    .svg-icon {
+      color: #787be8;
+    }
+  }
+}
+
+.left-board {
+  width: 260px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100vh;
+}
+.left-scrollbar{
+  height: calc(100vh - 42px);
+  overflow: hidden;
+}
+.center-scrollbar {
+  height: calc(100vh - 42px);
+  overflow: hidden;
+  border-left: 1px solid #f1e8e8;
+  border-right: 1px solid #f1e8e8;
+  box-sizing: border-box;
+}
+.center-board {
+  height: 100vh;
+  width: auto;
+  margin: 0 350px 0 260px;
+  box-sizing: border-box;
+}
+.empty-info{
+  position: absolute;
+  top: 46%;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: 18px;
+  color: #ccb1ea;
+  letter-spacing: 4px;
+}
+.action-bar{
+  position: relative;
+  height: 42px;
+  text-align: right;
+  padding: 0 15px;
+  box-sizing: border-box;;
+  border: 1px solid #f1e8e8;
+  border-top: none;
+  border-left: none;
+  .delete-btn{
+    color: #F56C6C;
+  }
+}
+.logo-wrapper{
+  position: relative;
+  height: 42px;
+  background: #fff;
+  border-bottom: 1px solid #f1e8e8;
+  box-sizing: border-box;
+}
+.logo{
+  position: absolute;
+  left: 12px;
+  top: 6px;
+  line-height: 30px;
+  color: #00afff;
+  font-weight: 600;
+  font-size: 17px;
+  white-space: nowrap;
+  > img{
+    width: 30px;
+    height: 30px;
+    vertical-align: top;
+  }
+  .github{
+    display: inline-block;
+    vertical-align: sub;
+    margin-left: 15px;
+    > img{
+      height: 22px;
+    }
+  }
+}
+
+.center-board-row {
+  padding: 12px 12px 15px 12px;
+  box-sizing: border-box;
+  & > .el-form {
+    // 69 = 12+15+42
+    height: calc(100vh - 69px);
+  }
+}
+.drawing-board {
+  height: 100%;
+  position: relative;
+  .components-body {
+    padding: 0;
+    margin: 0;
+    font-size: 0;
+  }
+  .sortable-ghost {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    &::before {
+      content: " ";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      height: 3px;
+      background: rgb(89, 89, 223);
+      z-index: 2;
+    }
+  }
+  .components-item.sortable-ghost {
+    width: 100%;
+    height: 60px;
+    background-color: $selectedColor;
+  }
+  .active-from-item {
+    & > .el-form-item{
+      background: $selectedColor;
+      border-radius: 6px;
+    }
+    & > .drawing-item-copy, & > .drawing-item-delete{
+      display: initial;
+    }
+    & > .component-name{
+      color: $lighterBlue;
+    }
+  }
+  .el-form-item{
+    margin-bottom: 15px;
+  }
+}
+.drawing-item{
+  position: relative;
+  cursor: move;
+  &.unfocus-bordered:not(.activeFromItem) > div:first-child  {
+    border: 1px dashed #ccc;
+  }
+  .el-form-item{
+    padding: 12px 10px;
+  }
+}
+.drawing-row-item{
+  position: relative;
+  cursor: move;
+  box-sizing: border-box;
+  border: 1px dashed #ccc;
+  border-radius: 3px;
+  padding: 0 2px;
+  margin-bottom: 15px;
+  .drawing-row-item {
+    margin-bottom: 2px;
+  }
+  .el-col{
+    margin-top: 22px;
+  }
+  .el-form-item{
+    margin-bottom: 0;
+  }
+  .drag-wrapper{
+    min-height: 80px;
+  }
+  &.active-from-item{
+    border: 1px dashed $lighterBlue;
+  }
+  .component-name{
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 12px;
+    color: #bbb;
+    display: inline-block;
+    padding: 0 6px;
+  }
+}
+.drawing-item, .drawing-row-item{
+  &:hover {
+    & > .el-form-item{
+      background: $selectedColor;
+      border-radius: 6px;
+    }
+    & > .drawing-item-copy, & > .drawing-item-delete{
+      display: initial;
+    }
+  }
+  & > .drawing-item-copy, & > .drawing-item-delete{
+    display: none;
+    position: absolute;
+    top: -10px;
+    width: 22px;
+    height: 22px;
+    line-height: 22px;
+    text-align: center;
+    border-radius: 50%;
+    font-size: 12px;
+    border: 1px solid;
+    cursor: pointer;
+    z-index: 1;
+  }
+  & > .drawing-item-copy{
+    right: 56px;
+    border-color: $lighterBlue;
+    color: $lighterBlue;
+    background: #fff;
+    &:hover{
+      background: $lighterBlue;
+      color: #fff;
+    }
+  }
+  & > .drawing-item-delete{
+    right: 24px;
+    border-color: #F56C6C;
+    color: #F56C6C;
+    background: #fff;
+    &:hover{
+      background: #F56C6C;
+      color: #fff;
+    }
+  }
+}
+</style>

src/views/tool/gen/basicInfoForm.vue

@@ -0,0 +1,60 @@
+<template>
+  <el-form ref="basicInfoForm" :model="info" :rules="rules" label-width="150px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="表名称" prop="tableName">
+          <el-input placeholder="请输入仓库名称" v-model="info.tableName" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="表描述" prop="tableComment">
+          <el-input placeholder="请输入" v-model="info.tableComment" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="实体类名称" prop="className">
+          <el-input placeholder="请输入" v-model="info.className" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="作者" prop="functionAuthor">
+          <el-input placeholder="请输入" v-model="info.functionAuthor" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="备注" prop="remark">
+          <el-input type="textarea" :rows="3" v-model="info.remark"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+export default {
+  props: {
+    info: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      rules: {
+        tableName: [
+          { required: true, message: "请输入表名称", trigger: "blur" }
+        ],
+        tableComment: [
+          { required: true, message: "请输入表描述", trigger: "blur" }
+        ],
+        className: [
+          { required: true, message: "请输入实体类名称", trigger: "blur" }
+        ],
+        functionAuthor: [
+          { required: true, message: "请输入作者", trigger: "blur" }
+        ]
+      }
+    }
+  }
+}
+</script>

src/views/tool/gen/createTable.vue

@@ -0,0 +1,45 @@
+<template>
+  <!-- 创建表 -->
+  <el-dialog title="创建表" :visible.sync="visible" width="800px" top="5vh" append-to-body>
+    <span>创建表语句(支持多个建表语句)：</span>
+    <el-input type="textarea" :rows="10" placeholder="请输入文本" v-model="content"></el-input>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleCreateTable">确 定</el-button>
+      <el-button @click="visible = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { createTable } from "@/api/tool/gen"
+export default {
+  data() {
+    return {
+      // 遮罩层
+      visible: false,
+      // 文本内容
+      content: ""
+    }
+  },
+  methods: {
+    // 显示弹框
+    show() {
+      this.visible = true
+    },
+    /** 创建按钮操作 */
+    handleCreateTable() {
+      if (this.content === "") {
+        this.$modal.msgError("请输入建表语句")
+        return
+      }
+      createTable({ sql: this.content }).then(res => {
+        this.$modal.msgSuccess(res.msg)
+        if (res.code === 200) {
+          this.visible = false
+          this.$emit("ok")
+        }
+      })
+    }
+  }
+}
+</script>

src/views/tool/gen/editTable.vue

@@ -0,0 +1,229 @@
+<template>
+  <el-card>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="基本信息" name="basic">
+        <basic-info-form ref="basicInfo" :info="info" />
+      </el-tab-pane>
+      <el-tab-pane label="字段信息" name="columnInfo">
+        <el-table ref="dragTable" :data="columns" row-key="columnId" :max-height="tableHeight">
+          <el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag"/>
+          <el-table-column label="字段列名" prop="columnName" min-width="10%" :show-overflow-tooltip="true" class-name="allowDrag"/>
+          <el-table-column label="字段描述" min-width="10%">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.columnComment"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="物理类型"
+            prop="columnType"
+            min-width="10%"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column label="Java类型" min-width="11%">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.javaType">
+                <el-option label="Long" value="Long" />
+                <el-option label="String" value="String" />
+                <el-option label="Integer" value="Integer" />
+                <el-option label="Double" value="Double" />
+                <el-option label="BigDecimal" value="BigDecimal" />
+                <el-option label="Date" value="Date" />
+                <el-option label="Boolean" value="Boolean" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="java属性" min-width="10%">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.javaField"></el-input>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="插入" min-width="5%">
+            <template slot-scope="scope">
+              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isInsert"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="编辑" min-width="5%">
+            <template slot-scope="scope">
+              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isEdit"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="列表" min-width="5%">
+            <template slot-scope="scope">
+              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isList"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="查询" min-width="5%">
+            <template slot-scope="scope">
+              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isQuery"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="查询方式" min-width="10%">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.queryType">
+                <el-option label="=" value="EQ" />
+                <el-option label="!=" value="NE" />
+                <el-option label=">" value="GT" />
+                <el-option label=">=" value="GTE" />
+                <el-option label="<" value="LT" />
+                <el-option label="<=" value="LTE" />
+                <el-option label="LIKE" value="LIKE" />
+                <el-option label="BETWEEN" value="BETWEEN" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="必填" min-width="5%">
+            <template slot-scope="scope">
+              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isRequired"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="显示类型" min-width="12%">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.htmlType">
+                <el-option label="文本框" value="input" />
+                <el-option label="文本域" value="textarea" />
+                <el-option label="下拉框" value="select" />
+                <el-option label="单选框" value="radio" />
+                <el-option label="复选框" value="checkbox" />
+                <el-option label="日期控件" value="datetime" />
+                <el-option label="图片上传" value="imageUpload" />
+                <el-option label="文件上传" value="fileUpload" />
+                <el-option label="富文本控件" value="editor" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="字典类型" min-width="12%">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
+                <el-option
+                  v-for="dict in dictOptions"
+                  :key="dict.dictType"
+                  :label="dict.dictName"
+                  :value="dict.dictType">
+                  <span style="float: left">{{ dict.dictName }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
+              </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="生成信息" name="genInfo">
+        <gen-info-form ref="genInfo" :info="info" :tables="tables" :menus="menus"/>
+      </el-tab-pane>
+    </el-tabs>
+    <el-form label-width="100px">
+      <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
+        <el-button type="primary" @click="submitForm()">提交</el-button>
+        <el-button @click="close()">返回</el-button>
+      </el-form-item>
+    </el-form>
+  </el-card>
+</template>
+
+<script>
+import { getGenTable, updateGenTable } from "@/api/tool/gen"
+import { optionselect as getDictOptionselect } from "@/api/system/dict/type"
+import { listMenu as getMenuTreeselect } from "@/api/system/menu"
+import basicInfoForm from "./basicInfoForm"
+import genInfoForm from "./genInfoForm"
+import Sortable from 'sortablejs'
+
+export default {
+  name: "GenEdit",
+  components: {
+    basicInfoForm,
+    genInfoForm
+  },
+  data() {
+    return {
+      // 选中选项卡的 name
+      activeName: "columnInfo",
+      // 表格的高度
+      tableHeight: document.documentElement.scrollHeight - 245 + "px",
+      // 表信息
+      tables: [],
+      // 表列信息
+      columns: [],
+      // 字典信息
+      dictOptions: [],
+      // 菜单信息
+      menus: [],
+      // 表详细信息
+      info: {}
+    }
+  },
+  created() {
+    const tableId = this.$route.params && this.$route.params.tableId
+    if (tableId) {
+      // 获取表详细信息
+      getGenTable(tableId).then(res => {
+        this.columns = res.data.rows
+        this.info = res.data.info
+        this.tables = res.data.tables
+      })
+      /** 查询字典下拉列表 */
+      getDictOptionselect().then(response => {
+        this.dictOptions = response.data
+      })
+      /** 查询菜单下拉列表 */
+      getMenuTreeselect().then(response => {
+        this.menus = this.handleTree(response.data, "menuId")
+      })
+    }
+  },
+  methods: {
+    /** 提交按钮 */
+    submitForm() {
+      const basicForm = this.$refs.basicInfo.$refs.basicInfoForm
+      const genForm = this.$refs.genInfo.$refs.genInfoForm
+      Promise.all([basicForm, genForm].map(this.getFormPromise)).then(res => {
+        const validateResult = res.every(item => !!item)
+        if (validateResult) {
+          const genTable = Object.assign({}, basicForm.model, genForm.model)
+          genTable.columns = this.columns
+          genTable.params = {
+            treeCode: genTable.treeCode,
+            treeName: genTable.treeName,
+            treeParentCode: genTable.treeParentCode,
+            parentMenuId: genTable.parentMenuId
+          }
+          updateGenTable(genTable).then(res => {
+            this.$modal.msgSuccess(res.msg)
+            if (res.code === 200) {
+              this.close()
+            }
+          })
+        } else {
+          this.$modal.msgError("表单校验未通过，请重新检查提交内容")
+        }
+      })
+    },
+    getFormPromise(form) {
+      return new Promise(resolve => {
+        form.validate(res => {
+          resolve(res)
+        })
+      })
+    },
+    /** 关闭按钮 */
+    close() {
+      const obj = { path: "/tool/gen", query: { t: Date.now(), pageNum: this.$route.query.pageNum } }
+      this.$tab.closeOpenPage(obj)
+    }
+  },
+  mounted() {
+    const el = this.$refs.dragTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0]
+    const sortable = Sortable.create(el, {
+      handle: ".allowDrag",
+      onEnd: evt => {
+        const targetRow = this.columns.splice(evt.oldIndex, 1)[0]
+        this.columns.splice(evt.newIndex, 0, targetRow)
+        for (let index in this.columns) {
+          this.columns[index].sort = parseInt(index) + 1
+        }
+      }
+    })
+  }
+}
+</script>

src/views/tool/gen/genInfoForm.vue

@@ -0,0 +1,312 @@
+<template>
+  <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item prop="tplCategory">
+          <span slot="label">生成模板</span>
+          <el-select v-model="info.tplCategory" @change="tplSelectChange">
+            <el-option label="单表（增删改查）" value="crud" />
+            <el-option label="树表（增删改查）" value="tree" />
+            <el-option label="主子表（增删改查）" value="sub" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item prop="tplWebType">
+          <span slot="label">前端类型</span>
+          <el-select v-model="info.tplWebType">
+            <el-option label="Vue2 Element UI 模版" value="element-ui" />
+            <el-option label="Vue3 Element Plus 模版" value="element-plus" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item prop="packageName">
+          <span slot="label">
+            生成包路径
+            <el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-input v-model="info.packageName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="moduleName">
+          <span slot="label">
+            生成模块名
+            <el-tooltip content="可理解为子系统名，例如 system" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-input v-model="info.moduleName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="businessName">
+          <span slot="label">
+            生成业务名
+            <el-tooltip content="可理解为功能英文名，例如 user" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-input v-model="info.businessName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="functionName">
+          <span slot="label">
+            生成功能名
+            <el-tooltip content="用作类描述，例如 用户" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-input v-model="info.functionName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="genType">
+          <span slot="label">
+            生成代码方式
+            <el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-radio v-model="info.genType" label="0">zip压缩包</el-radio>
+          <el-radio v-model="info.genType" label="1">自定义路径</el-radio>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item>
+          <span slot="label">
+            上级菜单
+            <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <treeselect
+            :append-to-body="true"
+            v-model="info.parentMenuId"
+            :options="menus"
+            :normalizer="normalizer"
+            :show-count="true"
+            placeholder="请选择系统菜单"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="24" v-if="info.genType == '1'">
+        <el-form-item prop="genPath">
+          <span slot="label">
+            自定义路径
+            <el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-input v-model="info.genPath">
+            <el-dropdown slot="append">
+              <el-button type="primary">
+                最近路径快速选择
+                <i class="el-icon-arrow-down el-icon--right"></i>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item @click.native="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row v-show="info.tplCategory == 'tree'">
+      <h4 class="form-header">其他信息</h4>
+      <el-col :span="12">
+        <el-form-item>
+          <span slot="label">
+            树编码字段
+            <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-select v-model="info.treeCode" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in info.columns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.columnName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item>
+          <span slot="label">
+            树父编码字段
+            <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-select v-model="info.treeParentCode" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in info.columns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.columnName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item>
+          <span slot="label">
+            树名称字段
+            <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-select v-model="info.treeName" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in info.columns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.columnName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row v-show="info.tplCategory == 'sub'">
+      <h4 class="form-header">关联信息</h4>
+      <el-col :span="12">
+        <el-form-item>
+          <span slot="label">
+            关联子表的表名
+            <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
+            <el-option
+              v-for="(table, index) in tables"
+              :key="index"
+              :label="table.tableName + '：' + table.tableComment"
+              :value="table.tableName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item>
+          <span slot="label">
+            子表关联的外键名
+            <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-select v-model="info.subTableFkName" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in subColumns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.columnName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+import Treeselect from "@riophae/vue-treeselect"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+
+export default {
+  components: { Treeselect },
+  props: {
+    info: {
+      type: Object,
+      default: null
+    },
+    tables: {
+      type: Array,
+      default: null
+    },
+    menus: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      subColumns: [],
+      rules: {
+        tplCategory: [
+          { required: true, message: "请选择生成模板", trigger: "blur" }
+        ],
+        packageName: [
+          { required: true, message: "请输入生成包路径", trigger: "blur" }
+        ],
+        moduleName: [
+          { required: true, message: "请输入生成模块名", trigger: "blur" }
+        ],
+        businessName: [
+          { required: true, message: "请输入生成业务名", trigger: "blur" }
+        ],
+        functionName: [
+          { required: true, message: "请输入生成功能名", trigger: "blur" }
+        ]
+      }
+    }
+  },
+  watch: {
+    'info.subTableName': function(val) {
+      this.setSubTableColumns(val)
+    },
+    'info.tplWebType': function(val) {
+      if (val === '') {
+        this.info.tplWebType = "element-ui"
+      }
+    }
+  },
+  methods: {
+    /** 转换菜单数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.menuId,
+        label: node.menuName,
+        children: node.children
+      }
+    },
+    /** 选择子表名触发 */
+    subSelectChange(value) {
+      this.info.subTableFkName = ''
+    },
+    /** 选择生成模板触发 */
+    tplSelectChange(value) {
+      if(value !== 'sub') {
+        this.info.subTableName = ''
+        this.info.subTableFkName = ''
+      }
+    },
+    /** 设置关联外键 */
+    setSubTableColumns(value) {
+      for (var item in this.tables) {
+        const name = this.tables[item].tableName
+        if (value === name) {
+          this.subColumns = this.tables[item].columns
+          break
+        }
+      }
+    }
+  }
+}
+</script>

src/views/tool/gen/importTable.vue

@@ -0,0 +1,120 @@
+<template>
+  <!-- 导入表 -->
+  <el-dialog title="导入表" :visible.sync="visible" width="800px" top="5vh" append-to-body>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+      <el-form-item label="表名称" prop="tableName">
+        <el-input
+          v-model="queryParams.tableName"
+          placeholder="请输入表名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="表描述" prop="tableComment">
+        <el-input
+          v-model="queryParams.tableComment"
+          placeholder="请输入表描述"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <el-table @row-click="clickRow" ref="table" :data="dbTableList" @selection-change="handleSelectionChange" height="260px">
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column prop="tableName" label="表名称" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="tableComment" label="表描述" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="createTime" label="创建时间"></el-table-column>
+        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
+      </el-table>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-row>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleImportTable">确 定</el-button>
+      <el-button @click="visible = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { listDbTable, importTable } from "@/api/tool/gen"
+export default {
+  data() {
+    return {
+      // 遮罩层
+      visible: false,
+      // 选中数组值
+      tables: [],
+      // 总条数
+      total: 0,
+      // 表数据
+      dbTableList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        tableName: undefined,
+        tableComment: undefined
+      }
+    }
+  },
+  methods: {
+    // 显示弹框
+    show() {
+      this.getList()
+      this.visible = true
+    },
+    clickRow(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.tables = selection.map(item => item.tableName)
+    },
+    // 查询表数据
+    getList() {
+      listDbTable(this.queryParams).then(res => {
+        if (res.code === 200) {
+          this.dbTableList = res.rows
+          this.total = res.total
+        }
+      })
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    /** 导入按钮操作 */
+    handleImportTable() {
+      const tableNames = this.tables.join(",")
+      if (tableNames == "") {
+        this.$modal.msgError("请选择要导入的表")
+        return
+      }
+      importTable({ tables: tableNames }).then(res => {
+        this.$modal.msgSuccess(res.msg)
+        if (res.code === 200) {
+          this.visible = false
+          this.$emit("ok")
+        }
+      })
+    }
+  }
+}
+</script>

src/views/tool/gen/index.vue

@@ -0,0 +1,347 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="表名称" prop="tableName">
+        <el-input
+          v-model="queryParams.tableName"
+          placeholder="请输入表名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="表描述" prop="tableComment">
+        <el-input
+          v-model="queryParams.tableComment"
+          placeholder="请输入表描述"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="dateRange"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          :disabled="multiple"
+          @click="handleGenTable"
+          v-hasPermi="['tool:gen:code']"
+        >生成</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="openCreateTable"
+          v-hasRole="['admin']"
+        >创建</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-upload"
+          size="mini"
+          @click="openImportTable"
+          v-hasPermi="['tool:gen:import']"
+        >导入</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleEditTable"
+          v-hasPermi="['tool:gen:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['tool:gen:remove']"
+        >删除</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table ref="tables" v-loading="loading" :data="tableList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+      <el-table-column type="selection" align="center" width="55"></el-table-column>
+      <el-table-column label="序号" type="index" width="50" align="center">
+        <template slot-scope="scope">
+          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="表名称" align="center" prop="tableName" :show-overflow-tooltip="true" width="120" />
+      <el-table-column label="表描述" align="center" prop="tableComment" :show-overflow-tooltip="true" width="120" />
+      <el-table-column label="实体" align="center" prop="className" :show-overflow-tooltip="true" width="120" />
+      <el-table-column label="创建时间" align="center" prop="createTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="160" />
+      <el-table-column label="更新时间" align="center" prop="updateTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="160" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            icon="el-icon-view"
+            @click="handlePreview(scope.row)"
+            v-hasPermi="['tool:gen:preview']"
+          >预览</el-button>
+          <el-button
+            type="text"
+            size="small"
+            icon="el-icon-edit"
+            @click="handleEditTable(scope.row)"
+            v-hasPermi="['tool:gen:edit']"
+          >编辑</el-button>
+          <el-button
+            type="text"
+            size="small"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['tool:gen:remove']"
+          >删除</el-button>
+          <el-button
+            type="text"
+            size="small"
+            icon="el-icon-refresh"
+            @click="handleSynchDb(scope.row)"
+            v-hasPermi="['tool:gen:edit']"
+          >同步</el-button>
+          <el-button
+            type="text"
+            size="small"
+            icon="el-icon-download"
+            @click="handleGenTable(scope.row)"
+            v-hasPermi="['tool:gen:code']"
+          >生成代码</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <!-- 预览界面 -->
+    <el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body class="scrollbar">
+      <el-tabs v-model="preview.activeName">
+        <el-tab-pane
+          v-for="(value, key) in preview.data"
+          :label="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
+          :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
+          :key="key"
+        >
+          <el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="value" v-clipboard:success="clipboardSuccess" style="float:right">复制</el-link>
+          <pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+    <import-table ref="import" @ok="handleQuery" />
+    <create-table ref="create" @ok="handleQuery" />
+  </div>
+</template>
+
+<script>
+import { listTable, previewTable, delTable, genCode, synchDb } from "@/api/tool/gen"
+import importTable from "./importTable"
+import createTable from "./createTable"
+import hljs from "highlight.js/lib/highlight"
+import "highlight.js/styles/github-gist.css"
+hljs.registerLanguage("java", require("highlight.js/lib/languages/java"))
+hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"))
+hljs.registerLanguage("html", require("highlight.js/lib/languages/xml"))
+hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml"))
+hljs.registerLanguage("javascript", require("highlight.js/lib/languages/javascript"))
+hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"))
+
+export default {
+  name: "Gen",
+  components: { importTable, createTable },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 唯一标识符
+      uniqueId: "",
+      // 选中数组
+      ids: [],
+      // 选中表数组
+      tableNames: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 表数据
+      tableList: [],
+      // 日期范围
+      dateRange: "",
+      // 默认排序
+      defaultSort: { prop: "createTime", order: "descending" },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        tableName: undefined,
+        tableComment: undefined
+      },
+      // 预览参数
+      preview: {
+        open: false,
+        title: "代码预览",
+        data: {},
+        activeName: "domain.java"
+      }
+    }
+  },
+  created() {
+    this.queryParams.orderByColumn = this.defaultSort.prop
+    this.queryParams.isAsc = this.defaultSort.order
+    this.getList()
+  },
+  activated() {
+    const time = this.$route.query.t
+    if (time != null && time != this.uniqueId) {
+      this.uniqueId = time
+      this.queryParams.pageNum = Number(this.$route.query.pageNum)
+      this.getList()
+    }
+  },
+  methods: {
+    /** 查询表集合 */
+    getList() {
+      this.loading = true
+      listTable(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.tableList = response.rows
+          this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 生成代码操作 */
+    handleGenTable(row) {
+      const tableNames = row.tableName || this.tableNames
+      if (tableNames == "") {
+        this.$modal.msgError("请选择要生成的数据")
+        return
+      }
+      if(row.genType === "1") {
+        genCode(row.tableName).then(response => {
+          this.$modal.msgSuccess("成功生成到自定义路径：" + row.genPath)
+        })
+      } else {
+        this.$download.zip("/tool/gen/batchGenCode?tables=" + tableNames, "ruoyi.zip")
+      }
+    },
+    /** 同步数据库操作 */
+    handleSynchDb(row) {
+      const tableName = row.tableName
+      this.$modal.confirm('确认要强制同步"' + tableName + '"表结构吗？').then(function() {
+        return synchDb(tableName)
+      }).then(() => {
+        this.$modal.msgSuccess("同步成功")
+      }).catch(() => {})
+    },
+    /** 打开导入表弹窗 */
+    openImportTable() {
+      this.$refs.import.show()
+    },
+    /** 打开创建表弹窗 */
+    openCreateTable() {
+      this.$refs.create.show()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = []
+      this.resetForm("queryForm")
+      this.queryParams.pageNum = 1
+      this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
+    },
+    /** 预览按钮 */
+    handlePreview(row) {
+      previewTable(row.tableId).then(response => {
+        this.preview.data = response.data
+        this.preview.open = true
+        this.preview.activeName = "domain.java"
+      })
+    },
+    /** 高亮显示 */
+    highlightedCode(code, key) {
+      const vmName = key.substring(key.lastIndexOf("/") + 1, key.indexOf(".vm"))
+      var language = vmName.substring(vmName.indexOf(".") + 1, vmName.length)
+      const result = hljs.highlight(language, code || "", true)
+      return result.value || '&nbsp;'
+    },
+    /** 复制代码成功 */
+    clipboardSuccess() {
+      this.$modal.msgSuccess("复制成功")
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.tableId)
+      this.tableNames = selection.map(item => item.tableName)
+      this.single = selection.length != 1
+      this.multiple = !selection.length
+    },
+    /** 排序触发事件 */
+    handleSortChange(column, prop, order) {
+      this.queryParams.orderByColumn = column.prop
+      this.queryParams.isAsc = column.order
+      this.getList()
+    },
+    /** 修改按钮操作 */
+    handleEditTable(row) {
+      const tableId = row.tableId || this.ids[0]
+      const tableName = row.tableName || this.tableNames[0]
+      const params = { pageNum: this.queryParams.pageNum }
+      this.$tab.openPage("修改[" + tableName + "]生成配置", '/tool/gen-edit/index/' + tableId, params)
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const tableIds = row.tableId || this.ids
+      this.$modal.confirm('是否确认删除表编号为"' + tableIds + '"的数据项？').then(function() {
+        return delTable(tableIds)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
+    }
+  }
+}
+</script>

src/views/tool/swagger/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <i-frame :src="url" />
+</template>
+<script>
+import iFrame from "@/components/iFrame/index"
+export default {
+  name: "Swagger",
+  components: { iFrame },
+  data() {
+    return {
+      url: process.env.VUE_APP_BASE_API + "/swagger-ui/index.html"
+    }
+  }
+}
+</script>

vue.config.js

@@ -10,8 +10,8 @@ const CompressionPlugin = require('compression-webpack-plugin')
 const name = process.env.VUE_APP_TITLE || '传染病溯源预测系统' // 网页标题
 
 // const baseUrl = '/' // 后端接口
-// const baseUrl = 'http://127.0.0.1:8081/' // 后端接口
-const baseUrl = 'http://173.18.12.205:8081/' // 后端接口
+const baseUrl = 'http://127.0.0.1:8081/' // 后端接口
+// const baseUrl = 'http://173.18.12.205:8081/' // 后端接口
 
 const port = process.env.port || process.env.npm_config_port || 80 // 端口