30

src/api/emport/Emport.js

@@ -106,3 +106,105 @@ export function deleteDict(dictId) {
         params:{dictId}
     })
 }
+
+/**
+ * 查询数据源字典
+ * @returns {AxiosPromise<any>}
+ */
+export function queryDatasource() {
+    return request({
+        url: `${prefix}/datasource`,
+        method: 'get'
+    })
+}
+
+/**
+ * 查询表信息
+ * @param dataSourceId
+ * @returns {AxiosPromise<any>}
+ */
+export function queryTable(dataSourceId) {
+    return request({
+        url: `${prefix}/datasource/table`,
+        method: 'get',
+        params:{dataSourceId}
+    })
+}
+
+/**
+ * 查询数据库字段字典
+ * @param dataSourceId
+ * @param tableName
+ * @returns {AxiosPromise}
+ */
+export function queryDbField(dataSourceId,tableName) {
+    return request({
+        url: `${prefix}/datasource/field`,
+        method: 'get',
+        params:{dataSourceId,tableName}
+    })
+}
+
+/**
+ * 文件上传
+ * @param data
+ * @returns {*}
+ */
+export async function uploadExcel(data) {
+    return {
+        code: 200
+    }
+}
+
+
+/**
+ * 字段查询
+ * @param params
+ * @returns {*}
+ */
+export function queryField(params) {
+    return request({
+        url: `${prefix}/field`,
+        method: 'get',
+        params
+    })
+}
+
+/**
+ * 新增字段
+ * @param data
+ * @returns {*}
+ */
+export function addField(data) {
+    return request({
+        url: `${prefix}/field`,
+        method: 'post',
+        data
+    })
+}
+
+/**
+ * 修改字段
+ * @param data
+ * @returns {*}
+ */
+export function updateField(data) {
+    return request({
+        url: `${prefix}/field`,
+        method: 'put',
+        data
+    })
+}
+
+/**
+ * 删除字段
+ * @param fieldId
+ * @returns {*}
+ */
+export function deleteField(fieldId) {
+    return request({
+        url: `${prefix}/field`,
+        method: 'delete',
+        params:{fieldId}
+    })
+}

src/api/emport/datasource.js

+import request from '@/utils/request'
+
+// 查询数据源配置列表
+export function listDatasource(query) {
+    return request({
+        url: "/system/datasource/list",
+        method: "get",
+        params: query,
+    });
+}
+
+export function selectDatasource() {
+    return request({
+        url: "/system/datasource/select",
+        method: "get",
+    });
+}
+
+// 查询数据源配置详细
+export function getDatasource(datasourceId) {
+    return request({
+        url: "/system/datasource/" + datasourceId,
+        method: "get",
+    });
+}
+
+// 新增数据源配置
+export function addDatasource(data) {
+    return request({
+        url: "/system/datasource",
+        method: "post",
+        data: data,
+    });
+}
+
+// 修改数据源配置
+export function updateDatasource(data) {
+    return request({
+        url: "/system/datasource",
+        method: "put",
+        data: data,
+    });
+}
+
+// 删除数据源配置
+export function delDatasource(datasourceId) {
+    return request({
+        url: "/system/datasource/" + datasourceId,
+        method: "delete",
+    });
+}
+
+
+// 测试数据源连通性
+export function testDatasourceConect(param) {
+    return request({
+        url: "/system/datasource/getTestConnectBySource",
+        method: "get",
+        params:param
+    });
+}

src/layout/EmptyLayout/Index.vue

@@ -7,8 +7,8 @@
       </div>
       <el-menu :default-active="key" class="empty-menu" mode="horizontal" @select="handleSelect">
         <el-menu-item index="/emport">数据导入</el-menu-item>
-        <el-menu-item index="/authorization">授权管理</el-menu-item>
-        <el-menu-item index="/catalog">目录管理</el-menu-item>
+        <el-menu-item index="/rule">规则管理</el-menu-item>
+        <el-menu-item index="/datasource">数据源管理</el-menu-item>
       </el-menu>
       <!--快捷功能操作区-->
       <div v-if="false" class="operator">
@@ -27,8 +27,8 @@
 </template>
 
 <script>
-import WindowUtil from "@/utils/document/WindowUtil";
-import defaultSettings from '@/settings'
+import WindowUtil from '@/utils/document/WindowUtil'
+
 export default {
   name: 'EmptyLayout',
   computed: {

src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
-
-Vue.use(Router)
-
 /* Layout */
 import Layout from '@/layout'
 import EmptyLayout from '@/layout/EmptyLayout/Index'
 
+Vue.use(Router)
+
 /**
  * Note: 路由配置项
  *
@@ -31,193 +30,205 @@ import EmptyLayout from '@/layout/EmptyLayout/Index'
 
 // 公共路由
 export const constantRoutes = [
-  {
-    path: '/',
-    component: EmptyLayout,
-    hidden: true,
-    redirect: '/emport',
-    children: [
-      {
-        path: 'emport',
-        component: () => import('@/views/emport/emport/index'),
-        name: 'Emport',
-        meta: { title: '数据导入', icon: '' }
-      }
-    ]
-  },
-  {
-    path: '/redirect',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect')
-      }
-    ]
-  },
-  {
-    path: '/login',
-    component: () => import('@/views/login'),
-    hidden: true
-  },
-  {
-    path: '/open',
-    component: EmptyLayout,
-    hidden: true,
-    children: [
-      {
-        path: 'manualReservation',
-        component: () => import('@/views/open/manualReservation/index'),
-        name: 'ManualReservation',
-        meta: { title: '手动预约', icon: '' }
-      }
-    ]
-  },
-  {
-    path: '/OpenRedirect',
-    component: () => import('@/views/OpenRedirect'),
-    hidden: true
-  },
-  {
-    path: '/addNumTable',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: '/',
-        component: () => import('@/views/resource/addNumTable/index'),
-        name: '新增号表',
-        meta: { title: '新增号表', icon: '' }
-      }
-    ]
-  },
-  {
-    path: '/customerAppointment',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
+    {
         path: '/',
-        component: () => import('@/views/resource/apply/customerAppointment'),
-        name: 'CustomerAppointment',
-        meta: { title: '手动预约', icon: '' }
-      }
-    ]
-  },
-  /*{
-    path: '/manualReservation',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: '/',
-        component: () => import('@/views/resource/apply/manualReservation'),
-        name: '手动预约',
-        meta: { title: '手动预约', icon: '' }
-      }
-    ]
-  },*/
-  {
-    path: '/404',
-    component: () => import('@/views/error/404'),
-    hidden: true
-  },
-  {
-    path: '/401',
-    component: () => import('@/views/error/401'),
-    hidden: true
-  },
-  {
-    path: '',
-    component: Layout,
-    redirect: 'index',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/index'),
-        name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
-      }
-    ]
-  },
-  {
-    path: '/user',
-    component: Layout,
-    hidden: true,
-    redirect: 'noredirect',
-    children: [
-      {
-        path: 'profile',
-        component: () => import('@/views/system/user/profile/index'),
-        name: '个人中心',
-        meta: { title: '个人中心', icon: 'user' }
-      }
-    ]
-  },
-  {
-    path: '/dict',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: 'type/data/:dictId(\\d+)',
-        component: () => import('@/views/system/dict/data'),
-        name: '字典数据',
-        meta: { title: '字典数据', icon: '' }
-      }
-    ]
-  },
-  {
-    path: '/userView',
-    component: () => import('@/views/information/userView/index'),
-    hidden: true
-  },
-  {
-    path: '/tabuser',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: ':userinfo',
-        component: () => import('@/views/information/user/index'),
-        name: '用户信息',
-        meta: { title: '用户信息', icon: '' }
-      }
-    ]
-  },
-  {
-    path: '/views',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: ':menuinfo',
-        component: () => import('@/views/information/view/index'),
-        name: '视图信息',
-        meta: { title: '视图信息', icon: '' }
-      }
-    ]
-  },
-  {
-    path: '/gen',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: 'edit/:tableId(\\d+)',
-        component: (resolve) => require(['@/views/tool/gen/editTable'], resolve),
-        name: 'GenEdit',
-        meta: { title: '修改生成配置' }
-      }
-    ]
-  }
+        component: EmptyLayout,
+        hidden: true,
+        redirect: '/emport',
+        children: [
+            {
+                path: 'emport',
+                component: () => import('@/views/emport/emport/index'),
+                name: 'Emport',
+                meta: { title: '数据导入', icon: '' }
+            },
+            {
+                path: 'rule',
+                component: () => import('@/views/emport/rule/index'),
+                name: 'Rule',
+                meta: { title: '规则管理', icon: '' }
+            },
+            {
+                path: 'dataSource',
+                component: () => import('@/views/emport/datasource/index'),
+                name: 'DatsSource',
+                meta: { title: '数据源管理', icon: '' }
+            }
+        ]
+    },
+    {
+        path: '/redirect',
+        component: Layout,
+        hidden: true,
+        children: [
+            {
+                path: '/redirect/:path(.*)',
+                component: () => import('@/views/redirect')
+            }
+        ]
+    },
+    {
+        path: '/login',
+        component: () => import('@/views/login'),
+        hidden: true
+    },
+    {
+        path: '/open',
+        component: EmptyLayout,
+        hidden: true,
+        children: [
+            {
+                path: 'manualReservation',
+                component: () => import('@/views/open/manualReservation/index'),
+                name: 'ManualReservation',
+                meta: { title: '手动预约', icon: '' }
+            }
+        ]
+    },
+    {
+        path: '/OpenRedirect',
+        component: () => import('@/views/OpenRedirect'),
+        hidden: true
+    },
+    {
+        path: '/addNumTable',
+        component: Layout,
+        hidden: true,
+        children: [
+            {
+                path: '/',
+                component: () => import('@/views/resource/addNumTable/index'),
+                name: '新增号表',
+                meta: { title: '新增号表', icon: '' }
+            }
+        ]
+    },
+    {
+        path: '/customerAppointment',
+        component: Layout,
+        hidden: true,
+        children: [
+            {
+                path: '/',
+                component: () => import('@/views/resource/apply/customerAppointment'),
+                name: 'CustomerAppointment',
+                meta: { title: '手动预约', icon: '' }
+            }
+        ]
+    },
+    /*{
+      path: '/manualReservation',
+      component: Layout,
+      hidden: true,
+      children: [
+        {
+          path: '/',
+          component: () => import('@/views/resource/apply/manualReservation'),
+          name: '手动预约',
+          meta: { title: '手动预约', icon: '' }
+        }
+      ]
+    },*/
+    {
+        path: '/404',
+        component: () => import('@/views/error/404'),
+        hidden: true
+    },
+    {
+        path: '/401',
+        component: () => import('@/views/error/401'),
+        hidden: true
+    },
+    {
+        path: '',
+        component: Layout,
+        redirect: 'index',
+        children: [
+            {
+                path: 'index',
+                component: () => import('@/views/index'),
+                name: 'Index',
+                meta: { title: '首页', icon: 'dashboard', affix: true }
+            }
+        ]
+    },
+    {
+        path: '/user',
+        component: Layout,
+        hidden: true,
+        redirect: 'noredirect',
+        children: [
+            {
+                path: 'profile',
+                component: () => import('@/views/system/user/profile/index'),
+                name: '个人中心',
+                meta: { title: '个人中心', icon: 'user' }
+            }
+        ]
+    },
+    {
+        path: '/dict',
+        component: Layout,
+        hidden: true,
+        children: [
+            {
+                path: 'type/data/:dictId(\\d+)',
+                component: () => import('@/views/system/dict/data'),
+                name: '字典数据',
+                meta: { title: '字典数据', icon: '' }
+            }
+        ]
+    },
+    {
+        path: '/userView',
+        component: () => import('@/views/information/userView/index'),
+        hidden: true
+    },
+    {
+        path: '/tabuser',
+        component: Layout,
+        hidden: true,
+        children: [
+            {
+                path: ':userinfo',
+                component: () => import('@/views/information/user/index'),
+                name: '用户信息',
+                meta: { title: '用户信息', icon: '' }
+            }
+        ]
+    },
+    {
+        path: '/views',
+        component: Layout,
+        hidden: true,
+        children: [
+            {
+                path: ':menuinfo',
+                component: () => import('@/views/information/view/index'),
+                name: '视图信息',
+                meta: { title: '视图信息', icon: '' }
+            }
+        ]
+    },
+    {
+        path: '/gen',
+        component: Layout,
+        hidden: true,
+        children: [
+            {
+                path: 'edit/:tableId(\\d+)',
+                component: (resolve) => require(['@/views/tool/gen/editTable'], resolve),
+                name: 'GenEdit',
+                meta: { title: '修改生成配置' }
+            }
+        ]
+    }
 ]
 
 // 动态路由，基于用户权限动态去加载
 export const dynamicRoutes = []
 export default new Router({
-  mode: 'history', // 去掉url中的#
-  scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes
+    mode: 'history', // 去掉url中的#
+    scrollBehavior: () => ({ y: 0 }),
+    routes: constantRoutes
 })

src/utils/document/StringUtil.js

@@ -20,4 +20,15 @@ export default class StringUtil {
         }
         return str1.toString() === str2.toString();
     }
+
+    /**
+     * 多字符串合并展示
+     * @param str
+     * @returns {string}
+     */
+    static mergeStr(...str){
+        return str.filter(item=>{
+            return !this.isEmpty(item)
+        }).join(" - ")
+    }
 }

src/utils/request.js

 import axios from 'axios'
-import { Notification, MessageBox, Message, Loading } from 'element-ui'
+import { Loading, Message, MessageBox, Notification } from 'element-ui'
 import store from '@/store'
 import { getToken, removeToken } from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
-import { tansParams, blobValidate } from '@/utils/ruoyi'
+import { blobValidate, tansParams } from '@/utils/ruoyi'
 import cache from '@/plugins/cache'
 import { saveAs } from 'file-saver'
 
@@ -19,7 +19,7 @@ const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: process.env.VUE_APP_BASE_API,
   // 超时
-  timeout: 10000
+  timeout: 1000*60*10
 })
 
 // request拦截器

src/views/emport/datasource/index.vue

+<template>
+    <div class="app-container">
+        <el-form
+            v-show="showSearch"
+            ref="queryForm"
+            :inline="true"
+            :model="queryParams"
+            label-width="68px"
+        >
+            <el-form-item label="名称" prop="datasourceName">
+                <el-input
+                    v-model="queryParams.datasourceName"
+                    clearable
+                    placeholder="请输入名称"
+                    size="small"
+                    @keyup.enter.native="handleQuery"
+                />
+            </el-form-item>
+            <el-form-item>
+                <el-button
+                    icon="el-icon-search"
+                    size="mini"
+                    type="primary"
+                    @click="handleQuery"
+                >搜索</el-button
+                >
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+                >重置</el-button
+                >
+                <el-button
+                    icon="el-icon-plus"
+                    size="mini"
+                    type="primary"
+                    @click="handleAdd"
+                >新增</el-button
+                >
+                <el-button
+                    :disabled="single"
+                    icon="el-icon-edit"
+                    size="mini"
+                    type="success"
+                    @click="handleUpdate"
+                >修改</el-button
+                >
+                <el-button
+                    :disabled="multiple"
+                    icon="el-icon-delete"
+                    size="mini"
+                    type="danger"
+                    @click="handleDelete"
+                >删除</el-button
+                >
+                <el-button
+                    icon="el-icon-download"
+                    size="mini"
+                    type="warning"
+                    @click="handleExport"
+                >导出</el-button
+                >
+            </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8" style="display: none">
+            <right-toolbar
+                :showSearch.sync="showSearch"
+                @queryTable="getList"
+            ></right-toolbar>
+        </el-row>
+
+        <el-table
+            v-loading="loading"
+            :data="datasourceList"
+            border
+            stripe
+            @selection-change="handleSelectionChange"
+        >
+            <el-table-column align="center" type="selection" width="55" />
+            <el-table-column align="center" label="名称" prop="datasourceName" />
+            <el-table-column
+                align="center"
+                label="驱动类"
+                min-width="180px"
+                prop="driverClass"
+            >
+                <template slot-scope="scope">
+                    <dict-tag
+                        :options="dict.type.DriverType"
+                        :value="scope.row.driverClass"
+                    />
+                </template>
+            </el-table-column>
+            <el-table-column
+                align="center"
+                label="连接地址"
+                min-width="230px"
+                prop="url"
+                show-overflow-tooltip="true"
+            />
+            <el-table-column align="center" label="适配器标识" prop="adapterFlag">
+                <template slot-scope="scope">
+                    <dict-tag
+                        :options="dict.type.sys_datasource_adapter_flag"
+                        :value="scope.row.adapterFlag"
+                    />
+                </template>
+            </el-table-column>
+            <!--<el-table-column label="用户名" align="center" prop="username" />-->
+            <!--<el-table-column label="密码" align="center" prop="password" />-->
+            <el-table-column align="center" label="机构代码" prop="orgCode" />
+            <el-table-column
+                align="center"
+                label="数据源组"
+                min-width="100px"
+                prop="datasourceGroup"
+            >
+                <template slot-scope="scope">
+                    <dict-tag
+                        :options="dict.type.datasource_group"
+                        :value="scope.row.datasourceGroup"
+                    />
+                </template>
+            </el-table-column>
+            <el-table-column align="center" label="备注" prop="remark" />
+            <el-table-column
+                align="center"
+                class-name="small-padding fixed-width"
+                label="操作"
+            >
+                <template slot-scope="scope">
+                    <el-button
+                        v-hasPermi="['system:datasource:edit']"
+                        icon="el-icon-edit"
+                        size="mini"
+                        type="text"
+                        @click="handleUpdate(scope.row)"
+                    >修改</el-button
+                    >
+                    <el-button
+                        v-hasPermi="['system:datasource:remove']"
+                        icon="el-icon-delete"
+                        size="mini"
+                        type="text"
+                        @click="handleDelete(scope.row)"
+                    >删除</el-button
+                    >
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination
+            v-show="total > 0"
+            :limit.sync="queryParams.pageSize"
+            :page.sync="queryParams.pageNum"
+            :total="total"
+            @pagination="getList"
+        />
+
+        <!-- 添加或修改数据源配置对话框 -->
+        <el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
+            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+                <el-form-item label="机构代码" prop="orgCode">
+                    <el-input v-model="form.orgCode" placeholder="请输入机构代码" />
+                </el-form-item>
+                <el-form-item label="数据源组" prop="datasourceGroup">
+                    <el-select
+                        v-model="form.datasourceGroup"
+                        placeholder="请选择数据源组"
+                    >
+                        <el-option
+                            v-for="dict in dict.type.datasource_group"
+                            :key="dict.value"
+                            :label="dict.label"
+                            :value="dict.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="名称" prop="datasourceName">
+                    <el-input v-model="form.datasourceName" placeholder="请输入名称" />
+                </el-form-item>
+                <el-form-item label="驱动类" prop="driverClass">
+                    <el-select v-model="form.driverClass" placeholder="请选择驱动类">
+                        <el-option
+                            v-for="dict in dict.type.DriverType"
+                            :key="dict.value"
+                            :label="dict.label"
+                            :value="dict.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="连接地址" prop="url">
+                    <el-input
+                        v-model="form.url"
+                        autosize
+                        placeholder="请输入内容"
+                        type="textarea"
+                    />
+                </el-form-item>
+                <el-form-item label="适配器标识" prop="adapterFlag">
+                    <el-radio-group v-model="form.adapterFlag">
+                        <el-radio
+                            v-for="dict in dict.type.sys_datasource_adapter_flag"
+                            :key="dict.value"
+                            :label="dict.value"
+                        >{{ dict.label }}
+                        </el-radio
+                        >
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="用户名" prop="username">
+                    <el-input v-model="form.username" placeholder="请输入用户名" />
+                </el-form-item>
+                <el-form-item label="密码" prop="password">
+                    <el-input v-model="form.password" placeholder="请输入密码" show-password />
+                </el-form-item>
+                <el-form-item label="备注" prop="remark">
+                    <el-input v-model="form.remark" placeholder="请输入备注" />
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="handleTest">连接测试</el-button>
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import {
+    addDatasource,
+    delDatasource,
+    getDatasource,
+    listDatasource,
+    testDatasourceConect,
+    updateDatasource
+} from '@/api/emport/datasource'
+
+export default {
+    name: 'DatsSource',
+    dicts: ["DriverType", "datasource_group","sys_datasource_adapter_flag"],
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 数据源配置表格数据
+            datasourceList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                datasourceName: null,
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                datasourceName: [
+                    { required: true, message: "名称不能为空", trigger: "blur" },
+                ],
+                driverClass: [
+                    { required: true, message: "驱动类不能为空", trigger: "change" },
+                ],
+                url: [{ required: true, message: "连接地址不能为空", trigger: "blur" }],
+                username: [
+                    { required: true, message: "用户名不能为空", trigger: "blur" },
+                ],
+                password: [
+                    { required: true, message: "密码不能为空", trigger: "blur" },
+                ],
+                adapterFlag: [
+                    { required: true, message: "适配器标识不能为空", trigger: "change" },
+                ],
+            },
+        };
+    },
+    created() {
+        this.getList();
+    },
+    methods: {
+        /** 查询数据源配置列表 */
+        getList() {
+            this.loading = true;
+            listDatasource(this.queryParams).then((response) => {
+                this.datasourceList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                orgCode: null,
+                datasourceGroup: null,
+                datasourceId: null,
+                datasourceName: null,
+                driverClass: null,
+                url: null,
+                username: null,
+                password: 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.datasourceId);
+            this.single = selection.length !== 1;
+            this.multiple = !selection.length;
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "添加数据源配置";
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const datasourceId = row.datasourceId || this.ids;
+            getDatasource(datasourceId).then((response) => {
+                this.form = response.data;
+                this.open = true;
+                this.title = "修改数据源配置";
+            });
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate((valid) => {
+                if (valid) {
+                    if (this.form.datasourceId != null) {
+                        updateDatasource(this.form).then((response) => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addDatasource(this.form).then((response) => {
+                            this.$modal.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const datasourceIds = row.datasourceId || this.ids;
+            this.$modal
+                .confirm(
+                    '是否确认删除数据源配置编号为"' + datasourceIds + '"的数据项？'
+                )
+                .then(function () {
+                    return delDatasource(datasourceIds);
+                })
+                .then(() => {
+                    this.getList();
+                    this.$modal.msgSuccess("删除成功");
+                })
+                .catch(() => {});
+        },
+        /** 测试连通按钮操作 */
+        handleTest() {
+            this.$refs["form"].validate((valid) => {
+                if (valid) {
+                    testDatasourceConect(this.form).then(res=>{
+                            this.$message.success("连接成功")
+                        }
+                    )
+                }
+            });
+
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download(
+                "system/datasource/export",
+                {
+                    ...this.queryParams,
+                },
+                `datasource_${new Date().getTime()}.xlsx`
+            );
+        },
+    },
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/emport/emport/index.vue

@@ -2,13 +2,15 @@
     <div class="container">
         <el-form inline size="small">
             <el-form-item label="数据年份:" label-width="80px">
-                <el-select v-model="queryForm.year" :popper-append-to-body="false">
+                <el-select v-model="queryForm.year" :popper-append-to-body="false" @change="initTemplate">
                     <el-option v-for="item in yearDict" :key="item.id" :label="item.label" :value="item.value">
                         <span style="float: left">{{ item.label }}</span>
                         <i class="el-icon-delete option_icon" style="color: #F56C6C;"
-                            @click.stop="deleteYear(item)"></i>
+                           @click.stop="deleteYear(item)"
+                        ></i>
                         <i class="el-icon-edit-outline option_icon" style="color: #8492a6;"
-                            @click.stop="editYearDialog(item)"></i>
+                           @click.stop="editYearDialog(item)"
+                        ></i>
                     </el-option>
                 </el-select>
                 <i class="el-icon-circle-plus-outline form_icon" @click="openYearDialog"></i>
@@ -19,38 +21,75 @@
                         <span style="float: left">{{ item.label }}</span>
                         <i class="el-icon-delete option_icon" style="color: #F56C6C;" @click.stop="deleteOrg(item)"></i>
                         <i class="el-icon-edit-outline option_icon" style="color: #8492a6;"
-                            @click.stop="editOrgDialog(item)"></i>
+                           @click.stop="editOrgDialog(item)"
+                        ></i>
                     </el-option>
                 </el-select>
                 <i class="el-icon-circle-plus-outline form_icon" @click="openOrgDialog"></i>
             </el-form-item>
             <el-form-item label="请选择导入文件:" label-width="120px">
-                <el-upload :multiple="false" :auto-upload="false" ref="upload" action="xxx" class="upload"
-                    :on-change="fileChange" :http-request="fileUpload">
+                <el-upload ref="upload" :auto-upload="false" :http-request="fileUpload" :on-change="fileChange" :on-remove="fileRemove"
+                           action="xxx" class="upload" multiple
+                >
                     <el-button size="small" plain>选择文件</el-button>
                 </el-upload>
             </el-form-item>
             <el-form-item>
-                <el-button size="small" icon="el-icon-upload" plain>导入数据</el-button>
+                <el-button :loading="importLoading" icon="el-icon-upload" plain size="small"
+                           @click="triggerImport"
+                >导入数据
+                </el-button>
             </el-form-item>
         </el-form>
-        <el-divider></el-divider>
+        <el-divider class="divider1"></el-divider>
         <el-form inline size="small">
             <el-form-item>
                 <el-button style="margin-left:6px;" size="small" icon="el-icon-pie-chart" plain>分析并导出</el-button>
                 <el-button size="small" icon="el-icon-set-up" plain>设置机构字典</el-button>
                 <el-button size="small" icon="el-icon-refresh" plain>清空数据</el-button>
+                <el-button icon="el-icon-folder-add" plain size="small" @click="openTemplateDialog">添加模板</el-button>
             </el-form-item>
         </el-form>
+        <el-table v-loading="queryTemplateLoading" :data="templateList"
+                  border stripe style="margin-left:6px;"
+        >
+            <el-table-column align="center" type="index" width="50"/>
+            <el-table-column align="center" label="机构类型" prop="orgName" show-overflow-tooltip/>
+            <el-table-column :formatter="importStatusFormat" align="center" label="导入状态" prop="importStatus"
+                             show-overflow-tooltip
+            />
+            <el-table-column :formatter="yearFormat" align="center" label="数据年份" prop="year" show-overflow-tooltip/>
+            <el-table-column align="center" label="导入时间" prop="importTime" show-overflow-tooltip/>
+            <el-table-column align="center" label="操作" width="150">
+                <template slot-scope="scope">
+                    <el-button plain size="small" @click.stop="openFieldDrawer(scope.row)">字段</el-button>
+                    <el-button circle icon="el-icon-edit" plain
+                               size="small" type="primary" @click.stop="editTemplateDialog(scope.row)"
+                    ></el-button>
+                    <el-button circle icon="el-icon-delete" plain
+                               size="small" type="danger" @click.stop="deleteTemplate(scope.row)"
+                    ></el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-divider class="divider2"></el-divider>
+        <div style="margin-left:6px;margin-bottom: 8px;">
+            <span style="font-size: 14px;color: #E6A23C;">温馨提示：分析后，数据没有问题再往正式库中导入数据！</span>
+        </div>
+        <el-button icon="el-icon-upload" plain size="small" style="margin-left:6px;" @click="triggerImport">
+            一键导入正式库
+        </el-button>
+        <span></span>
         <!-- 年份字典 -->
         <el-dialog :title="yearDialog.title" :visible.sync="yearDialog.show" close-on-click-modal append-to-body
-            width="400px">
+                   width="400px"
+        >
             <el-form ref="yearForm" size="small" :model="yearDialog.data" label-width="50px">
                 <el-form-item required prop="label" label="标签">
-                    <el-input v-model="yearDialog.data.label" />
+                    <el-input v-model="yearDialog.data.label"/>
                 </el-form-item>
                 <el-form-item required prop="value" label="值">
-                    <el-input v-model="yearDialog.data.value" />
+                    <el-input v-model="yearDialog.data.value"/>
                 </el-form-item>
             </el-form>
             <div slot="footer" class="dialog-footer">
@@ -60,10 +99,11 @@
         </el-dialog>
         <!-- 机构类型字典 -->
         <el-dialog :title="orgDialog.title" :visible.sync="orgDialog.show" close-on-click-modal append-to-body
-            width="400px">
+                   width="400px"
+        >
             <el-form ref="orgForm" size="small" :model="orgDialog.data" label-width="100px">
                 <el-form-item required prop="value" label="机构类型">
-                    <el-input v-model="orgDialog.data.value" />
+                    <el-input v-model="orgDialog.data.value"/>
                 </el-form-item>
             </el-form>
             <div slot="footer" class="dialog-footer">
@@ -71,23 +111,155 @@
                 <el-button @click="orgDialog.show = false">取 消</el-button>
             </div>
         </el-dialog>
+        <!-- 模板信息 -->
+        <el-dialog :title="templateDialog.title" :visible.sync="templateDialog.show" append-to-body close-on-click-modal
+                   width="400px"
+        >
+            <el-form ref="templateForm" :model="templateDialog.data" label-width="100px" size="small">
+                <el-form-item label="模板名称" prop="name">
+                    <el-input v-model="templateDialog.data.name"/>
+                </el-form-item>
+                <el-form-item label="机构类型" prop="orgName" required>
+                    <el-select v-model="templateDialog.data.orgName" :popper-append-to-body="false">
+                        <el-option v-for="item in orgDict" :key="item.id" :label="item.label" :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="数据年份" prop="year" required>
+                    <el-select v-model="templateDialog.data.year" :popper-append-to-body="false">
+                        <el-option v-for="item in yearDict" :key="item.id" :label="item.label" :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="数据源" prop="dataSourceId">
+                    <el-select v-model="templateDialog.data.dataSourceId" :popper-append-to-body="false"
+                               @change="changeDataSource"
+                    >
+                        <el-option v-for="item in dataSourceList" :key="item.id" :label="item.label"
+                                   :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="数据表" prop="tableName">
+                    <el-select v-model="templateDialog.data.tableName" v-loading="queryTableLoading" :loading="queryTableLoading"
+                               :popper-append-to-body="false" filterable
+                               @change="$forceUpdate()"
+                    >
+                        <el-option v-for="item in tableList" :key="item.value" :label="item.label" :value="item.value">
+                            <el-tooltip :disabled="item.label.length < 17" placement="top">
+                                <div slot="content">
+                                    <span>{{ item.label }}</span>
+                                </div>
+                                <div style="max-width: 500px;">{{ item.label }}</div>
+                            </el-tooltip>
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitTemplate">确 定</el-button>
+                <el-button @click="templateDialog.show = false">取 消</el-button>
+            </div>
+        </el-dialog>
+        <!-- 字段信息 -->
+        <el-dialog :title="fieldDialog.title" :visible.sync="fieldDialog.show" append-to-body close-on-click-modal
+                   width="400px"
+        >
+            <el-form ref="fieldForm" :model="fieldDialog.data" label-width="110px" size="small">
+                <el-form-item label="代码" prop="code">
+                    <el-input v-model="fieldDialog.data.code"/>
+                </el-form-item>
+                <el-form-item label="指标名称" prop="title" required>
+                    <el-input v-model="fieldDialog.data.title"/>
+                </el-form-item>
+                <el-form-item label="计量单位" prop="unit">
+                    <el-input v-model="fieldDialog.data.unit"/>
+                </el-form-item>
+                <el-form-item label="数据起始坐标" prop="coordinate" required>
+                    <el-input v-model="fieldDialog.data.coordinate"/>
+                </el-form-item>
+                <el-form-item label="排序字段" prop="sort">
+                    <el-input-number v-model="fieldDialog.data.sort" :min="0" :precision="0"/>
+                </el-form-item>
+                <el-form-item label="数据库字段" prop="field">
+                    <el-select v-model="fieldDialog.data.field" :popper-append-to-body="false">
+                        <el-option v-for="item in fieldDict" :key="item.id" :label="item.label" :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitField">确 定</el-button>
+                <el-button @click="fieldDialog.show = false">取 消</el-button>
+            </div>
+        </el-dialog>
+        <!-- 字段抽屉 -->
+        <el-drawer :visible.sync="fieldDrawer.show" append-to-body
+                   destroy-on-close direction="rtl"
+                   size="50%" title="字段信息">
+            <el-form inline label-width="110px" size="small">
+                <el-form-item label="数据库字段名:">
+                    <el-input  v-model="fieldDrawer.queryForm.field" />
+                </el-form-item>
+                <el-form-item label="代码:">
+                    <el-input  v-model="fieldDrawer.queryForm.code" />
+                </el-form-item>
+                <el-form-item label="指标名称:">
+                    <el-input v-model="fieldDrawer.queryForm.title" />
+                </el-form-item>
+                <el-form-item label="数据坐标:">
+                    <el-input v-model="fieldDrawer.queryForm.coordinate" />
+                </el-form-item>
+                <el-form-item label="">
+                    <el-button :loading="fieldDrawer.queryFieldLoading" icon="el-icon-search" plain type="primary"
+                               @click="queryFieldList"
+                    >查询
+                    </el-button>
+                    <el-button plain type="primary" @click="openFieldDialog">新增</el-button>
+                </el-form-item>
+            </el-form>
+            <el-table v-loading="fieldDrawer.queryFieldLoading" :data="fieldDrawer.fieldList"
+                      border stripe style="margin-left:6px;"
+            >
+                <el-table-column align="center" label="代码" prop="code" show-overflow-tooltip/>
+                <el-table-column align="center" label="指标名称" prop="title" show-overflow-tooltip/>
+                <el-table-column align="center" label="数据坐标" prop="coordinate" show-overflow-tooltip/>
+                <el-table-column align="center" label="数据库字段名" prop="field" show-overflow-tooltip/>
+                <el-table-column align="center" label="操作" width="150">
+                    <template slot-scope="scope">
+                        <el-button plain size="small">规则</el-button>
+                        <el-button circle icon="el-icon-edit" plain
+                                   size="small" type="primary" @click.stop="editFieldDialog(scope.row)"
+                        ></el-button>
+                        <el-button circle icon="el-icon-delete" plain
+                                   size="small" type="danger" @click.stop="deleteField(scope.row)"
+                        ></el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </el-drawer>
     </div>
 </template>
 
 <script>
-import * as Emport from "@/api/emport/Emport";
+import * as Emport from '@/api/emport/Emport'
+import StringUtil from '@/utils/document/StringUtil'
+
 export default {
-    name: "Emport",
+    name: 'Emport',
     data() {
         return {
             // 页面查询字段
             queryForm: {
-                year: "",
-                orgName: "", //数据类型
-                file: null,
+                year: '',
+                orgName: '', //数据类型
+                file: null
             },
             yearDict: [], // 年份字典
             orgDict: [], // 机构类型字典
+            dataSourceList: [], // 数据源列表
+            tableList: [], // 表列表
+            fieldDict: [], // 字段字典
             yearDialog: { // 年份dialog
                 title: '',
                 show: false,
@@ -98,41 +270,128 @@ export default {
                 show: false,
                 data: {}
             },
-        };
+            templateDialog: {
+                title: '',
+                show: false,
+                data: {}
+            },
+            fieldDialog: { // 字段dialog
+                title: '',
+                show: false,
+                data: {}
+            },
+            fieldDrawer:{ // 字段抽屉
+                template: null,
+                show: false,
+                fieldList:[],
+                queryForm:{
+                    templateId: '',
+                    code: '',
+                    title: '',
+                    coordinate: '',
+                    field: ''
+                },
+                queryFieldLoading: false,
+            },
+            importLoading: false, // 导入数据loading
+            queryTemplateLoading: false, // 模板查询loading
+            queryTableLoading: false, // 查询数据表loading
+            templateList: [] // 模板列表
+        }
     },
     created() {
         this.initYearDict(() => {
-            let now = new Date();
-            this.queryForm.year = now.getFullYear() + '';
+            let now = new Date()
+            this.queryForm.year = now.getFullYear() + ''
+            this.initTemplate()
         })
         this.initOrgDict((list) => {
             if (list && list.length > 0) {
                 this.queryForm.orgName = list[0].value
             }
         })
+        this.initDataSource()
     },
     methods: {
         // 初始化年份字典
         initYearDict(callback) {
-            Emport.queryDict("year").then((res) => {
+            Emport.queryDict('year').then((res) => {
                 if (res.code === 200) {
-                    this.yearDict = res.data;
+                    this.yearDict = res.data
                     if (callback) callback(res.data)
                 }
-            });
+            })
         },
         // 初始化机构类型字典
         initOrgDict(callback) {
-            Emport.queryDict("org").then((res) => {
+            Emport.queryDict('org').then((res) => {
                 if (res.code === 200) {
-                    this.orgDict = res.data;
+                    this.orgDict = res.data
                     if (callback) callback(res.data)
                 }
-            });
+            })
+        },
+        // 初始化数据源字典
+        initDataSource() {
+            Emport.queryDatasource().then(res => {
+                if (res.code === 200) {
+                    this.dataSourceList = res.data.map(item => {
+                        return {
+                            label: item.datasourceName,
+                            value: item.datasourceName,
+                            id: item.datasourceId
+                        }
+                    })
+                }
+            })
+        },
+        // 初始化数据表列表
+        initTable(datasourceId, callback) {
+            this.queryTableLoading = true
+            Emport.queryTable(datasourceId)
+                .then(res => {
+                    if (res.code === 200) {
+                        this.tableList = res.data.map(item => {
+                            return {
+                                value: item.VALUE,
+                                label: StringUtil.mergeStr(item.VALUE, item.LABEL)
+                            }
+                        })
+                        if (callback) callback(this.tableList)
+                    }
+                }).finally(_ => this.queryTableLoading = false)
+        },
+        // 初始化数据表字段字典
+        initFieldDict(){
+            if (this.fieldDrawer.template&&this.fieldDrawer.template.tableName&&this.fieldDrawer.template.dataSourceId){
+                Emport.queryDbField(this.fieldDrawer.template.dataSourceId,this.fieldDrawer.template.tableName)
+                    .then(res=>{
+                        if (res.code === 200) {
+                            this.fieldDict = res.data.map(item => {
+                                return {
+                                    value: item.VALUE,
+                                    label: StringUtil.mergeStr(item.VALUE, item.LABEL)
+                                }
+                            })
+                        }
+                    })
+            }
+        },
+        // 初始化模板列表
+        initTemplate() {
+            this.queryTemplateLoading = true
+            Emport.queryTemplate({
+                year: this.queryForm.year
+            })
+                .then(res => {
+                    if (res.code === 200) {
+                        this.templateList = res.data
+                    }
+                }).finally(_ => this.queryTemplateLoading = false)
         },
         // 打开年份字典新增框
         openYearDialog() {
-            this.yearDialog.title = "新增年份"
+            this.yearDialog.title = '新增年份'
             this.yearDialog.data = {
                 type: 'year',
                 label: '', value: ''
@@ -141,7 +400,7 @@ export default {
         },
         // 打开年份字典编辑框
         editYearDialog(data) {
-            this.yearDialog.title = "编辑年份"
+            this.yearDialog.title = '编辑年份'
             this.yearDialog.data = { ...data }
             this.yearDialog.show = true
         },
@@ -187,13 +446,13 @@ export default {
         },
         // 打开机构类型字典新增框
         openOrgDialog() {
-            this.orgDialog.title = "新增机构类型"
+            this.orgDialog.title = '新增机构类型'
             this.orgDialog.data = { type: 'org', value: '' }
             this.orgDialog.show = true
         },
         // 打开机构类型字典编辑框
         editOrgDialog(data) {
-            this.orgDialog.title = "编辑机构类型"
+            this.orgDialog.title = '编辑机构类型'
             this.orgDialog.data = { ...data }
             this.orgDialog.show = true
         },
@@ -244,15 +503,202 @@ export default {
             )
         },
         // 文件列表发生变化
-        fileChange() {
-
+        fileChange(file, fileList) {
+            let fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
+            let extension = ['xls', 'xlsx'].some(item => {
+                return item === fileType.toLowerCase()
+            })
+            if (!extension) {
+                this.$message.warning(`请选择类型为 xls/xlsx 的文件`)
+                fileList.splice(-1, 1) //移除当前选中
+                return
+            }
+            if (fileList.length > 1) {
+                fileList.splice(0, 1) //移除选中的第一个
+            }
+            this.queryForm.file = fileList[0]
         },
         // 文件上传方法
-        fileUpload() {
-
+        fileUpload({ file, onError, onProgress, onSuccess }) {
+            this.importLoading = true
+            let formData = new FormData()
+            formData.append('file', file)
+            //formData.append("templateId", this.checkTemplate.id);
+            Emport.uploadExcel(formData)
+                .then((res) => {
+                    if (res.code === 200) {
+                        onSuccess()
+                    } else {
+                        onError()
+                    }
+                })
+                .finally((_) => {
+                    this.importLoading = false
+                })
         },
-    },
-};
+        // 触发导入
+        triggerImport() {
+            if (this.queryForm.file) {
+                this.$refs.upload.submit()
+            } else {
+                this.$message.warning('请选择一个文件')
+            }
+        },
+        // 移除文件
+        fileRemove() {
+            this.queryForm.file = null
+        },
+        // 打开添加模板dialog
+        openTemplateDialog() {
+            this.templateDialog.data = {}
+            this.templateDialog.title = '添加模板'
+            this.templateDialog.show = true
+        },
+        // 修改数据源
+        changeDataSource(value) {
+            this.initTable(value, () => {
+                this.templateDialog.data.tableName = ''
+            })
+        },
+        // 提交模板dialog
+        submitTemplate() {
+            this.$refs.templateForm.validate(valid => {
+                if (valid) {
+                    if (this.templateDialog.title === '添加模板') {
+                        Emport.addTemplate(this.templateDialog.data)
+                            .then(res => {
+                                this.templateDialog.show = false
+                                this.initTemplate()
+                            })
+                    } else {
+                        Emport.updateTemplate(this.templateDialog.data)
+                            .then(res => {
+                                this.templateDialog.show = false
+                                this.initTemplate()
+                            })
+                    }
+                }
+            })
+        },
+        // 导入状态格式化
+        importStatusFormat(row) {
+            if (row.importStatus === '1') {
+                return '已导入'
+            } else {
+                return '未导入'
+            }
+        },
+        // 数据年份格式化
+        yearFormat(row) {
+            return this.yearDict.find(item => item.value === row.year)?.label
+        },
+        // 打开模板编辑框
+        editTemplateDialog(row) {
+            this.templateDialog.title = '编辑模板'
+            this.templateDialog.data = { ...row }
+            this.templateDialog.show = true
+        },
+        // 删除模板
+        deleteTemplate(row) {
+            this.$confirm(`是否删除模板 ${row.orgName} ?`, '删除',
+                {
+                    type: 'warning',
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    beforeClose: (action, instance, done) => {
+                        if (action === 'confirm') {
+                            Emport.deleteTemplate(row.id).then(res => {
+                                done()
+                                this.initTemplate()
+                            })
+                        } else {
+                            done()
+                        }
+                    }
+                }
+            )
+        },
+        // 提交字段dialog
+        submitField(){
+            this.$refs.fieldForm.validate(valid => {
+                if (valid) {
+                    if (this.fieldDialog.title === '新增字段') {
+                        Emport.addField(this.fieldDialog.data)
+                            .then(res => {
+                                this.fieldDialog.show = false
+                                this.queryFieldList()
+                            })
+                    } else {
+                        Emport.updateField(this.fieldDialog.data)
+                            .then(res => {
+                                this.fieldDialog.show = false
+                                this.queryFieldList()
+                            })
+                    }
+                }
+            })
+        },
+        // 打开字段抽屉
+        openFieldDrawer(row){
+            this.fieldDrawer.template = {...row}
+            this.fieldDrawer.queryForm = {
+                templateId: row.id,
+                code: '',
+                title: '',
+                coordinate: '',
+                field: '',
+                pageNum: 1,
+                pageSize: 20
+            };
+            this.fieldDrawer.fieldList = [];
+            this.fieldDrawer.show = true;
+            this.queryFieldList()
+            this.initFieldDict()
+        },
+        // 查询字段列表
+        queryFieldList(){
+            this.fieldDrawer.queryFieldLoading = true
+            Emport.queryField(this.fieldDrawer.queryForm)
+                .then(res=>{
+                    this.fieldDrawer.fieldList = res.rows
+                }).finally(_=>this.fieldDrawer.queryFieldLoading = false)
+        },
+        // 打开新增字段dialog
+        openFieldDialog(){
+            this.fieldDialog.title='新增字段'
+            this.fieldDialog.data = {
+                templateId: this.fieldDrawer.template.id
+            }
+            this.fieldDialog.show = true
+        },
+        // 打开修改字段的dialog
+        editFieldDialog(row){
+            this.fieldDialog.title='修改字段'
+            this.fieldDialog.data = {...row}
+            this.fieldDialog.show = true
+        },
+        // 删除字段
+        deleteField(row) {
+            this.$confirm(`是否删除字段 ${StringUtil.mergeStr(row.code,row.title)} ?`, '删除',
+                {
+                    type: 'warning',
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    beforeClose: (action, instance, done) => {
+                        if (action === 'confirm') {
+                            Emport.deleteField(row.id).then(res => {
+                                done()
+                                this.queryFieldList()
+                            })
+                        } else {
+                            done()
+                        }
+                    }
+                }
+            )
+        },
+    }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -273,6 +719,14 @@ export default {
         margin-top: 10px;
     }
 
+    .divider1 {
+        margin: -10px 0 10px 0;
+    }
+
+    .divider2 {
+        margin: 15px 0 10px 0;
+    }
+
     ::v-deep {
         .upload {
             display: flex;
@@ -286,12 +740,9 @@ export default {
         .el-upload-list {
             border: 1px solid #dcdfe6;
             min-width: 100px;
-            min-height: 30px;
+            height: 30px;
             border-radius: 2px;
-        }
-
-        .el-divider{
-            margin: -10px 0 10px 0;
+            overflow-y: hidden;
         }
 
     }

src/views/emport/rule/index.vue

+<template>
+
+</template>
+
+<script>
+export default {
+    name: 'Rule'
+}
+</script>
+
+<style scoped>
+
+</style>