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: 5px;">
				<ace-editor v-model="sqlExecutorContent" ref="sqlEditor" @init="sqlExecutorInit" lang="sql" theme="monokai"
										width="100%" height="20" :options="sqlEditorConfig" :source="executorSource"
										@cursorSelection="cursorSelection" style="margin-bottom: 5px;"></ace-editor>
				<div>
					<el-button v-if="sqlExecuting" v-on:click="cancelExecutorSql" type="primary" plain size="mini"
										 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="mini" icon="el-icon-video-play">{{executeButtonText}}
						</el-button>
					</el-tooltip>
					<el-button icon="el-icon-brush" size="mini" @click="formatterSql">SQL美化</el-button>
					<el-button v-on:click="addFavorite('')" plain size="mini" icon="el-icon-star-off">收藏</el-button>
					<div style="float: right;">
						<el-select v-model="choiceDatasourceId" @change="datasourceChangeEvents" size="mini" 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="mini" 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,index) in sqlParams" :key="index">
						<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" type="border-card" @tab-click="tabHandleClick">
						<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 class="execute-result-info">{{ 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.label" :name="resultItem.name" v-for="(resultItem,index) in executeResultList" :key="index"
													 lazy>
								<div v-if="!!resultItem.errMsg" style="color: #f00;">{{ resultItem.errMsg }}</div>
								<ux-grid v-else
												 v-clickoutside="handleClickOutside"
												 :data="resultItem.dataList"
												 @table-body-scroll="scroll"
												 @selection-change="handleSelectionChange"
												 @cell-click="mouseOnFocus"
												 @cell-mouse-leave="mouseLeave"
												 :checkboxConfig="{checkMethod: selectable, highlight: true}"
												 stripe border :height="height" max-height="600"
												 style="width: 100%; margin-bottom: 5px;" class="execute-result-table">
									<ux-table-column type="checkbox" width="55"></ux-table-column>
									<ux-table-column type="index" width="55" title=" "></ux-table-column>
									<ux-table-column v-for="(item,index) in resultItem.dataCols" :key="index" :prop="item.prop" :title="item.label"
																	 :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-pagination
										v-if="resultItem.selectCount"
										@current-change="handleCurrentChange"
										:current-page="currentPage"
										:page-size="pageSize"
										:page-sizes="[1000]"
										layout="total, sizes, prev, pager, next, jumper"
										:total="resultItem.selectCount">
								</el-pagination>
								<div v-if="resultItem.selectCount" style="position: absolute;right: 5px;bottom: 5px;">
									<el-button type="primary" plain v-on:click="viewAllData()">查看所有</el-button>
								</div>
								<div v-if="!resultItem.selectCount" style="height: 20px;font-size: 13px;font-weight: 400;color: #606266;padding-left: 5px;">
				  				共 {{resultItem.totalCount}} 条
								</div>
							</el-tab-pane>
						</template>
						<el-main v-loading="loadingAll"
										 v-show="loadingAll"
					 					 element-loading-text="正在加载中"
					 					 element-loading-spinner="el-icon-loading"
										 style="height: 175px;">
						</el-main>
					</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.label"
										 :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";
import Clickoutside from 'element-ui/src/utils/clickoutside';
import merge from 'webpack-merge';

export default {
  directives: { Clickoutside },
	data() {
		return {
		  //遮罩层
	  	loadingAll: false,

			height: 0,
			scrollTop: 0,
			datasourceList: [],
			choiceDatasourceId: "",
			datasourceOptions: [],
			datasourceGroupList: [],
			choiceDatasourceGroup: "",

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

			//选中的单元格
	  	uxGridCell: "",

			pageSize: 1000,
		  currentPage: 1,

			sqlExecuting: false,
			executeResultList: [],
			executeResultInfo: "",
			executeShowTable: "tabHistory",
			sqlExecutorEditor: {},
			nowExecutorId: 1,
			executeError: "",
			// 收藏及历史
			myFavoriteList: [],
			myHistoryListList: [],
			// 选择复制
			choiceResultObj: {},
			//
			exportConditionVisible: false,
			conditionDataCols: [],
			conditionDataColsChoice: [],
			//执行按钮文本
	    executeButtonText: '执行',
			// 编辑器
			sqlExecutorContent: '',
			sqlEditorConfig: {
				wrap: true,
				autoScrollEditorIntoView: true,
				enableBasicAutocompletion: true,
				enableSnippets: true,
				enableLiveAutocompletion: true,
				minLines: 15,
				maxLines: 15,
			},
			executorSource: {},
			// sql参数
			sqlParams: [],
			sqlParamWaiting: false,
			sqlParamHistory: {},
		}
	},
	components: {
		'ace-editor': aceEditor
	},
	mounted: function () {
		this.height = 190;
		this.loadDatasourceList();
	},
  activated(){
		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);
				}
			});
		},
		cursorSelection(sqlValue){
			if(sqlValue){
				this.executeButtonText = '执行已选择的'
			}else{
				this.executeButtonText = '执行'
	  	}
		},
		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(init) {
			if (!this.choiceDatasourceId) {
				this.$message.error("请先选择数据源");
				return;
			}
			if(!this.choiceDatabase){
				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,
		    pageNum: this.currentPage,
		    pageSize: this.pageSize,
				sql: sqlValue,
				params: JSON.stringify(sqlParamObj),
			}).then(response => {
				this.sqlExecuting = false;
		  	if (response.errCode != 200) {
			  	this.executeShowTable = 'tabError';
			  	this.executeError = response.errMsg;
			  	return;
		  	}
				let resIndex = 1;
				let executeResultList = [];
				let resData = response.data || [];
				let executeResultInfo = "";
				resData.forEach(result => {
					let dataListRes = [];
					let previewColumns = [];
					executeResultInfo += this.getExecuteInfoStr(result);
					if (result.errCode === 0) {
						let dataListTemp = result.data || [];
						let headerList = result.header || [];
						// 组装表头
						let columnSet = {};
						if (headerList.length > 0) {
							let headerIndex = 0;
							headerList.forEach(item => {
								let key = 'value_' + (headerIndex++);
								columnSet[key] = item;
								previewColumns.push({prop: key, label: item});
							});
							dataListTemp.forEach(item => {
								let dataItem = {}, dataIndex = 0;
								previewColumns.forEach(column => {
									let key = column.prop;
									dataItem[key] = item[dataIndex++];
									if ((dataItem[key] + '').length > columnSet[key].length) {
										columnSet[key] = dataItem[key] + '';
									}
								});
								dataListRes.push(dataItem);
							});
							previewColumns.forEach(item => {
								// 动态计算宽度~自己想的一个方法，666
								document.getElementById("widthCalculate").innerText = columnSet[item.prop];
								let width = document.getElementById("widthCalculate").offsetWidth;
								width = width + (columnSet[item.prop] === item.label ? 35 : 55);
								width = (width < 50) ? 50 : width;
								item.width = (width > 200) ? 200 : width;
							});
						}
					}
					executeResultList.push({
						label: '结果' + resIndex,
						name: 'result_' + resIndex,
						errMsg: result.errMsg,
						errCode: result.errCode,
						queryTime: result.queryTime,
						selectCount: result.selectCount,
						totalCount: dataListRes.length,
						dataCols: previewColumns,
						dataList: dataListRes
					});
					resIndex++;
					//动态设置表格高度,尽量避免出现滚动条
					if(result.selectCount){
						this.height = 170;
					}
				});
				//多个结果情况下,且点击分页
				if(init!=1){
					this.executeShowTable = (resIndex === 1) ? "tabInfo" : "result_1";
				}
				this.executeResultInfo = executeResultInfo;
				this.executeResultList = executeResultList;
				this.loadHistoryList();
			});
		},
		//查看所有数据
		viewAllData(init){
		  this.loadingAll = true;
			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,
			pageNum: this.currentPage,
			pageSize: this.pageSize,
			sql: sqlValue,
			type: 'noPage',
			params: JSON.stringify(sqlParamObj),
			}).then(response => {
			this.sqlExecuting = false;
		  this.loadingAll = false;
			if (response.errCode != 200) {
				this.executeShowTable = 'tabError';
				this.executeError = response.errMsg;
				return;
			}
			let resIndex = 1;
			let executeResultList = [];
			let resData = response.data || [];
			let executeResultInfo = "";
			resData.forEach(result => {
				let dataListRes = [];
				let previewColumns = [];
				executeResultInfo += this.getExecuteInfoStr(result);
				if (result.errCode === 0) {
				let dataListTemp = result.data || [];
				let headerList = result.header || [];
				// 组装表头
				let columnSet = {};
				if (headerList.length > 0) {
					let headerIndex = 0;
					headerList.forEach(item => {
					let key = 'value_' + (headerIndex++);
					columnSet[key] = item;
					previewColumns.push({prop: key, label: item});
					});
					dataListTemp.forEach(item => {
					let dataItem = {}, dataIndex = 0;
					previewColumns.forEach(column => {
						let key = column.prop;
						dataItem[key] = item[dataIndex++];
						if ((dataItem[key] + '').length > columnSet[key].length) {
						columnSet[key] = dataItem[key] + '';
						}
					});
					dataListRes.push(dataItem);
					});
					previewColumns.forEach(item => {
					// 动态计算宽度~自己想的一个方法，666
					document.getElementById("widthCalculate").innerText = columnSet[item.prop];
					let width = document.getElementById("widthCalculate").offsetWidth;
					width = width + (columnSet[item.prop] === item.label ? 35 : 55);
					width = (width < 50) ? 50 : width;
					item.width = (width > 200) ? 200 : width;
					});
				}
				}
				executeResultList.push({
				label: '结果' + resIndex,
				name: 'result_' + resIndex,
				errMsg: result.errMsg,
				errCode: result.errCode,
				queryTime: result.queryTime,
				selectCount: result.selectCount,
		    totalCount: dataListRes.length,
				dataCols: previewColumns,
				dataList: dataListRes
				});
				resIndex++;
				//动态设置表格高度,尽量避免出现滚动条
				if(result.selectCount){
				this.height = 170;
				}
			});
			//多个结果情况下,且点击分页
			if(init!=1){
				this.executeShowTable = (resIndex === 1) ? "tabInfo" : "result_1";
			}
			this.executeResultInfo = executeResultInfo;
			this.executeResultList = executeResultList;
			this.loadHistoryList();
			});
		},
	  handleCurrentChange(to) {
		  this.currentPage = to;
		  let init = 1;
		  this.doExecutorSql(init);
	  },
		loadDatasourceList() {
			datasourceApi.datasourceList({}).then(json => {
				this.datasourceList = json.data || [];
				this.datasourceOptions = this.datasourceList;

				//子组件向父组件传值
				//this.$emit('listenToChildEvent',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;
					//初次加载根据query值设置对应数据源
					if(this.$route.query.datasourceId){
						this.choiceDatasourceId = parseInt(this.$route.query.datasourceId);
					}
					//初次加载根据query值设置对应数据库
					if(this.$route.query.database){
						this.choiceDatabase = this.$route.query.database;
					}
					this.executorSource = {sourceId: this.choiceDatasourceId};
					this.loadDatabaseList(true);
					this.loadSourceBaseInfo();
					this.loadHistoryAndFavoriteList();
				}
			});
		},
		//initFlag: 初次加载状态
		loadDatabaseList(initFlag) {
			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);
					// 非初次加载，动态改变url参数
					if(!initFlag){
						this.choiceDatabase = (!!notSysDbItem) ? notSysDbItem.dbName : this.databaseList[0].dbName;
						this.$router.replace({ query: { datasourceId: this.choiceDatasourceId,database:this.choiceDatabase } })
					}
					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.currentPage = 1;
			this.loadDatabaseList();
			this.loadSourceBaseInfo();
			this.loadHistoryAndFavoriteList();
		},
		databaseChangeEvents() {
	  	this.$router.replace({ query: { datasourceId: this.choiceDatasourceId,database:this.choiceDatabase } })
			this.executorSource = {sourceId: this.choiceDatasourceId, dbName: this.choiceDatabase};
		  this.currentPage = 1;
		},
		getExecuteInfoStr(resultData) {
			var resultStr = resultData.executeSql;
			resultStr += "\n> 状态：" + ((!!resultData.errMsg) ? "ERROR" : "OK");
			if (resultData.updateCount >= 0) {
				resultStr += "\n> 影响行数：" + resultData.updateCount;
			}
			resultStr += "\n> 耗时：" + (resultData.queryTime || 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);
		},
	  tabHandleClick(t){

		},
		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("抱歉，复制失败！")
				);
			}
		},
		//表格单元格鼠标焦点事件
		mouseOnFocus(row, column, cell, event){
		  if(this.uxGridCell){
				this.uxGridCell.style.border = 'none'
			}
	  	cell.style.border = '2px solid #0078d7'
			this.uxGridCell = cell;
		},
		//表格单元格 hover 退出
		mouseLeave(row, column, cell, event){
	  	// if(this.uxGridCell){
			// 	this.uxGridCell.style.border = 'none'
	  	// }
		},
		// 点击区域外
		handleClickOutside() {
	  	if(this.uxGridCell){
			this.uxGridCell.style.border = 'none'
	  	}
		},
	}
}
</script>

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

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

.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: 26px;
	min-height: 26px;
	line-height: 26px;
	padding: 0;
	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 .execute-result-info {
	white-space: pre-wrap;
	max-height: 400px;
	overflow: auto;
	background: #263238;
	color: #fff;
	padding: 10px;
	border-radius: 6px;
}

.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: 30px;
}

/deep/ .elx-table .elx-header--column.col--ellipsis {
	height: 30px;
  //padding-left: 5px;
}
.el-textarea__inner{
  border: none;
  background-color: #f0f8ff00;
}
.el-textarea__inner::-webkit-scrollbar {
  display: none;
}
/deep/ .el-tabs--border-card>.el-tabs__content {
  padding: 5px;
}
/deep/ .elx-table .elx-body--column.col--ellipsis>.elx-cell,
.elx-table .elx-footer--column.col--ellipsis>.elx-cell,
.elx-table .elx-header--column.col--ellipsis>.elx-cell{
  overflow: auto;
  text-overflow: unset;
}
/deep/ .elx-table .elx-body--column.col--ellipsis>.elx-cell::-webkit-scrollbar {
  display: none;
}
</style>