zyplayer-doc/zyplayer-doc-ui/db-ui/src/views/data/Executor.vue

<template>
	<div class="data-executor-vue">
		<div style="padding: 0 10px 10px;height: 100%;box-sizing: border-box;">
			<el-card style="margin-bottom: 10px;">
				<ace-editor v-model="sqlExecutorContent" ref="sqlEditor" @init="sqlExecutorInit" lang="sql" theme="monokai"
										width="100%" height="500" :options="sqlEditorConfig" :source="executorSource"
										style="margin-bottom: 10px;">
				</ace-editor>
				<div>
					<el-button v-if="sqlExecuting" v-on:click="cancelExecutorSql" type="primary" plain size="small"
										 icon="el-icon-video-pause">取消执行
					</el-button>
					<el-tooltip v-else effect="dark" content="Ctrl+R、Ctrl+Enter" placement="top">
						<el-button v-on:click="doExecutorSql" type="primary" plain size="small" icon="el-icon-video-play">执行
						</el-button>
					</el-tooltip>
					<el-button icon="el-icon-brush" size="small" @click="formatterSql">SQL美化</el-button>
					<el-button v-on:click="addFavorite('')" plain size="small" icon="el-icon-star-off">收藏</el-button>
					<div style="float: right;">
						<el-select v-model="choiceDatasourceId" @change="datasourceChangeEvents" size="small" filterable
											 placeholder="请选择数据源" style="width: 300px;margin-left: 10px;">
							<el-option v-for="item in datasourceOptions" :key="item.id" :label="item.name"
												 :value="item.id"></el-option>
						</el-select>
						<el-select v-model="choiceDatabase" @change="databaseChangeEvents" size="small" filterable
											 placeholder="请选择数据库" style="width: 200px;margin-left: 10px;">
							<el-option v-for="item in databaseList" :key="item.dbName" :label="item.dbName"
												 :value="item.dbName"></el-option>
						</el-select>
					</div>
				</div>
				<div v-if="sqlParams.length > 0" class="sql-params">
					<el-input :placeholder="'请输入'+param.key+'的值'" v-model="param.value" v-for="param in sqlParams">
						<template slot="prepend">{{ param.key }}</template>
					</el-input>
				</div>
			</el-card>
			<el-card>
				<div style="position: relative;">
					<div style="position: absolute;right: 0;z-index: 1;">
						<!-- 复制选中行 -->
						<el-dropdown @command="handleCopyCheckLineCommand"
												 v-show="this.choiceResultObj[this.executeShowTable] && this.choiceResultObj[this.executeShowTable].length > 0">
							<el-button type="primary" size="small" icon="el-icon-document-copy">
								复制选中行<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="insert">SQL Inserts</el-dropdown-item>
								<el-dropdown-item command="update">SQL Updates</el-dropdown-item>
								<el-dropdown-item command="json">JSON</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
					<el-tabs v-model="executeShowTable">
						<el-tab-pane label="执行历史" name="tabHistory">
							<el-table :data="myHistoryListList" stripe border style="width: 100%; margin-bottom: 5px;">
								<el-table-column prop="createTime" label="执行时间" width="160px"></el-table-column>
								<el-table-column prop="content" label="SQL">
									<template slot-scope="scope">
										<pre class="sql-content-line" @dblclick="inputFavoriteSql(scope.row)"
												 :title="scope.row.content">{{ scope.row.content }}</pre>
									</template>
								</el-table-column>
								<el-table-column label="操作" width="160px">
									<template slot-scope="scope">
										<el-button size="mini" type="primary" @click="inputFavoriteSql(scope.row)">输入</el-button>
										<el-button size="mini" type="success" @click="addFavorite(scope.row.content)"
															 style="margin-left: 10px;">收藏
										</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-tab-pane>
						<el-tab-pane label="我的收藏" name="tabFavorite">
							<el-table :data="myFavoriteList" stripe border style="width: 100%; margin-bottom: 5px;" v-infinite-scroll>
								<el-table-column prop="createTime" label="执行时间" width="160px"></el-table-column>
								<el-table-column prop="content" label="SQL">
									<template slot-scope="scope">
										<pre class="sql-content-line" @dblclick="inputFavoriteSql(scope.row)"
												 :title="scope.row.content">{{ scope.row.content }}</pre>
									</template>
								</el-table-column>
								<el-table-column label="操作" width="160px">
									<template slot-scope="scope">
										<el-button size="mini" type="primary" v-on:click="inputFavoriteSql(scope.row)">输入</el-button>
										<el-button size="mini" type="danger" v-on:click="delFavorite(scope.row)" style="margin-left: 10px;">
											删除
										</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-tab-pane>
						<el-tab-pane label="信息" name="tabInfo" v-if="!!executeResultInfo">
							<pre style="white-space: pre-wrap;">{{ executeResultInfo }}</pre>
						</el-tab-pane>
						<el-tab-pane label="错误" name="tabError" v-if="!!executeError">
							<div style="color: #f00;">{{ executeError }}</div>
						</el-tab-pane>
						<template v-else>
							<el-tab-pane :label="'结果'+resultItem.index" :name="resultItem.name"
													 v-for="resultItem in executeResultList" v-if="!!resultItem.index">
								<div v-if="!!resultItem.errMsg" style="color: #f00;">{{ resultItem.errMsg }}</div>
								<div v-else-if="resultItem.dataList.length <= 0"
										 style="text-align: center; color: #aaa; padding: 20px 0;">暂无数据
								</div>
								<ux-grid v-else
												 :data="resultItem.dataList"
												 stripe
												 border
												 :height="height"
												 :checkboxConfig="{checkMethod: selectable, highlight: true}"
						 						 @table-body-scroll="scroll"
												 style="width: 100%; margin-bottom: 5px;" class="execute-result-table" max-height="600"
												 @selection-change="handleSelectionChange">
									<ux-table-column type="checkbox" width="55"></ux-table-column>
									<ux-table-column type="index" width="50" title=" "></ux-table-column>
									<ux-table-column v-for="item in resultItem.dataCols" :prop="item.prop" :title="item.prop"
																	 :width="item.width">
										<template slot-scope="scope">
											<textarea readonly :value="scope.row[item.prop]" class="el-textarea__inner" rows="1"></textarea>
										</template>
									</ux-table-column>
								</ux-grid>
							</el-tab-pane>
						</template>
					</el-tabs>
				</div>
			</el-card>
		</div>
		<!--选择导出为update的条件列弹窗-->
		<el-dialog :visible.sync="exportConditionVisible" width="500px" title="选择更新语句条件">
			<div>
				更新条件列：
				<el-select v-model="conditionDataColsChoice" multiple placeholder="请选择" style="width: 370px;">
					<el-option v-for="item in conditionDataCols" :key="item.prop" :label="item.prop"
										 :value="item.prop"></el-option>
				</el-select>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="exportConditionVisible = false">取 消</el-button>
				<el-button type="primary" @click="doCopyCheckLineUpdate">确 定</el-button>
			</span>
		</el-dialog>
		<span id="widthCalculate" style="visibility: hidden; white-space: nowrap;position: fixed;"></span>
	</div>
</template>

<script>
import copyFormatter from './copy/index'
import sqlFormatter from "sql-formatter"
import datasourceApi from '../../common/api/datasource'
import aceEditor from "../../common/lib/ace-editor";
import sqlParser from "./parser/SqlParser";

export default {
	data() {
		return {
			height: 0,
			scrollTop: 0,
			datasourceList: [],
			choiceDatasourceId: "",
			datasourceOptions: [],
			datasourceGroupList: [],
			choiceDatasourceGroup: "",

			databaseList: [],
			choiceDatabase: "",
			editorDbProduct: "",
			editorDbInfo: [],
			editorDbTableInfo: {},
			editorColumnInfo: {},

			sqlExecuting: false,
			executeResultList: [],
			executeResultInfo: "",
			executeShowTable: "tabHistory",
			sqlExecutorEditor: {},
			nowExecutorId: 1,
			executeError: "",
			// 收藏及历史
			myFavoriteList: [],
			myHistoryListList: [],
			// 选择复制
			choiceResultObj: {},
			//
			exportConditionVisible: false,
			conditionDataCols: [],
			conditionDataColsChoice: [],
			// 编辑器
			sqlExecutorContent: '',
			sqlEditorConfig: {
				wrap: true,
				autoScrollEditorIntoView: true,
				enableBasicAutocompletion: true,
				enableSnippets: true,
				enableLiveAutocompletion: true,
				minLines: 10,
				maxLines: 10,
			},
			executorSource: {},
			// sql参数
			sqlParams: [],
			sqlParamWaiting: false,
			sqlParamHistory: {},
		}
	},
	components: {
		'ace-editor': aceEditor
	},
	mounted: function () {
	  this.height = 270;
		this.loadDatasourceList();
	},
	methods: {
		sqlExecutorInit(editor) {
			this.sqlExecutorEditor = editor;
			this.sqlExecutorEditor.setFontSize(16);
			let that = this;
			this.sqlExecutorEditor.commands.addCommand({
				name: "execute-sql",
				bindKey: {win: "Ctrl-R|Ctrl-Shift-R|Ctrl-Enter", mac: "Command-R|Command-Shift-R|Command-Enter"},
				exec: function (editor) {
					that.doExecutorSql();
				}
			});
			editor.on('change', () => {
				if (!this.sqlParamWaiting) {
					this.sqlParamWaiting = true;
					setTimeout(() => {
						let content = editor.getValue();
						let paramArr = sqlParser.parserArr(content, [
							{start: '${', end: '}'}, {start: '#{', end: '}'}
						]);
						this.sqlParams = [];
						paramArr.forEach(item => {
							this.sqlParams.push({key: item, value: this.sqlParamHistory[item] || ''});
						});
						this.sqlParamWaiting = false;
					}, 300);
				}
			});
		},
	  scroll ({scrollTop, scrollLeft}) {
		  this.scrollTop = scrollTop
	  },
	  selectable ({row}) {
		  return row.id !== 2
	  },
		cancelExecutorSql() {
			datasourceApi.executeSqlCancel({executeId: this.nowExecutorId}).then(() => {
				this.$message.success("取消成功");
			});
		},
		loadHistoryAndFavoriteList() {
			this.loadHistoryList();
			this.loadFavoriteList();
		},
		loadFavoriteList() {
			datasourceApi.favoriteList({sourceId: this.choiceDatasourceId}).then(json => {
				this.myFavoriteList = json.data || [];
			});
		},
		loadHistoryList() {
			datasourceApi.historyList({sourceId: this.choiceDatasourceId}).then(json => {
				this.myHistoryListList = json.data || [];
			});
		},
		addFavorite(sqlValue) {
			if (!sqlValue) {
				sqlValue = this.sqlExecutorEditor.getSelectedText();
				if (!sqlValue) {
					sqlValue = this.sqlExecutorEditor.getValue();
				}
			}
			let sqlParamObj = {};
			this.sqlParams.forEach(item => {
				if (!!item.value) {
					sqlParamObj[item.key] = item.value;
				}
			});
			let param = {
				name: '我的收藏',
				content: sqlValue,
				paramJson: JSON.stringify(sqlParamObj),
				datasourceId: this.choiceDatasourceId
			};
			datasourceApi.updateFavorite(param).then(() => {
				this.$message.success("收藏成功");
				this.loadFavoriteList();
			});
		},
		delFavorite(row) {
			datasourceApi.updateFavorite({id: row.id, yn: 0}).then(() => {
				this.$message.success("删除成功");
				this.loadFavoriteList();
			});
		},
		inputFavoriteSql(item) {
			this.sqlExecutorEditor.setValue(item.content, 1);
			if (!!item.paramJson) {
				let paramJson = JSON.parse(item.paramJson);
				for (let key in paramJson) {
					this.sqlParamHistory[key] = paramJson[key];
				}
			}
		},
		formatterSql() {
			let dataSql = this.sqlExecutorEditor.getSelectedText();
			if (!!dataSql) {
				let range = this.sqlExecutorEditor.getSelectionRange();
				this.sqlExecutorEditor.remove(range);
			} else {
				dataSql = this.sqlExecutorEditor.getValue();
				this.sqlExecutorEditor.setValue('', 1);
			}
			if (!!dataSql) {
				dataSql = sqlFormatter.format(dataSql);
				this.sqlExecutorEditor.insert(dataSql);
			}
		},
		doExecutorSql() {
			if (!this.choiceDatasourceId) {
				this.$message.error("请先选择数据源");
				return;
			}
			this.executeError = "";
			this.executeUseTime = "";
			this.executeResultList = [];
			let sqlParamObj = {};
			this.sqlParams.forEach(item => {
				if (!!item.value) {
					sqlParamObj[item.key] = item.value;
					this.sqlParamHistory[item.key] = item.value;
				}
			});
			this.nowExecutorId = (new Date()).getTime() + Math.ceil(Math.random() * 1000);
			let sqlValue = this.sqlExecutorEditor.getSelectedText();
			if (!sqlValue) {
				sqlValue = this.sqlExecutorEditor.getValue();
			}
			this.sqlExecuting = true;
			datasourceApi.queryExecuteSql({
				sourceId: this.choiceDatasourceId,
				dbName: this.choiceDatabase,
				executeId: this.nowExecutorId,
				sql: sqlValue,
				params: JSON.stringify(sqlParamObj),
			}).then(json => {
				this.sqlExecuting = false;
				if (json.errCode != 200) {
					this.executeShowTable = 'tabError';
					this.executeError = json.errMsg;
					return;
				}
				let resultList = json.data || [];
				let executeResultList = [];
				let executeResultInfo = "", itemIndex = 1;
				for (let i = 0; i < resultList.length; i++) {
					let objItem = JSON.parse(resultList[i]);
					executeResultInfo += this.getExecuteInfoStr(objItem);
					let resultItem = this.dealExecuteResult(objItem);
					if (resultItem.updateCount < 0) {
						resultItem.index = itemIndex;
						resultItem.name = 'tab' + itemIndex;
						itemIndex++;
					}
					executeResultList.push(resultItem);
				}
				this.executeShowTable = (itemIndex === 1) ? "tabInfo" : "tab1";
				this.executeResultInfo = executeResultInfo;
				this.executeResultList = executeResultList;
				this.loadHistoryList();
			});
		},
		loadDatasourceList() {
			datasourceApi.datasourceList({}).then(json => {
				this.datasourceList = json.data || [];
				this.datasourceOptions = this.datasourceList;
				let datasourceGroupList = [];
				this.datasourceList.filter(item => !!item.groupName).forEach(item => datasourceGroupList.push(item.groupName || ''));
				this.datasourceGroupList = Array.from(new Set(datasourceGroupList));
				if (this.datasourceList.length > 0) {
					this.choiceDatasourceId = this.datasourceList[0].id;
					this.executorSource = {sourceId: this.choiceDatasourceId};
					this.loadDatabaseList();
					this.loadSourceBaseInfo();
					this.loadHistoryAndFavoriteList();
				}
			});
		},
		loadDatabaseList() {
			datasourceApi.databaseList({sourceId: this.choiceDatasourceId}).then(json => {
				this.databaseList = json.data || [];
				if (this.databaseList.length > 0) {
					// 排除系统库
					let sysDbName = ["information_schema", "master", "model", "msdb", "tempdb"];
					let notSysDbItem = this.databaseList.find(item => sysDbName.indexOf(item.dbName) < 0);
					this.choiceDatabase = (!!notSysDbItem) ? notSysDbItem.dbName : this.databaseList[0].dbName;
					this.executorSource = {sourceId: this.choiceDatasourceId, dbName: this.choiceDatabase};
				}
			});
		},
		loadSourceBaseInfo() {
			datasourceApi.getSourceBaseInfo({sourceId: this.choiceDatasourceId}).then(json => {
				let data = json.data || {};
				this.editorDbProduct = data.product || '';
			});
		},
		sourceGroupChangeEvents() {
			let datasourceOptions = [];
			for (let i = 0; i < this.datasourceList.length; i++) {
				let item = this.datasourceList[i];
				if (!this.choiceDatasourceGroup || this.choiceDatasourceGroup == item.groupName) {
					datasourceOptions.push(item);
				}
			}
			this.datasourceOptions = datasourceOptions;
			if (datasourceOptions.length > 0) {
				this.choiceDatasourceId = datasourceOptions[0].id;
				this.executorSource = {sourceId: this.choiceDatasourceId};
				this.loadDatabaseList();
				this.loadSourceBaseInfo();
				this.loadHistoryAndFavoriteList();
			}
		},
		datasourceChangeEvents() {
			this.executorSource = {sourceId: this.choiceDatasourceId};
			this.loadDatabaseList();
			this.loadSourceBaseInfo();
			this.loadHistoryAndFavoriteList();
		},
		databaseChangeEvents() {
			this.executorSource = {sourceId: this.choiceDatasourceId, dbName: this.choiceDatabase};
		},
		getExecuteInfoStr(resultData) {
			var resultStr = resultData.sql;
			resultStr += "\n> 状态：" + ((!!resultData.errMsg) ? "ERROR" : "OK");
			if (resultData.updateCount >= 0) {
				resultStr += "\n> 影响行数：" + resultData.updateCount;
			}
			resultStr += "\n> 耗时：" + (resultData.useTime || 0) / 1000 + "s";
			resultStr += "\n\n";
			return resultStr;
		},
		dealExecuteResult(resultData) {
			var dataList = resultData.result || [];
			var executeResultCols = [];
			if (dataList.length > 0) {
				var propData = dataList[0];
				for (var key in propData) {
					// 动态计算宽度~自己想的一个方法，666
					document.getElementById("widthCalculate").innerText = key;
					var width1 = document.getElementById("widthCalculate").offsetWidth;
					document.getElementById("widthCalculate").innerText = propData[key];
					var width2 = document.getElementById("widthCalculate").offsetWidth;
					var width = (width1 > width2) ? width1 : width2;
					width = (width < 50) ? 50 : width;
					width = (width > 200) ? 200 : width;
					executeResultCols.push({prop: key, width: width + 25});
				}
			}
			var resultObj = {};
			resultObj.dataList = dataList;
			resultObj.dataCols = executeResultCols;
			resultObj.useTime = resultData.useTime || 0;
			resultObj.errMsg = resultData.errMsg || "";
			resultObj.updateCount = resultData.updateCount;
			return resultObj;
		},
		handleSelectionChange(val) {
			this.$set(this.choiceResultObj, this.executeShowTable, val);
		},
		doCopyCheckLineUpdate() {
			let choiceData = this.choiceResultObj[this.executeShowTable] || [];
			if (choiceData.length > 0) {
				let dataCols = this.executeResultList.find(item => item.name === this.executeShowTable).dataCols;
				let copyData = copyFormatter.format('update', this.editorDbProduct, dataCols, choiceData, this.conditionDataColsChoice);
				this.conditionDataColsChoice = [];
				this.exportConditionVisible = false;
				this.$copyText(copyData).then(
						res => this.$message.success("内容已复制到剪切板！"),
						err => this.$message.error("抱歉，复制失败！")
				);
			}
		},
		handleCopyCheckLineCommand(type) {
			let choiceData = this.choiceResultObj[this.executeShowTable] || [];
			if (choiceData.length > 0) {
				let dataCols = this.executeResultList.find(item => item.name === this.executeShowTable).dataCols;
				if (type === 'update') {
					// 选择更新的条件列
					this.conditionDataCols = dataCols;
					this.exportConditionVisible = true;
					return;
				}
				let copyData = copyFormatter.format(type, this.editorDbProduct, dataCols, choiceData, '');
				this.$copyText(copyData).then(
						res => this.$message.success("内容已复制到剪切板！"),
						err => this.$message.error("抱歉，复制失败！")
				);
			}
		}
	}
}
</script>

<style scoped>
.data-executor-vue .ace-monokai .ace_print-margin {
	display: none;
}

.data-executor-vue .el-card__body {
	padding: 10px;
}

.data-executor-vue .sql-params {
}

.data-executor-vue .sql-params .el-input-group {
	width: auto;
	margin: 10px 10px 0 0;
}

.data-executor-vue .sql-params .el-input__inner {
	width: 200px;
}

.data-executor-vue .el-table td, .el-table th {
	padding: 6px 0;
}

.data-executor-vue .execute-result-table .el-input__inner {
	height: 25px;
	line-height: 25px;
	padding: 0 5px;
}

.data-executor-vue .execute-result-table .el-textarea__inner {
	height: 27px;
	min-height: 27px;
	line-height: 25px;
	padding: 0 5px;
	resize: none;
}

.data-executor-vue .sql-content-line {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.data-executor-vue .execute-use-time {
	font-size: 12px;
	margin-right: 10px;
}

.data-executor-vue-out .el-tabs__nav-scroll {
	padding-left: 20px;
}

.data-executor-vue-out .el-button + .el-button {
	margin-left: 0px;
}

.data-executor-vue-out .el-table__body-wrapper {
	height: calc(100vh - 180px);
	overflow-y: auto;
}

/deep/ .elx-table .elx-body--column.col--ellipsis {
	height: 38px;
}

/deep/ .elx-table .elx-header--column.col--ellipsis {
	height: 38px;
}
</style>