manager/zyplayer-doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据互导功能开发

Browse Source
This commit is contained in:
暮光：城中城
2019-10-06 18:19:27 +08:00
parent 9b4decf68a
commit aebc6d2d8b
21 changed files with 902 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

264
zyplayer-doc-ui/db-ui/src/views/data/TransferData.vue Normal file
View File

@@ -0,0 +1,264 @@
<template>
<div class="data-transfer-vue">
<div style="padding: 10px;height: 100%;box-sizing: border-box;background: #fafafa;">
<el-card style="margin: 10px;">
<div slot="header" class="clearfix">
<span>数据互导工具</span>
<a target="_blank" title="点击查看如何使用" href="http://doc.zyplayer.com/zyplayer-doc-manage/open-wiki.html?pageId=128&space=23f3f59a60824d21af9f7c3bbc9bc3cb"><i class="el-icon-info" style="color: #999;"></i></a>
</div>
<div style="margin-bottom: 10px;text-align: right;">
<el-button type="success" icon="el-icon-plus" v-on:click="createNewTask">新建</el-button>
<el-button type="primary" v-on:click="loadGetTaskList">查询</el-button>
</div>
<el-table :data="taskList" stripe border style="width: 100%; margin-bottom: 5px;">
<el-table-column prop="id" label="ID" width="55"></el-table-column>
<el-table-column prop="name" label="任务名称"></el-table-column>
<!-- <el-table-column prop="queryDatasourceId" label="查询数据源">-->
<!-- <template slot-scope="scope">{{datasourceMap[scope.row.queryDatasourceId]}}</template>-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="storageDatasourceId" label="入库数据源">-->
<!-- <template slot-scope="scope">{{datasourceMap[scope.row.storageDatasourceId]}}</template>-->
<!-- </el-table-column>-->
<el-table-column label="条数查询">
<template slot-scope="scope">{{scope.row.needCount==1?'是':'否'}}</template>
</el-table-column>
<el-table-column prop="lastExecuteStatus" label="最后执行状态">
<template slot-scope="scope">
<el-tag v-if="scope.row.lastExecuteStatus==0">未执行</el-tag>
<el-tag type="info" v-else-if="scope.row.lastExecuteStatus==1">执行中</el-tag>
<el-tag type="success" v-else-if="scope.row.lastExecuteStatus==2">执行成功</el-tag>
<el-tag type="danger" v-else-if="scope.row.lastExecuteStatus==3">执行失败</el-tag>
<el-tag type="warning" v-else-if="scope.row.lastExecuteStatus==4">取消执行</el-tag>
</template>
</el-table-column>
<el-table-column prop="lastExecuteTime" label="最后执行时间"></el-table-column>
<el-table-column prop="createUserName" label="创建人"></el-table-column>
<el-table-column prop="createTime" label="创建时间"></el-table-column>
<el-table-column label="操作" width="290">
<template slot-scope="scope">
<el-button size="mini" type="primary" v-on:click="viewTask(scope.row.id)">查看</el-button>
<el-button size="mini" type="success" v-on:click="editTask(scope.row)">编辑</el-button>
<el-button size="mini" type="warning" v-on:click="executeTask(scope.row.id)">执行</el-button>
<el-button size="mini" type="danger" v-on:click="deleteTask(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
<!--任务编辑弹窗-->
<el-dialog :visible.sync="taskEditDialogVisible" width="900px" :close-on-click-modal="false">
<span slot="title" v-if="!!taskEditInfo.id">编辑任务</span>
<span slot="title" v-else>新建任务</span>
<el-form label-width="120px">
<el-form-item label="任务名称：">
<el-input v-model="taskEditInfo.name" placeholder="任务名称"></el-input>
</el-form-item>
<el-form-item label="查询数据源：">
<el-select v-model="taskEditInfo.queryDatasourceId" filterable placeholder="请选择查询数据源" style="width: 100%;">
<el-option v-for="item in datasourceOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="查询SQL：">
<pre id="querySqlEditor" style="width: 100%;height: 100px;margin: 0;"></pre>
</el-form-item>
<el-form-item label="总条数查询：">
<el-radio v-model="taskEditInfo.needCount" :label="0">不查询</el-radio>
<el-radio v-model="taskEditInfo.needCount" :label="1">自动查询</el-radio>
</el-form-item>
<el-form-item label="入库数据源：">
<el-select v-model="taskEditInfo.storageDatasourceId" filterable placeholder="请选择写入数据源" style="width: 100%;">
<el-option v-for="item in datasourceOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="入库SQL：">
<pre id="storageSqlEditor" style="width: 100%;height: 100px;margin: 0;"></pre>
<el-button v-on:click="autoFillStorageSql" style="margin-top: 10px;">智能填充</el-button>
</el-form-item>
</el-form>
<div style="text-align: center;">
<el-button type="primary" v-on:click="saveEditTask">保存</el-button>
</div>
</el-dialog>
<!--任务查看弹窗-->
<el-dialog :visible.sync="taskViewDialogVisible" width="80%">
<span slot="title">查看任务</span>
<el-form label-width="120px">
<el-form-item label="任务名称：">{{taskEditInfo.name}}</el-form-item>
<el-form-item label="最后执行状态：">
<el-tag v-if="taskEditInfo.lastExecuteStatus==0">未执行</el-tag>
<el-tag type="info" v-else-if="taskEditInfo.lastExecuteStatus==1">执行中</el-tag>
<el-tag type="success" v-else-if="taskEditInfo.lastExecuteStatus==2">执行成功</el-tag>
<el-tag type="danger" v-else-if="taskEditInfo.lastExecuteStatus==3">执行失败</el-tag>
<el-tag type="warning" v-else-if="taskEditInfo.lastExecuteStatus==4">取消执行</el-tag>
</el-form-item>
<el-form-item label="最后执行时间：">{{taskEditInfo.lastExecuteTime}}</el-form-item>
<el-form-item label="执行信息：">
<pre style="word-wrap: break-word;word-break: break-all;white-space: pre-wrap;line-height: 22px;">{{taskEditInfo.lastExecuteInfo}}</pre>
</el-form-item>
<el-form-item label="操作：" v-if="taskEditInfo.lastExecuteStatus==1">
<el-button type="danger" v-on:click="cancelTask">取消执行</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import '../../common/lib/ace/ace'
import '../../common/lib/ace/theme-monokai'
import '../../common/lib/ace/mode-sql'
import '../../common/lib/ace/ext-language_tools'
import '../../common/lib/ace/snippets/sql'
var app;
export default {
data() {
return {
// 数据源相关
datasourceOptions: [],
queryDatasourceId: "",
storageDatasourceId: "",
// 页面展示相关
taskList: [],
datasourceMap: {},
// 弹窗
taskViewDialogVisible: false,
taskEditDialogVisible: false,
taskEditInfo: {},
}
},
mounted: function () {
app = this;
this.loadDatasourceList();
},
methods: {
editTask(row) {
this.taskEditInfo = JSON.parse(JSON.stringify(row));
this.taskEditDialogVisible = true;
setTimeout(() => {
app.querySqlEditor = app.initAceEditor("querySqlEditor", 10);
app.storageSqlEditor = app.initAceEditor("storageSqlEditor", 10);
app.querySqlEditor.setValue(app.taskEditInfo.querySql, 1);
app.storageSqlEditor.setValue(app.taskEditInfo.storageSql, 1);
}, 200);
},
createNewTask() {
this.taskEditInfo = {querySql: '', storageSql: '', name: '', needCount: 1, queryDatasourceId: '', storageDatasourceId: ''};
this.taskEditDialogVisible = true;
setTimeout(() => {
app.querySqlEditor = app.initAceEditor("querySqlEditor", 10);
app.storageSqlEditor = app.initAceEditor("storageSqlEditor", 10);
app.querySqlEditor.setValue('', 1);
app.storageSqlEditor.setValue('', 1);
}, 200);
},
deleteTask(id) {
this.$confirm('确定要删除此任务吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.common.post(this.apilist1.transferUpdate, {id: id, delFlag: 1}, function (json) {
app.$message.success("删除成功");
app.loadGetTaskList();
});
}).catch(()=>{});
},
executeTask(id) {
this.$confirm('确定要执行一次此任务吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.common.post(this.apilist1.transferStart, {id: id}, function (json) {
app.$message.success("任务提交成功");
});
}).catch(()=>{});
},
saveEditTask() {
this.taskEditInfo.querySql = app.querySqlEditor.getValue();
this.taskEditInfo.storageSql = app.storageSqlEditor.getValue();
this.common.post(this.apilist1.transferUpdate, this.taskEditInfo, function (json) {
app.$message.success("保存成功");
app.taskEditDialogVisible = false;
app.loadGetTaskList();
});
},
viewTask(id) {
this.taskViewDialogVisible = true;
this.common.post(this.apilist1.transferDetail, {id: id}, function (json) {
app.taskEditInfo = json.data || {};
});
},
cancelTask() {
this.$confirm('确定要取消执行此任务吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.common.post(this.apilist1.transferCancel, {id: this.taskEditInfo.id}, function (json) {
app.$message.success("取消成功");
});
}).catch(()=>{});
},
loadGetTaskList() {
this.common.post(this.apilist1.transferList, {}, function (json) {
app.taskList = json.data || [];
});
},
autoFillStorageSql() {
var sqlStr = app.querySqlEditor.getValue();
this.common.post(this.apilist1.transferSqlColumns, {sql: sqlStr}, function (json) {
var resultData = json.data || [];
if (resultData.length <= 0) {
app.$message.error("查询的字段不明确，不能自动填充");
return;
}
var storageSql = "\n";
storageSql += "insert into TableName (\n";
for (var i = 0; i < resultData.length; i++) {
storageSql += "\t" + ((i === 0) ? "" : ",") + resultData[i] + "\n";
}
storageSql += ") values (\n";
for (var i = 0; i < resultData.length; i++) {
storageSql += "\t" + ((i === 0) ? "" : ",") + "#{" + resultData[i] + "}\n";
}
storageSql += ")\n\n";
app.storageSqlEditor.setValue(storageSql, 1);
});
},
loadDatasourceList() {
this.common.post(this.apilist1.datasourceList, {}, function (json) {
app.datasourceList = json.data || [];
var datasourceOptions = [], datasourceMap = {};
for (var i = 0; i < app.datasourceList.length; i++) {
datasourceMap[app.datasourceList[i].id] = app.datasourceList[i].cnName;
datasourceOptions.push({label: app.datasourceList[i].cnName, value: app.datasourceList[i].id});
}
app.datasourceMap = datasourceMap;
app.datasourceOptions = datasourceOptions;
app.loadGetTaskList();
});
},
initAceEditor(editor, minLines) {
return ace.edit(editor, {
theme: "ace/theme/monokai",
mode: "ace/mode/sql",
wrap: true,
autoScrollEditorIntoView: true,
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
minLines: minLines,
maxLines: 25,
});
},
}
}
</script>
<style>
.data-transfer-vue .el-button+.el-button {
margin-left: 4px;
}
</style>