2.0.0项目初始化

datax-modules/data-factory-service-parent/data-factory-service/src/main/java/cn/datax/service/data/factory/controller/DataSetController.java

@@ -10,6 +10,7 @@ import cn.datax.service.data.factory.api.vo.DataSetVo;
 import cn.datax.service.data.factory.api.query.DataSetQuery;
 import cn.datax.service.data.factory.mapstruct.DataSetMapper;
 import cn.datax.service.data.factory.service.DataSetService;
+import cn.hutool.core.util.StrUtil;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
@@ -82,6 +83,7 @@ public class DataSetController extends BaseController {
     @GetMapping("/page")
     public R getDataSetPage(DataSetQuery dataSetQuery) {
         QueryWrapper<DataSetEntity> queryWrapper = new QueryWrapper<>();
+        queryWrapper.like(StrUtil.isNotBlank(dataSetQuery.getSetName()), "set_name", dataSetQuery.getSetName());
         IPage<DataSetEntity> page = dataSetService.page(new Page<>(dataSetQuery.getPageNum(), dataSetQuery.getPageSize()), queryWrapper);
         List<DataSetVo> collect = page.getRecords().stream().map(dataSetMapper::toVO).collect(Collectors.toList());
         JsonPage<DataSetVo> jsonPage = new JsonPage<>(page.getCurrent(), page.getSize(), page.getTotal(), collect);

datax-modules/data-factory-service-parent/data-factory-service/src/main/java/cn/datax/service/data/factory/controller/DataSourceController.java

@@ -15,6 +15,7 @@ import cn.datax.service.data.factory.api.query.DbDataQuery;
 import cn.datax.service.data.factory.api.vo.DataSourceVo;
 import cn.datax.service.data.factory.mapstruct.DataSourceMapper;
 import cn.datax.service.data.factory.service.DataSourceService;
+import cn.hutool.core.util.StrUtil;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
@@ -88,6 +89,7 @@ public class DataSourceController extends BaseController {
     @GetMapping("/page")
     public R getDataSourcePage(DataSourceQuery dataSourceQuery) {
         QueryWrapper<DataSourceEntity> queryWrapper = new QueryWrapper<>();
+        queryWrapper.like(StrUtil.isNotBlank(dataSourceQuery.getSourceName()), "source_name", dataSourceQuery.getSourceName());
         IPage<DataSourceEntity> page = dataSourceService.page(new Page<>(dataSourceQuery.getPageNum(), dataSourceQuery.getPageSize()), queryWrapper);
         List<DataSourceVo> collect = page.getRecords().stream().map(dataSourceMapper::toVO).collect(Collectors.toList());
         JsonPage<DataSourceVo> jsonPage = new JsonPage<>(page.getCurrent(), page.getSize(), page.getTotal(), collect);

datax-modules/data-market-service-parent/data-market-service-api/src/main/java/cn/datax/service/data/market/api/feign/ApiMaskServiceFeign.java

@@ -9,6 +9,6 @@ import org.springframework.web.bind.annotation.PathVariable;
 @FeignClient(contextId = "apiMaskServiceFeign", value = "datax-service-data-market", fallbackFactory = ApiMaskServiceFeignFallbackFactory.class)
 public interface ApiMaskServiceFeign {
 
-    @GetMapping("/apiMask/api/{apiId}")
+    @GetMapping("/apiMasks/api/{apiId}")
     R getApiMaskByApiId(@PathVariable("apiId") String apiId);
 }

datax-modules/data-market-service-parent/data-market-service-api/src/main/java/cn/datax/service/data/market/api/feign/DataApiServiceFeign.java

@@ -9,6 +9,6 @@ import org.springframework.web.bind.annotation.PathVariable;
 @FeignClient(contextId = "dataApiServiceFeign", value = "datax-service-data-market", fallbackFactory = DataApiServiceFeignFallbackFactory.class)
 public interface DataApiServiceFeign {
 
-    @GetMapping("/dataApi/{id}")
+    @GetMapping("/dataApis/{id}")
     R getDataApiById(@PathVariable("id") String id);
 }

datax-modules/data-market-service-parent/data-market-service/src/main/java/cn/datax/service/data/market/controller/ApiMaskController.java

 package cn.datax.service.data.market.controller;
 
 import cn.datax.common.base.BaseController;
+import cn.datax.common.core.DataConstant;
 import cn.datax.common.core.JsonPage;
 import cn.datax.common.core.R;
 import cn.datax.common.validate.ValidationGroups;
@@ -10,6 +11,7 @@ import cn.datax.service.data.market.api.query.ApiMaskQuery;
 import cn.datax.service.data.market.api.vo.ApiMaskVo;
 import cn.datax.service.data.market.mapstruct.ApiMaskMapper;
 import cn.datax.service.data.market.service.ApiMaskService;
+import cn.hutool.core.util.StrUtil;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
@@ -34,7 +36,7 @@ import java.util.stream.Collectors;
  */
 @Api(tags = {"数据API脱敏信息表"})
 @RestController
-@RequestMapping("/apiMask")
+@RequestMapping("/apiMasks")
 public class ApiMaskController extends BaseController {
 
     @Autowired
@@ -71,6 +73,16 @@ public class ApiMaskController extends BaseController {
         return R.ok().setData(apiMaskMapper.toVO(apiMaskEntity));
     }
 
+    @ApiOperation(value = "获取列表", notes = "")
+    @GetMapping("/list")
+    public R getApiMaskList() {
+        QueryWrapper<ApiMaskEntity> queryWrapper = new QueryWrapper<>();
+        queryWrapper.eq("status", DataConstant.EnableState.ENABLE.getKey());
+        List<ApiMaskEntity> list = apiMaskService.list(queryWrapper);
+        List<ApiMaskVo> collect = list.stream().map(apiMaskMapper::toVO).collect(Collectors.toList());
+        return R.ok().setData(collect);
+    }
+
     /**
      * 分页查询信息
      *
@@ -84,6 +96,7 @@ public class ApiMaskController extends BaseController {
     @GetMapping("/page")
     public R getApiMaskPage(ApiMaskQuery apiMaskQuery) {
         QueryWrapper<ApiMaskEntity> queryWrapper = new QueryWrapper<>();
+        queryWrapper.like(StrUtil.isNotBlank(apiMaskQuery.getMaskName()), "mask_name", apiMaskQuery.getMaskName());
         IPage<ApiMaskEntity> page = apiMaskService.page(new Page<>(apiMaskQuery.getPageNum(), apiMaskQuery.getPageSize()), queryWrapper);
         List<ApiMaskVo> collect = page.getRecords().stream().map(apiMaskMapper::toVO).collect(Collectors.toList());
         JsonPage<ApiMaskVo> jsonPage = new JsonPage<>(page.getCurrent(), page.getSize(), page.getTotal(), collect);
@@ -131,4 +144,12 @@ public class ApiMaskController extends BaseController {
         apiMaskService.deleteApiMaskById(id);
         return R.ok();
     }
+
+    @ApiOperation(value = "批量删除", notes = "根据url的ids来批量删除对象")
+    @ApiImplicitParam(name = "ids", value = "ID集合", required = true, dataType = "List", paramType = "path")
+    @DeleteMapping("/batch/{ids}")
+    public R deleteApiMaskBatch(@PathVariable List<String> ids) {
+        apiMaskService.deleteApiMaskBatch(ids);
+        return R.ok();
+    }
 }

datax-modules/data-market-service-parent/data-market-service/src/main/java/cn/datax/service/data/market/controller/DataApiController.java

 package cn.datax.service.data.market.controller;
 
+import cn.datax.common.core.DataConstant;
 import cn.datax.common.core.JsonPage;
 import cn.datax.common.core.R;
 import cn.datax.common.validate.ValidationGroups;
@@ -11,6 +12,7 @@ import cn.datax.service.data.market.api.query.DataApiQuery;
 import cn.datax.service.data.market.api.vo.SqlParseVo;
 import cn.datax.service.data.market.mapstruct.DataApiMapper;
 import cn.datax.service.data.market.service.DataApiService;
+import cn.hutool.core.util.StrUtil;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
@@ -37,7 +39,7 @@ import java.util.stream.Collectors;
  */
 @Api(tags = {"数据API信息表"})
 @RestController
-@RequestMapping("/dataApi")
+@RequestMapping("/dataApis")
 public class DataApiController extends BaseController {
 
     @Autowired
@@ -60,6 +62,16 @@ public class DataApiController extends BaseController {
         return R.ok().setData(dataApiMapper.toVO(dataApiEntity));
     }
 
+    @ApiOperation(value = "获取列表", notes = "")
+    @GetMapping("/list")
+    public R getDataApiList() {
+        QueryWrapper<DataApiEntity> queryWrapper = new QueryWrapper<>();
+        queryWrapper.eq("status", DataConstant.EnableState.ENABLE.getKey());
+        List<DataApiEntity> list = dataApiService.list(queryWrapper);
+        List<DataApiVo> collect = list.stream().map(dataApiMapper::toVO).collect(Collectors.toList());
+        return R.ok().setData(collect);
+    }
+
     /**
      * 分页查询信息
      *
@@ -73,6 +85,7 @@ public class DataApiController extends BaseController {
     @GetMapping("/page")
     public R getDataApiPage(DataApiQuery dataApiQuery) {
         QueryWrapper<DataApiEntity> queryWrapper = new QueryWrapper<>();
+        queryWrapper.like(StrUtil.isNotBlank(dataApiQuery.getApiName()), "api_name", dataApiQuery.getApiName());
         queryWrapper.select("id", "status", "create_time", "api_name", "api_version", "api_url", "req_method", "res_type", "remark");
         IPage<DataApiEntity> page = dataApiService.page(new Page<>(dataApiQuery.getPageNum(), dataApiQuery.getPageSize()), queryWrapper);
         List<DataApiVo> collect = page.getRecords().stream().map(dataApiMapper::toVO).collect(Collectors.toList());
@@ -122,6 +135,14 @@ public class DataApiController extends BaseController {
         return R.ok();
     }
 
+    @ApiOperation(value = "批量删除", notes = "根据url的ids来批量删除对象")
+    @ApiImplicitParam(name = "ids", value = "ID集合", required = true, dataType = "List", paramType = "path")
+    @DeleteMapping("/batch/{ids}")
+    public R deleteDataApiBatch(@PathVariable List<String> ids) {
+        dataApiService.deleteDataApiBatch(ids);
+        return R.ok();
+    }
+
     /**
      * SQL解析
      * @param sqlParseDto

datax-modules/data-market-service-parent/data-market-service/src/main/java/cn/datax/service/data/market/service/ApiMaskService.java

@@ -4,6 +4,8 @@ import cn.datax.common.base.BaseService;
 import cn.datax.service.data.market.api.dto.ApiMaskDto;
 import cn.datax.service.data.market.api.entity.ApiMaskEntity;
 
+import java.util.List;
+
 /**
  * <p>
  * 数据API脱敏信息表 服务类
@@ -23,4 +25,6 @@ public interface ApiMaskService extends BaseService<ApiMaskEntity> {
     ApiMaskEntity getApiMaskByApiId(String apiId);
 
     void deleteApiMaskById(String id);
+
+    void deleteApiMaskBatch(List<String> ids);
 }

datax-modules/data-market-service-parent/data-market-service/src/main/java/cn/datax/service/data/market/service/DataApiService.java

@@ -6,6 +6,8 @@ import cn.datax.service.data.market.api.dto.DataApiDto;
 import cn.datax.common.base.BaseService;
 import cn.datax.service.data.market.api.vo.SqlParseVo;
 
+import java.util.List;
+
 /**
  * <p>
  * 数据API信息表 服务类
@@ -24,5 +26,7 @@ public interface DataApiService extends BaseService<DataApiEntity> {
 
     void deleteDataApiById(String id);
 
+    void deleteDataApiBatch(List<String> ids);
+
     SqlParseVo sqlParse(SqlParseDto sqlParseDto);
 }

datax-modules/data-market-service-parent/data-market-service/src/main/java/cn/datax/service/data/market/service/impl/ApiMaskServiceImpl.java

@@ -17,6 +17,8 @@ import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Propagation;
 import org.springframework.transaction.annotation.Transactional;
 
+import java.util.List;
+
 /**
  * <p>
  * 数据API脱敏信息表 服务实现类
@@ -71,4 +73,10 @@ public class ApiMaskServiceImpl extends BaseServiceImpl<ApiMaskDao, ApiMaskEntit
     public void deleteApiMaskById(String id) {
         apiMaskDao.deleteById(id);
     }
+
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public void deleteApiMaskBatch(List<String> ids) {
+        apiMaskDao.deleteBatchIds(ids);
+    }
 }

datax-modules/data-market-service-parent/data-market-service/src/main/java/cn/datax/service/data/market/service/impl/DataApiServiceImpl.java

@@ -105,6 +105,12 @@ public class DataApiServiceImpl extends BaseServiceImpl<DataApiDao, DataApiEntit
     }
 
     @Override
+    @Transactional(rollbackFor = Exception.class)
+    public void deleteDataApiBatch(List<String> ids) {
+        dataApiDao.deleteBatchIds(ids);
+    }
+
+    @Override
     public SqlParseVo sqlParse(SqlParseDto sqlParseDto) {
         String sql = sqlParseDto.getSqlText();
         sql = sql.replace(SqlBuilderUtil.getInstance().MARK_KEY_START, "");

datax-ui/src/api/market/apicall.js

+import request from '@/utils/request'
+
+export function getApiCall (data) {
+  return request({
+    url: '/data/api/v1/list',
+    method: 'get',
+    params: data
+  })
+}
+
+export function postApiCall (data) {
+  return request({
+    url: '/data/api/v1/list',
+    method: 'post',
+    data: data
+  })
+}

datax-ui/src/api/market/apimask.js

+import request from '@/utils/request'
+
+export function listApiMask (data) {
+  return request({
+    url: '/data/market/apiMasks/list',
+    method: 'get',
+    params: data
+  })
+}
+
+export function pageApiMask (data) {
+  return request({
+    url: '/data/market/apiMasks/page',
+    method: 'get',
+    params: data
+  })
+}
+
+export function getApiMask (id) {
+  return request({
+    url: '/data/market/apiMasks/' + id,
+    method: 'get'
+  })
+}
+
+export function delApiMask (id) {
+  return request({
+    url: '/data/market/apiMasks/' + id,
+    method: 'delete'
+  })
+}
+
+export function delApiMasks (ids) {
+  return request({
+    url: '/data/market/apiMasks/batch/' + ids,
+    method: 'delete'
+  })
+}
+
+export function addApiMask (data) {
+  return request({
+    url: '/data/market/apiMasks',
+    method: 'post',
+    data: data
+  })
+}
+
+export function updateApiMask (data) {
+  return request({
+    url: '/data/market/apiMasks/' + data.id,
+    method: 'put',
+    data: data
+  })
+}

datax-ui/src/api/market/dataapi.js

+import request from '@/utils/request'
+
+export function listDataApi (data) {
+  return request({
+    url: '/data/market/dataApis/list',
+    method: 'get',
+    params: data
+  })
+}
+
+export function pageDataApi (data) {
+  return request({
+    url: '/data/market/dataApis/page',
+    method: 'get',
+    params: data
+  })
+}
+
+export function getDataApi (id) {
+  return request({
+    url: '/data/market/dataApis/' + id,
+    method: 'get'
+  })
+}
+
+export function delDataApi (id) {
+  return request({
+    url: '/data/market/dataApis/' + id,
+    method: 'delete'
+  })
+}
+
+export function delDataApis (ids) {
+  return request({
+    url: '/data/market/dataApis/batch/' + ids,
+    method: 'delete'
+  })
+}
+
+export function addDataApi (data) {
+  return request({
+    url: '/data/market/dataApis',
+    method: 'post',
+    data: data
+  })
+}
+
+export function updateDataApi (data) {
+  return request({
+    url: '/data/market/dataApis/' + data.id,
+    method: 'put',
+    data: data
+  })
+}

datax-ui/src/views/market/apimask/ApiMaskList.vue

+<template>
+  <div>
+    <el-card class="box-card" shadow="always">
+      <el-form :model="queryParams" ref="queryForm" :inline="true">
+        <el-form-item label="脱敏名称" prop="maskName">
+          <el-input
+            v-model="queryParams.maskName"
+            placeholder="请输入脱敏名称"
+            clearable
+            size="small"
+            @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 type="flex" justify="space-between">
+        <el-col :span="12">
+          <el-button-group>
+            <el-button
+              type="primary"
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAdd"
+              v-hasPerm="['market:apimask:add']"
+            >新增</el-button>
+            <el-button
+              type="success"
+              icon="el-icon-edit-outline"
+              size="mini"
+              :disabled="single"
+              @click="handleEdit"
+              v-hasPerm="['market:apimask:edit']"
+            >修改</el-button>
+            <el-button
+              type="info"
+              icon="el-icon-view"
+              size="mini"
+              :disabled="single"
+              @click="handleDetail"
+              v-hasPerm="['market:apimask:detail']"
+            >详情</el-button>
+            <el-button
+              type="danger"
+              icon="el-icon-delete"
+              size="mini"
+              :disabled="multiple"
+              @click="handleBatchDelete"
+              v-hasPerm="['market:apimask:remove']"
+            >删除</el-button>
+          </el-button-group>
+        </el-col>
+        <el-col :span="12">
+          <div class="right-toolbar">
+            <el-tooltip content="密度" effect="dark" placement="top">
+              <el-dropdown trigger="click" @command="handleCommand">
+                <el-button circle size="mini">
+                  <svg-icon class-name="size-icon" icon-class="colum-height" />
+                </el-button>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="medium">正常</el-dropdown-item>
+                  <el-dropdown-item command="small">中等</el-dropdown-item>
+                  <el-dropdown-item command="mini">紧凑</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </el-tooltip>
+            <el-tooltip content="刷新" effect="dark" placement="top">
+              <el-button circle size="mini" @click="handleRefresh">
+                <svg-icon class-name="size-icon" icon-class="shuaxin" />
+              </el-button>
+            </el-tooltip>
+            <el-tooltip content="列设置" effect="dark" placement="top">
+              <el-popover placement="bottom" width="100" trigger="click">
+                <el-checkbox-group v-model="checkedTableColumns" @change="handleCheckedColsChange">
+                  <el-checkbox
+                    v-for="(item, index) in tableColumns"
+                    :key="index"
+                    :label="item.prop"
+                  >{{ item.label }}</el-checkbox>
+                </el-checkbox-group>
+                <span slot="reference">
+                  <el-button circle size="mini">
+                    <svg-icon class-name="size-icon" icon-class="shezhi" />
+                  </el-button>
+                </span>
+              </el-popover>
+            </el-tooltip>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-table
+        v-loading="loading"
+        :data="apiMaskList"
+        @selection-change="handleSelectionChange"
+        border
+        tooltip-effect="dark"
+        :size="tableSize"
+        :height="tableHeight"
+        style="width: 100%;margin: 15px 0;"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="序号" width="55" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.$index +1 }}</span>
+          </template>
+        </el-table-column>
+        <template v-for="(item, index) in tableColumns">
+          <el-table-column
+            v-if="item.show"
+            :prop="item.prop"
+            :label="item.label"
+            :key="index"
+            :formatter="item.formatter"
+            align="center"
+            show-overflow-tooltip
+          />
+        </template>
+        <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-outline"
+              @click="handleEdit(scope.row)"
+              v-hasPerm="['market:apimask:edit']"
+            >修改</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleDetail(scope.row)"
+              v-hasPerm="['market:apimask:detail']"
+            >详情</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPerm="['market:apimask:remove']"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page.sync="queryParams.pageNum"
+        :page-size.sync="queryParams.pageSize"
+        :total="total"
+      ></el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { pageApiMask, delApiMask, delApiMasks } from '@/api/market/apimask'
+
+export default {
+  name: 'ApiMaskList',
+  data () {
+    return {
+      tableHeight: document.body.offsetHeight - 340 + 'px',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 表格头
+      tableColumns: [
+        { prop: 'maskName', label: '脱敏名称', show: true },
+        {
+          prop: 'status',
+          label: '状态',
+          show: true,
+          formatter: this.statusFormatter
+        },
+        { prop: 'createTime', label: '创建时间', show: true }
+      ],
+      // 默认选择中表格头
+      checkedTableColumns: [],
+      tableSize: 'medium',
+      // 数据集表格数据
+      apiMaskList: [],
+      // 总数据条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        maskName: ''
+      }
+    }
+  },
+  created () {
+    this.getList()
+    this.initCols()
+  },
+  methods: {
+    /** 查询数据Api脱敏列表 */
+    getList () {
+      this.loading = true
+      pageApiMask(this.queryParams).then(response => {
+        this.loading = false
+        if (response.success) {
+          const { data } = response
+          this.apiMaskList = data.data
+          this.total = data.total
+        }
+      })
+    },
+    initCols () {
+      this.checkedTableColumns = this.tableColumns.map(col => col.prop)
+    },
+    handleCheckedColsChange (val) {
+      this.tableColumns.forEach(col => {
+        if (!this.checkedTableColumns.includes(col.prop)) {
+          col.show = false
+        } else {
+          col.show = true
+        }
+      })
+    },
+    handleCommand (command) {
+      this.tableSize = command
+    },
+    /** 搜索按钮操作 */
+    handleQuery () {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery () {
+      this.$refs['queryForm'].resetFields()
+      this.handleQuery()
+    },
+    /** 刷新列表 */
+    handleRefresh () {
+      this.getList()
+    },
+    /** 多选框选中数据 */
+    handleSelectionChange (selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd () {
+      this.showOptions.data = {}
+      this.showOptions.showList = false
+      this.showOptions.showAdd = true
+      this.showOptions.showEdit = false
+      this.showOptions.showDetail = false
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 修改按钮操作 */
+    handleEdit (row) {
+      this.showOptions.data.id = row.id || this.ids[0]
+      this.showOptions.showList = false
+      this.showOptions.showAdd = false
+      this.showOptions.showEdit = true
+      this.showOptions.showDetail = false
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 详情按钮操作 */
+    handleDetail (row) {
+      this.showOptions.data.id = row.id || this.ids[0]
+      this.showOptions.showList = false
+      this.showOptions.showAdd = false
+      this.showOptions.showEdit = false
+      this.showOptions.showDetail = true
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 删除按钮操作 */
+    handleDelete (row) {
+      this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        delApiMask(row.id)
+      }).then(() => {
+        this.$message.success('删除成功')
+        this.getList()
+      }).catch(() => {
+      })
+    },
+    /** 批量删除按钮操作 */
+    handleBatchDelete () {
+      if (!this.ids.length) {
+        this.$message({
+          message: '请先选择需要操作的数据',
+          type: 'warning'
+        })
+      }
+      this.$message.warning('不支持批量删除')
+    },
+    handleSizeChange (val) {
+      console.log(`每页 ${val} 条`)
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange (val) {
+      console.log(`当前页: ${val}`)
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    statusFormatter (row, column, cellValue, index) {
+      let status = row.status
+      let status_dictText = row.status_dictText
+      if (status === '0') {
+        return <el-tag type="warning">{status_dictText}</el-tag>
+      } else {
+        return <el-tag type="success">{status_dictText}</el-tag>
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right-toolbar {
+  float: right;
+}
+</style>

datax-ui/src/views/market/apimask/index.vue

+<template>
+  <div class="app-container">
+    <transition name="el-zoom-in-center">
+      <api-mask-list v-if="options.showList" @showCard="showCard"></api-mask-list>
+    </transition>
+    <transition name="el-zoom-in-top">
+      <api-mask-add v-if="options.showAdd" :data="options.data" @showCard="showCard"></api-mask-add>
+    </transition>
+    <transition name="el-zoom-in-top">
+      <api-mask-edit v-if="options.showEdit" :data="options.data" @showCard="showCard"></api-mask-edit>
+    </transition>
+    <transition name="el-zoom-in-bottom">
+      <api-mask-detail v-if="options.showDetail" :data="options.data" @showCard="showCard"></api-mask-detail>
+    </transition>
+  </div>
+</template>
+
+<script>
+import ApiMaskList from './ApiMaskList'
+import ApiMaskAdd from './ApiMaskAdd'
+import ApiMaskEdit from './ApiMaskEdit'
+import ApiMaskDetail from './ApiMaskDetail'
+
+export default {
+  name: 'ApiMask',
+  components: { ApiMaskList, ApiMaskAdd, ApiMaskEdit, ApiMaskDetail },
+  data () {
+    return {
+      options: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      }
+    }
+  },
+  methods: {
+    showCard (data) {
+      Object.assign(this.options, data)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

datax-ui/src/views/market/dataapi/DataApiAdd.vue

+<template>
+  <div>
+    <el-card class="box-card" shadow="always">
+      <div slot="header" class="clearfix">
+        <span>{{ title }}</span>
+        <el-button-group style="float: right;">
+          <el-button size="mini" icon="el-icon-plus" round @click="submitForm" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled">{{loadingOptions.loadingText}}</el-button>
+          <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
+        </el-button-group>
+      </div>
+      <div :style="classCardbody">
+        <el-steps :active="active" finish-status="success" align-center>
+          <el-step title="属性配置"></el-step>
+          <el-step title="执行配置"></el-step>
+          <el-step title="参数配置"></el-step>
+        </el-steps>
+        <el-form ref="form1" :model="form1" :rules="rules1" label-width="80px" v-if="active == 1">
+          <el-form-item label="API名称" prop="apiName">
+            <el-input v-model="form1.apiName" placeholder="请输入API名称" />
+          </el-form-item>
+          <el-form-item label="API版本" prop="apiVersion">
+            <el-input v-model="form1.apiVersion" placeholder="请输入API版本" />
+          </el-form-item>
+          <el-form-item label="API路径" prop="apiUrl">
+            <el-input v-model="form1.apiUrl" placeholder="请输入API路径" />
+          </el-form-item>
+          <el-form-item label="请求方式" prop="reqMethod">
+            <el-select v-model="form1.reqMethod" placeholder="请选择请求方式">
+              <el-option
+                v-for="dict in reqMethodOptions"
+                :key="dict.id"
+                :label="dict.itemValue"
+                :value="dict.itemText"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="返回格式" prop="resType">
+            <el-select v-model="form1.resType" placeholder="请选择返回格式">
+              <el-option
+                v-for="dict in resTypeOptions"
+                :key="dict.id"
+                :label="dict.itemValue"
+                :value="dict.itemText"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="IP黑名单" prop="deny">
+            <el-input v-model="form1.deny" type="textarea" placeholder="请输入IP黑名单多个用，隔开" />
+          </el-form-item>
+          <el-form-item label="是否限流" prop="rateLimit">
+            <el-radio-group v-model="form1.rateLimit">
+              <el-radio
+                v-for="dict in rateLimitOptions"
+                :key="dict.id"
+                :label="dict.itemText"
+              >{{dict.itemValue}}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="请求次数" prop="times" v-if="form1.rateLimit === '1'">
+            <el-input-number v-model="form1.times" controls-position="right" :min="1" />
+          </el-form-item>
+          <el-form-item label="请求时间范围" prop="seconds" v-if="form1.rateLimit === '1'">
+            <el-input-number v-model="form1.seconds" controls-position="right" :min="1"/>
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="form1.status">
+              <el-radio
+                v-for="dict in statusOptions"
+                :key="dict.id"
+                :label="dict.itemText"
+              >{{dict.itemValue}}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form1.remark" type="textarea" placeholder="请输入内容" />
+          </el-form-item>
+        </el-form>
+        <el-form ref="form2" :model="form2" :rules="rules2" label-width="80px" v-if="active == 2">
+          <el-form-item label="数据源" prop="sourceId">
+            <el-select v-model="form2.sourceId" placeholder="请选择数据源">
+              <el-option
+                v-for="source in sourceOptions"
+                :key="source.id"
+                :label="source.sourceName"
+                :value="source.id"
+                :disabled="source.status === '0'"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="配置方式" prop="configType">
+            <el-select v-model="form2.configType" placeholder="请选择配置方式">
+              <el-option
+                v-for="dict in configTypeOptions"
+                :key="dict.id"
+                :label="dict.itemValue"
+                :value="dict.itemText"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <el-form ref="form3" :model="form3" :rules="rules3" label-width="80px" v-if="active == 3">
+        </el-form>
+        <el-button style="margin-top: 12px;" @click="handleNextStep" v-if="active < 3">下一步</el-button>
+        <el-button style="margin-top: 12px;" @click="handleLastStep" v-if="active > 1">上一步</el-button>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { addDataSet } from '@/api/factory/dataset'
+import { listDataSource, queryByPage } from '@/api/factory/datasource'
+import sqlFormatter from 'sql-formatter'
+import SqlEditor from '@/components/SqlEditor'
+
+export default {
+  name: 'DataApiAdd',
+  components: {
+    SqlEditor
+  },
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      classCardbody: {
+        overflow: 'auto',
+        height: document.body.offsetHeight - 240 + 'px'
+      },
+      title: '数据集新增',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 保存按钮
+      loadingOptions: {
+        loading: false,
+        loadingText: '保存',
+        isDisabled: false
+      },
+      active: 1,
+      // 表单参数
+      form1: {
+        id: undefined,
+        apiName: undefined,
+        apiVersion: undefined,
+        apiUrl: undefined,
+        reqMethod: undefined,
+        resType: undefined,
+        deny: undefined,
+        rateLimit: '1',
+        times: 5,
+        seconds: 60,
+        status: '1',
+        remark: undefined,
+        executeConfig: {},
+        reqParams: [],
+        resParams: []
+      },
+      // 表单校验
+      rules1: {
+        apiName: [
+          { required: true, message: 'API名称不能为空', trigger: 'blur' }
+        ],
+        apiVersion: [
+          { required: true, message: 'API版本不能为空', trigger: 'blur' }
+        ],
+        apiUrl: [
+          { required: true, message: 'API路径不能为空', trigger: 'blur' }
+        ],
+        reqMethod: [
+          { required: true, message: '请求方式不能为空', trigger: 'blur' }
+        ],
+        resType: [
+          { required: true, message: '返回格式不能为空', trigger: 'blur' }
+        ]
+      },
+      form2: {
+        sourceId: undefined,
+        configType: undefined
+      },
+      rules2: {},
+      form3: {},
+      rules3: {},
+      // 请求方式数据字典
+      reqMethodOptions: [],
+      // 返回格式数据字典
+      resTypeOptions: [],
+      // 是否限流数据字典
+      rateLimitOptions: [],
+      // 状态数据字典
+      statusOptions: [],
+      // 数据源数据字典
+      sourceOptions: [],
+      // 配置方式数据字典
+      configTypeOptions: []
+    }
+  },
+  created () {
+    this.getDicts('data_req_method').then(response => {
+      if (response.success) {
+        this.reqMethodOptions = response.data
+      }
+    })
+    this.getDicts('data_res_type').then(response => {
+      if (response.success) {
+        this.resTypeOptions = response.data
+      }
+    })
+    this.getDicts('sys_yes_no').then(response => {
+      if (response.success) {
+        this.rateLimitOptions = response.data
+      }
+    })
+    this.getDicts('sys_common_status').then(response => {
+      if (response.success) {
+        this.statusOptions = response.data
+      }
+    })
+    this.getDataSourceList()
+    this.getDicts('data_config_type').then(response => {
+      if (response.success) {
+        this.configTypeOptions = response.data
+      }
+    })
+  },
+  methods: {
+    showCard () {
+      this.$emit('showCard', this.showOptions)
+    },
+    getDataSourceList () {
+      listDataSource().then(response => {
+        if (response.success) {
+          this.sourceOptions = response.data
+        }
+      })
+    },
+    /** 步骤条下一步 */
+    handleNextStep () {
+      if (this.active === 1) {
+        this.$refs['form1'].validate(valid => {
+          if (valid) {
+            this.active++
+          }
+        })
+      } else if (this.active === 2) {
+        this.$refs['form2'].validate(valid => {
+          if (valid) {
+            this.active++
+          }
+        })
+      }
+    },
+    /** 步骤条上一步 */
+    handleLastStep () {
+      this.active--
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs['form3'].validate(valid => {
+        if (valid) {
+          this.loadingOptions.loading = true
+          this.loadingOptions.loadingText = '保存中...'
+          this.loadingOptions.isDisabled = true
+          addDataSet(this.form).then(response => {
+            if (response.success) {
+              this.$message.success('保存成功')
+              setTimeout(() => {
+                // 2秒后跳转列表页
+                this.$emit('showCard', this.showOptions)
+              }, 2000)
+            } else {
+              this.$message.error('保存失败')
+              this.loadingOptions.loading = false
+              this.loadingOptions.loadingText = '保存'
+              this.loadingOptions.isDisabled = false
+            }
+          }).catch(error => {
+            this.$message.error(error.data.msg || '保存失败')
+            this.loadingOptions.loading = false
+            this.loadingOptions.loadingText = '保存'
+            this.loadingOptions.isDisabled = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

datax-ui/src/views/market/dataapi/DataApiDetail.vue

+<template>
+  <div>
+    <el-card class="box-card" shadow="always">
+      <div slot="header" class="clearfix">
+        <span>{{ title }}</span>
+        <el-button-group style="float: right;">
+          <el-button size="mini" icon="el-icon-s-data" round @click="dataPreview">数据预览</el-button>
+          <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
+        </el-button-group>
+      </div>
+      <div :style="classCardbody">
+        <el-form ref="form" :model="form" label-width="80px" disabled>
+          <el-form-item label="数据源" prop="sourceId">
+            <el-select v-model="form.sourceId" placeholder="请选择数据源">
+              <el-option
+                v-for="source in sourceOptions"
+                :key="source.id"
+                :label="source.sourceName"
+                :value="source.id"
+                :disabled="source.status === '0'"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="数据集名称" prop="setName">
+            <el-input v-model="form.setName" placeholder="请输入数据集名称" />
+          </el-form-item>
+          <el-form-item label="数据集sql" prop="setSql">
+            <sql-editor
+              ref="sqleditor"
+              :value="form.setSql"
+              :readOnly="true"
+              style="height: 300px;"
+            ></sql-editor>
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="form.status">
+              <el-radio
+                v-for="dict in statusOptions"
+                :key="dict.id"
+                :label="dict.itemText"
+              >{{dict.itemValue}}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          </el-form-item>
+        </el-form>
+        <el-drawer
+          :visible.sync="drawer"
+          direction="btt"
+          :with-header="false">
+          <el-table :data="previewData.dataList" stripe border
+                    :max-height="200"
+                    style="width: 100%; margin: 15px 0;">
+            <el-table-column label="序号" width="55" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.$index + 1 }}</span>
+              </template>
+            </el-table-column>
+            <template v-for="(column, index) in previewData.columnList">
+              <el-table-column
+                :prop="column"
+                :label="column"
+                :key="index"
+                align="center"
+                show-overflow-tooltip
+              />
+            </template>
+          </el-table>
+          <el-pagination
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page.sync="previewData.pageNum"
+            :page-size.sync="previewData.pageSize"
+            :total="previewData.dataTotal"
+          ></el-pagination>
+        </el-drawer>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getDataSet } from '@/api/factory/dataset'
+import { listDataSource, queryByPage } from '@/api/factory/datasource'
+import SqlEditor from '@/components/SqlEditor'
+
+export default {
+  name: 'DataApiDetail',
+  components: {
+    SqlEditor
+  },
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      classCardbody: {
+        overflow: 'auto',
+        height: document.body.offsetHeight - 240 + 'px'
+      },
+      title: '数据集详情',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 表单参数
+      form: {},
+      // 状态数据字典
+      statusOptions: [],
+      // 数据源数据字典
+      sourceOptions: [],
+      drawer: false,
+      previewData: {
+        dataList: [],
+        columnList: [],
+        pageNum: 1,
+        pageSize: 20,
+        dataTotal: 0
+      }
+    }
+  },
+  created () {
+    console.log('id:' + this.data.id)
+    this.getDicts('sys_common_status').then(response => {
+      if (response.success) {
+        this.statusOptions = response.data
+      }
+    })
+    this.getDataSourceList()
+    this.getDataSet(this.data.id)
+  },
+  methods: {
+    showCard () {
+      this.$emit('showCard', this.showOptions)
+    },
+    getDataSourceList () {
+      listDataSource().then(response => {
+        if (response.success) {
+          this.sourceOptions = response.data
+        }
+      })
+    },
+    /** 获取详情 */
+    getDataSet: function (id) {
+      getDataSet(id).then(response => {
+        if (response.success) {
+          this.form = response.data
+          this.$refs.sqleditor.editor.setValue(this.form.setSql)
+        }
+      })
+    },
+    dataPreview () {
+      if (!this.form.sourceId) {
+        return
+      }
+      if (!this.form.setSql) {
+        return
+      }
+      let data = {}
+      data.dataSourceId = this.form.sourceId
+      data.sql = this.form.setSql
+      data.pageNum = this.previewData.pageNum
+      data.pageSize = this.previewData.pageSize
+      queryByPage(data).then(response => {
+        if (response.success) {
+          const { data } = response
+          let dataList = data.data || []
+          let columnList = []
+          if (dataList.length > 0) {
+            columnList = Object.keys(dataList[0])
+          }
+          this.previewData.dataList = dataList
+          this.previewData.columnList = columnList
+          this.previewData.dataTotal = data.total
+          this.drawer = true
+        }
+      })
+    },
+    handleSizeChange (val) {
+      this.previewData.pageNum = 1
+      this.previewData.pageSize = val
+      this.dataPreview()
+    },
+    handleCurrentChange (val) {
+      this.previewData.pageNum = val
+      this.dataPreview()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

datax-ui/src/views/market/dataapi/DataApiEdit.vue

+<template>
+  <div>
+    <el-card class="box-card" shadow="always">
+      <div slot="header" class="clearfix">
+        <span>{{ title }}</span>
+        <el-button-group style="float: right;">
+          <el-button size="mini" icon="el-icon-plus" round @click="submitForm" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled">{{loadingOptions.loadingText}}</el-button>
+          <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
+        </el-button-group>
+      </div>
+      <div :style="classCardbody">
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+          <el-form-item label="数据源" prop="sourceId">
+            <el-select v-model="form.sourceId" placeholder="请选择数据源">
+              <el-option
+                v-for="source in sourceOptions"
+                :key="source.id"
+                :label="source.sourceName"
+                :value="source.id"
+                :disabled="source.status === '0'"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="数据集名称" prop="setName">
+            <el-input v-model="form.setName" placeholder="请输入数据集名称" />
+          </el-form-item>
+          <el-form-item label="数据集sql" prop="setSql">
+            <sql-editor
+              ref="sqleditor"
+              :value="form.setSql"
+              @changeTextarea="changeTextarea($event)"
+              style="height: 300px;"
+            ></sql-editor>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="mini" type="primary" @click="formaterSql">Sql格式化</el-button>
+            <el-button size="mini" type="primary" @click="dataPreview">预览</el-button>
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="form.status">
+              <el-radio
+                v-for="dict in statusOptions"
+                :key="dict.id"
+                :label="dict.itemText"
+              >{{dict.itemValue}}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          </el-form-item>
+        </el-form>
+        <el-drawer
+          :visible.sync="drawer"
+          direction="btt"
+          :with-header="false">
+          <el-table :data="previewData.dataList" stripe border
+                    :max-height="200"
+                    style="width: 100%; margin: 15px 0;">
+            <el-table-column label="序号" width="55" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.$index + 1 }}</span>
+              </template>
+            </el-table-column>
+            <template v-for="(column, index) in previewData.columnList">
+              <el-table-column
+                :prop="column"
+                :label="column"
+                :key="index"
+                align="center"
+                show-overflow-tooltip
+              />
+            </template>
+          </el-table>
+          <el-pagination
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page.sync="previewData.pageNum"
+            :page-size.sync="previewData.pageSize"
+            :total="previewData.dataTotal"
+          ></el-pagination>
+        </el-drawer>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getDataSet, updateDataSet } from '@/api/factory/dataset'
+import { listDataSource, queryByPage } from '@/api/factory/datasource'
+import sqlFormatter from 'sql-formatter'
+import SqlEditor from '@/components/SqlEditor'
+
+export default {
+  name: 'DataApiEdit',
+  components: {
+    SqlEditor
+  },
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      classCardbody: {
+        overflow: 'auto',
+        height: document.body.offsetHeight - 240 + 'px'
+      },
+      title: '数据集编辑',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 保存按钮
+      loadingOptions: {
+        loading: false,
+        loadingText: '保存',
+        isDisabled: false
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        setName: [
+          { required: true, message: '数据集名称不能为空', trigger: 'blur' }
+        ]
+      },
+      // 状态数据字典
+      statusOptions: [],
+      // 数据源数据字典
+      sourceOptions: [],
+      drawer: false,
+      previewData: {
+        dataList: [],
+        columnList: [],
+        pageNum: 1,
+        pageSize: 20,
+        dataTotal: 0
+      }
+    }
+  },
+  created () {
+    console.log('id:' + this.data.id)
+    this.getDicts('sys_common_status').then(response => {
+      if (response.success) {
+        this.statusOptions = response.data
+      }
+    })
+    this.getDataSourceList()
+    this.getDataSet(this.data.id)
+  },
+  methods: {
+    showCard () {
+      this.$emit('showCard', this.showOptions)
+    },
+    getDataSourceList () {
+      listDataSource().then(response => {
+        if (response.success) {
+          this.sourceOptions = response.data
+        }
+      })
+    },
+    /** 获取详情 */
+    getDataSet: function (id) {
+      getDataSet(id).then(response => {
+        if (response.success) {
+          this.form = response.data
+          this.$refs.sqleditor.editor.setValue(this.form.setSql)
+        }
+      })
+    },
+    // 绑定编辑器value值的变化
+    changeTextarea (val) {
+      this.$set(this.form, 'setSql', val)
+    },
+    formaterSql (val) {
+      this.$refs.sqleditor.editor.setValue(sqlFormatter.format(this.$refs.sqleditor.editor.getValue()))
+    },
+    dataPreview () {
+      if (!this.form.sourceId) {
+        return
+      }
+      if (!this.form.setSql) {
+        return
+      }
+      let data = {}
+      data.dataSourceId = this.form.sourceId
+      data.sql = this.form.setSql
+      data.pageNum = this.previewData.pageNum
+      data.pageSize = this.previewData.pageSize
+      queryByPage(data).then(response => {
+        if (response.success) {
+          const { data } = response
+          let dataList = data.data || []
+          let columnList = []
+          if (dataList.length > 0) {
+            columnList = Object.keys(dataList[0])
+          }
+          this.previewData.dataList = dataList
+          this.previewData.columnList = columnList
+          this.previewData.dataTotal = data.total
+          this.drawer = true
+        }
+      })
+    },
+    handleSizeChange (val) {
+      this.previewData.pageNum = 1
+      this.previewData.pageSize = val
+      this.dataPreview()
+    },
+    handleCurrentChange (val) {
+      this.previewData.pageNum = val
+      this.dataPreview()
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.loadingOptions.loading = true
+          this.loadingOptions.loadingText = '保存中...'
+          this.loadingOptions.isDisabled = true
+          updateDataSet(this.form).then(response => {
+            if (response.success) {
+              this.$message.success('保存成功')
+              setTimeout(() => {
+                // 2秒后跳转列表页
+                this.$emit('showCard', this.showOptions)
+              }, 2000)
+            } else {
+              this.$message.error('保存失败')
+              this.loadingOptions.loading = false
+              this.loadingOptions.loadingText = '保存'
+              this.loadingOptions.isDisabled = false
+            }
+          }).catch(error => {
+            this.$message.error(error.data.msg || '保存失败')
+            this.loadingOptions.loading = false
+            this.loadingOptions.loadingText = '保存'
+            this.loadingOptions.isDisabled = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

datax-ui/src/views/market/dataapi/DataApiList.vue

+<template>
+  <div>
+    <el-card class="box-card" shadow="always">
+      <el-form :model="queryParams" ref="queryForm" :inline="true">
+        <el-form-item label="API名称" prop="apiName">
+          <el-input
+            v-model="queryParams.apiName"
+            placeholder="请输入API名称"
+            clearable
+            size="small"
+            @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 type="flex" justify="space-between">
+        <el-col :span="12">
+          <el-button-group>
+            <el-button
+              type="primary"
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAdd"
+              v-hasPerm="['market:dataapi:add']"
+            >新增</el-button>
+            <el-button
+              type="success"
+              icon="el-icon-edit-outline"
+              size="mini"
+              :disabled="single"
+              @click="handleEdit"
+              v-hasPerm="['market:dataapi:edit']"
+            >修改</el-button>
+            <el-button
+              type="info"
+              icon="el-icon-view"
+              size="mini"
+              :disabled="single"
+              @click="handleDetail"
+              v-hasPerm="['market:dataapi:detail']"
+            >详情</el-button>
+            <el-button
+              type="danger"
+              icon="el-icon-delete"
+              size="mini"
+              :disabled="multiple"
+              @click="handleBatchDelete"
+              v-hasPerm="['market:dataapi:remove']"
+            >删除</el-button>
+          </el-button-group>
+        </el-col>
+        <el-col :span="12">
+          <div class="right-toolbar">
+            <el-tooltip content="密度" effect="dark" placement="top">
+              <el-dropdown trigger="click" @command="handleCommand">
+                <el-button circle size="mini">
+                  <svg-icon class-name="size-icon" icon-class="colum-height" />
+                </el-button>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="medium">正常</el-dropdown-item>
+                  <el-dropdown-item command="small">中等</el-dropdown-item>
+                  <el-dropdown-item command="mini">紧凑</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </el-tooltip>
+            <el-tooltip content="刷新" effect="dark" placement="top">
+              <el-button circle size="mini" @click="handleRefresh">
+                <svg-icon class-name="size-icon" icon-class="shuaxin" />
+              </el-button>
+            </el-tooltip>
+            <el-tooltip content="列设置" effect="dark" placement="top">
+              <el-popover placement="bottom" width="100" trigger="click">
+                <el-checkbox-group v-model="checkedTableColumns" @change="handleCheckedColsChange">
+                  <el-checkbox
+                    v-for="(item, index) in tableColumns"
+                    :key="index"
+                    :label="item.prop"
+                  >{{ item.label }}</el-checkbox>
+                </el-checkbox-group>
+                <span slot="reference">
+                  <el-button circle size="mini">
+                    <svg-icon class-name="size-icon" icon-class="shezhi" />
+                  </el-button>
+                </span>
+              </el-popover>
+            </el-tooltip>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-table
+        v-loading="loading"
+        :data="dataApiList"
+        @selection-change="handleSelectionChange"
+        border
+        tooltip-effect="dark"
+        :size="tableSize"
+        :height="tableHeight"
+        style="width: 100%;margin: 15px 0;"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="序号" width="55" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.$index +1 }}</span>
+          </template>
+        </el-table-column>
+        <template v-for="(item, index) in tableColumns">
+          <el-table-column
+            v-if="item.show"
+            :prop="item.prop"
+            :label="item.label"
+            :key="index"
+            :formatter="item.formatter"
+            align="center"
+            show-overflow-tooltip
+          />
+        </template>
+        <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-outline"
+              @click="handleEdit(scope.row)"
+              v-hasPerm="['market:dataapi:edit']"
+            >修改</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleDetail(scope.row)"
+              v-hasPerm="['market:dataapi:detail']"
+            >详情</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPerm="['market:dataapi:remove']"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page.sync="queryParams.pageNum"
+        :page-size.sync="queryParams.pageSize"
+        :total="total"
+      ></el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { pageDataApi, delDataApi, delDataApis } from '@/api/market/dataapi'
+
+export default {
+  name: 'DataApiList',
+  data () {
+    return {
+      tableHeight: document.body.offsetHeight - 340 + 'px',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 表格头
+      tableColumns: [
+        { prop: 'apiName', label: 'API名称', show: true },
+        { prop: 'apiVersion', label: 'API版本', show: true },
+        { prop: 'apiUrl', label: 'API路径', show: true },
+        { prop: 'reqMethod', label: '请求类型', show: true },
+        { prop: 'resType', label: '返回格式', show: true },
+        {
+          prop: 'status',
+          label: '状态',
+          show: true,
+          formatter: this.statusFormatter
+        },
+        { prop: 'createTime', label: '创建时间', show: true }
+      ],
+      // 默认选择中表格头
+      checkedTableColumns: [],
+      tableSize: 'medium',
+      // 数据集表格数据
+      dataApiList: [],
+      // 总数据条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        apiName: ''
+      }
+    }
+  },
+  created () {
+    this.getList()
+    this.initCols()
+  },
+  methods: {
+    /** 查询数据Api列表 */
+    getList () {
+      this.loading = true
+      pageDataApi(this.queryParams).then(response => {
+        this.loading = false
+        if (response.success) {
+          const { data } = response
+          this.dataApiList = data.data
+          this.total = data.total
+        }
+      })
+    },
+    initCols () {
+      this.checkedTableColumns = this.tableColumns.map(col => col.prop)
+    },
+    handleCheckedColsChange (val) {
+      this.tableColumns.forEach(col => {
+        if (!this.checkedTableColumns.includes(col.prop)) {
+          col.show = false
+        } else {
+          col.show = true
+        }
+      })
+    },
+    handleCommand (command) {
+      this.tableSize = command
+    },
+    /** 搜索按钮操作 */
+    handleQuery () {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery () {
+      this.$refs['queryForm'].resetFields()
+      this.handleQuery()
+    },
+    /** 刷新列表 */
+    handleRefresh () {
+      this.getList()
+    },
+    /** 多选框选中数据 */
+    handleSelectionChange (selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd () {
+      this.showOptions.data = {}
+      this.showOptions.showList = false
+      this.showOptions.showAdd = true
+      this.showOptions.showEdit = false
+      this.showOptions.showDetail = false
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 修改按钮操作 */
+    handleEdit (row) {
+      this.showOptions.data.id = row.id || this.ids[0]
+      this.showOptions.showList = false
+      this.showOptions.showAdd = false
+      this.showOptions.showEdit = true
+      this.showOptions.showDetail = false
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 详情按钮操作 */
+    handleDetail (row) {
+      this.showOptions.data.id = row.id || this.ids[0]
+      this.showOptions.showList = false
+      this.showOptions.showAdd = false
+      this.showOptions.showEdit = false
+      this.showOptions.showDetail = true
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 删除按钮操作 */
+    handleDelete (row) {
+      this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        delDataApi(row.id)
+      }).then(() => {
+        this.$message.success('删除成功')
+        this.getList()
+      }).catch(() => {
+      })
+    },
+    /** 批量删除按钮操作 */
+    handleBatchDelete () {
+      if (!this.ids.length) {
+        this.$message({
+          message: '请先选择需要操作的数据',
+          type: 'warning'
+        })
+      }
+      this.$message.warning('不支持批量删除')
+    },
+    handleSizeChange (val) {
+      console.log(`每页 ${val} 条`)
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange (val) {
+      console.log(`当前页: ${val}`)
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    statusFormatter (row, column, cellValue, index) {
+      let status = row.status
+      let status_dictText = row.status_dictText
+      if (status === '0') {
+        return <el-tag type="warning">{status_dictText}</el-tag>
+      } else {
+        return <el-tag type="success">{status_dictText}</el-tag>
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right-toolbar {
+  float: right;
+}
+</style>

datax-ui/src/views/market/dataapi/index.vue

+<template>
+  <div class="app-container">
+    <transition name="el-zoom-in-center">
+      <data-api-list v-if="options.showList" @showCard="showCard"></data-api-list>
+    </transition>
+    <transition name="el-zoom-in-top">
+      <data-api-add v-if="options.showAdd" :data="options.data" @showCard="showCard"></data-api-add>
+    </transition>
+    <transition name="el-zoom-in-top">
+      <data-api-edit v-if="options.showEdit" :data="options.data" @showCard="showCard"></data-api-edit>
+    </transition>
+    <transition name="el-zoom-in-bottom">
+      <data-api-detail v-if="options.showDetail" :data="options.data" @showCard="showCard"></data-api-detail>
+    </transition>
+  </div>
+</template>
+
+<script>
+import DataApiList from './DataApiList'
+import DataApiAdd from './DataApiAdd'
+import DataApiEdit from './DataApiEdit'
+import DataApiDetail from './DataApiDetail'
+
+export default {
+  name: 'DataApi',
+  components: { DataApiList, DataApiAdd, DataApiEdit, DataApiDetail },
+  data () {
+    return {
+      options: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      }
+    }
+  },
+  methods: {
+    showCard (data) {
+      Object.assign(this.options, data)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>