|
|
|
|
@ -4,10 +4,10 @@
|
|
|
|
|
<el-col :span="3">
|
|
|
|
|
<el-card style="height: calc(100vh - 125px)">
|
|
|
|
|
<div slot="header">
|
|
|
|
|
<span><el-button type="text" size="small" @click="showDialog('add')">新建标签页</el-button></span>
|
|
|
|
|
<span><el-button type="text" size="small">新建标签页</el-button></span>
|
|
|
|
|
</div>
|
|
|
|
|
<el-menu
|
|
|
|
|
:default-active="active"
|
|
|
|
|
:default-active="localIndex"
|
|
|
|
|
@select="onSelect"
|
|
|
|
|
mode="horizontal"
|
|
|
|
|
>
|
|
|
|
|
@ -21,10 +21,10 @@
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
<!-- -->
|
|
|
|
|
<el-col :span="20">
|
|
|
|
|
<el-card style="height: calc(100vh - 125px)">
|
|
|
|
|
<el-tabs v-model="active"
|
|
|
|
|
|
|
|
|
|
<el-tabs v-model="localIndex"
|
|
|
|
|
type="card"
|
|
|
|
|
closable
|
|
|
|
|
@tab-remove="removeTab"
|
|
|
|
|
@ -36,360 +36,148 @@
|
|
|
|
|
:name="index.toString()"
|
|
|
|
|
:label="tab.title"
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<!-- form表单 -->
|
|
|
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="form.length > 0">
|
|
|
|
|
<el-form-item v-for="(field, index) in form"
|
|
|
|
|
:key="index"
|
|
|
|
|
:label="field.label"
|
|
|
|
|
:prop="field.prop"
|
|
|
|
|
v-if="field.type !== 'button'">
|
|
|
|
|
<component
|
|
|
|
|
:is="getComponentType(field.type)"
|
|
|
|
|
v-bind="field"
|
|
|
|
|
v-model="queryParams[field.prop]"
|
|
|
|
|
:placeholder="field.placeholder"
|
|
|
|
|
>
|
|
|
|
|
<!-- 下拉框选项 -->
|
|
|
|
|
<el-option
|
|
|
|
|
v-if="field.type === 'select'"
|
|
|
|
|
v-for="option in field.options"
|
|
|
|
|
:key="option.value"
|
|
|
|
|
:label="option.label"
|
|
|
|
|
:value="option.value"
|
|
|
|
|
></el-option>
|
|
|
|
|
</component>
|
|
|
|
|
</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-table
|
|
|
|
|
:data="tableData"
|
|
|
|
|
highlight-current-row
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
v-loading="loading"
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<el-table-column label="序号" type="index" width="80" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
<el-table-column
|
|
|
|
|
v-for="(column, index) in columns"
|
|
|
|
|
:prop="column.key"
|
|
|
|
|
:label="column.title"
|
|
|
|
|
:width="column.width"
|
|
|
|
|
:align="column.align"
|
|
|
|
|
:show-overflow-tooltip="column.tooltip"
|
|
|
|
|
<!-- 查询条件 -->
|
|
|
|
|
<Search
|
|
|
|
|
:search-fields="searchFields"
|
|
|
|
|
:query-params="queryParams"
|
|
|
|
|
@query="handleQuery"
|
|
|
|
|
@reset="handleReset"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 表格 -->
|
|
|
|
|
<div class="table-container">
|
|
|
|
|
<Table
|
|
|
|
|
:columns="columnsFields"
|
|
|
|
|
:rows="rows"
|
|
|
|
|
:pagination="true"
|
|
|
|
|
:total="total"
|
|
|
|
|
:currentPage="currentPage"
|
|
|
|
|
:pageSize="pageSize"
|
|
|
|
|
:loading="loading"
|
|
|
|
|
@sort-change="handleSortChange"
|
|
|
|
|
@page-change="handlePageChange"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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"
|
|
|
|
|
@click="handleUpdate(scope.row)"
|
|
|
|
|
v-hasPermi="['system:dept:edit']"
|
|
|
|
|
>修改
|
|
|
|
|
</el-button>
|
|
|
|
|
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
type="text"
|
|
|
|
|
icon="el-icon-edit"
|
|
|
|
|
@click="handleUpdate(scope.row)"
|
|
|
|
|
v-hasPermi="['system:dept:edit']"
|
|
|
|
|
>同步
|
|
|
|
|
</el-button>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<pagination
|
|
|
|
|
v-show="true"
|
|
|
|
|
:total="total"
|
|
|
|
|
:page.sync="queryParams.pageNum"
|
|
|
|
|
:limit.sync="queryParams.pageSize"
|
|
|
|
|
:page-sizes="[2,5,10]"
|
|
|
|
|
@pagination="getList"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-dialog
|
|
|
|
|
:visible.sync="dialogVisible"
|
|
|
|
|
:title="dialogTitle"
|
|
|
|
|
:before-close="handleClose"
|
|
|
|
|
>
|
|
|
|
|
<el-form ref="form" :model="currentTabData" label-width="100px">
|
|
|
|
|
<el-form-item label="标题" prop="title" :rules="{ required: true, message: '标题不能为空', trigger: 'blur' }">
|
|
|
|
|
<el-input v-model="currentTabData.title" placeholder="请输入标题"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="名称" prop="name" :rules="{ required: true, message: '名称不能为空', trigger: 'blur' }">
|
|
|
|
|
<el-input v-model="currentTabData.name" placeholder="请输入名称"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="数据库类型" prop="dbType"
|
|
|
|
|
:rules="{ required: true, message: '数据库类型不能为空', trigger: 'blur' }">
|
|
|
|
|
<el-input v-model="currentTabData.dbType" placeholder="请输入数据库类型"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="URL" prop="url" :rules="{ required: true, message: 'URL不能为空', trigger: 'blur' }">
|
|
|
|
|
<el-input v-model="currentTabData.url" placeholder="请输入URL"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="用户名" prop="username"
|
|
|
|
|
:rules="{ required: true, message: '用户名不能为空', trigger: 'blur' }">
|
|
|
|
|
<el-input v-model="currentTabData.username" placeholder="请输入用户名"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="密码" prop="password"
|
|
|
|
|
:rules="{ required: true, message: '密码不能为空', trigger: 'blur' }">
|
|
|
|
|
<el-input v-model="currentTabData.password" placeholder="请输入密码" type="password"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="驱动类名" prop="driverClassName"
|
|
|
|
|
:rules="{ required: true, message: '驱动类名不能为空', trigger: 'blur' }">
|
|
|
|
|
<el-input v-model="currentTabData.driverClassName" placeholder="请输入驱动类名"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="cancel">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="submit">确 定</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
props: {
|
|
|
|
|
name: 'TabComponent',
|
|
|
|
|
initMenuItem: {
|
|
|
|
|
index: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: '1'
|
|
|
|
|
},
|
|
|
|
|
tabs: {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: () => [{
|
|
|
|
|
title: '数据库',
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
callBackSelect: {
|
|
|
|
|
type: Function,
|
|
|
|
|
default: () => ({})
|
|
|
|
|
},
|
|
|
|
|
initForm: {
|
|
|
|
|
searchFields: {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: () => [{
|
|
|
|
|
type: 'input',
|
|
|
|
|
label: '表名',
|
|
|
|
|
prop: 'tableName',
|
|
|
|
|
placeholder: '请输入表名',
|
|
|
|
|
}]
|
|
|
|
|
default: () => []
|
|
|
|
|
},
|
|
|
|
|
queryParams: {
|
|
|
|
|
type: Object,
|
|
|
|
|
default: () => ({})
|
|
|
|
|
},
|
|
|
|
|
initColumns: {
|
|
|
|
|
columnsFields: {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: () => [{
|
|
|
|
|
type: 'id',
|
|
|
|
|
width: 55,
|
|
|
|
|
align: 'center'
|
|
|
|
|
}]
|
|
|
|
|
default: () => []
|
|
|
|
|
},
|
|
|
|
|
initTableData: {
|
|
|
|
|
rows: {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: () => []
|
|
|
|
|
},
|
|
|
|
|
initActive: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: '0'
|
|
|
|
|
currentPage: {
|
|
|
|
|
type: Number,
|
|
|
|
|
default: 1
|
|
|
|
|
},
|
|
|
|
|
pageSize: {
|
|
|
|
|
type: Number,
|
|
|
|
|
default: 20
|
|
|
|
|
},
|
|
|
|
|
total: {
|
|
|
|
|
type: Number,
|
|
|
|
|
default: 0
|
|
|
|
|
},
|
|
|
|
|
loading: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
active: this.initActive,
|
|
|
|
|
tabs: this.initMenuItem,
|
|
|
|
|
form: this.initForm,
|
|
|
|
|
columns: this.initColumns,
|
|
|
|
|
tableData: this.initTableData,
|
|
|
|
|
loading: false,
|
|
|
|
|
|
|
|
|
|
dialogVisible: false,
|
|
|
|
|
dialogTitle: '',
|
|
|
|
|
currentTabData: {
|
|
|
|
|
title: '',
|
|
|
|
|
name: '',
|
|
|
|
|
dbType: '',
|
|
|
|
|
url: '',
|
|
|
|
|
username: '',
|
|
|
|
|
password: '',
|
|
|
|
|
driverClassName: ''
|
|
|
|
|
},
|
|
|
|
|
currentTabIndex: null,
|
|
|
|
|
total: 0,
|
|
|
|
|
queryParams: {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
activeTab: {},
|
|
|
|
|
},
|
|
|
|
|
localIndex: this.index,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
,
|
|
|
|
|
mounted() {
|
|
|
|
|
// console.log(JSON.stringify(this.initMenuItem))
|
|
|
|
|
// console.log(JSON.stringify(this.columns))
|
|
|
|
|
this.setDefaultValue()
|
|
|
|
|
this.onSelect(this.active)
|
|
|
|
|
}
|
|
|
|
|
,
|
|
|
|
|
methods: {
|
|
|
|
|
getComponentType(type) {
|
|
|
|
|
switch (type) {
|
|
|
|
|
case 'input':
|
|
|
|
|
return 'el-input';
|
|
|
|
|
case 'textarea':
|
|
|
|
|
return 'el-input';
|
|
|
|
|
case 'select':
|
|
|
|
|
return 'el-select';
|
|
|
|
|
case 'checkbox':
|
|
|
|
|
return 'el-checkbox';
|
|
|
|
|
case 'radio':
|
|
|
|
|
return 'el-radio';
|
|
|
|
|
case 'date':
|
|
|
|
|
return 'el-date-picker';
|
|
|
|
|
case 'button':
|
|
|
|
|
return 'el-button';
|
|
|
|
|
default:
|
|
|
|
|
return 'el-input';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
/* 设置默认值*/
|
|
|
|
|
setDefaultValue() {
|
|
|
|
|
this.form.forEach(field => {
|
|
|
|
|
if (field.type === 'select' && field.options) {
|
|
|
|
|
const defaultOption = field.options.find(option => option.default);
|
|
|
|
|
if (defaultOption) {
|
|
|
|
|
this.queryParams[field.prop] = defaultOption.value;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
index(newVal) {
|
|
|
|
|
this.localIndex = newVal;
|
|
|
|
|
},
|
|
|
|
|
/* 选中菜单 */
|
|
|
|
|
localIndex(newVal) {
|
|
|
|
|
this.$emit('update:index', newVal);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
onSelect(index) {
|
|
|
|
|
this.queryParams.activeTab = this.tabs[index]
|
|
|
|
|
this.callBackSelect(this.queryParams)
|
|
|
|
|
this.localIndex = index;
|
|
|
|
|
this.queryParams.name = this.tabs[index].name;
|
|
|
|
|
this.handleQuery();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/* tabs 单击事件 */
|
|
|
|
|
onClick(tab) {
|
|
|
|
|
this.queryParams.activeTab = this.tabs[tab.name]
|
|
|
|
|
this.callBackSelect(this.queryParams)
|
|
|
|
|
this.localIndex = tab.name;
|
|
|
|
|
this.queryParams.name = this.tabs[tab.name].name;
|
|
|
|
|
this.handleQuery();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/* 加载表格数据*/
|
|
|
|
|
loadTableData(tableData, total) {
|
|
|
|
|
this.tableData = tableData;
|
|
|
|
|
this.total = total;
|
|
|
|
|
handleQuery(queryParams) {
|
|
|
|
|
if (queryParams) {
|
|
|
|
|
this.queryParams = queryParams;
|
|
|
|
|
}
|
|
|
|
|
this.$emit('query', this.queryParams);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getList() {
|
|
|
|
|
this.callBackSelect(this.queryParams)
|
|
|
|
|
handleReset() {
|
|
|
|
|
this.$emit('reset', this.queryParams);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
handleQuery() {
|
|
|
|
|
this.getList();
|
|
|
|
|
handleUpdate(row) {
|
|
|
|
|
alert(row.id);
|
|
|
|
|
},
|
|
|
|
|
resetQuery() {
|
|
|
|
|
this.resetForm("queryForm");
|
|
|
|
|
this.handleQuery();
|
|
|
|
|
handleSortChange() {
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
showDialog(mode, index = null) {
|
|
|
|
|
this.dialogTitle = mode === 'add' ? '新建标签页' : '修改标签页';
|
|
|
|
|
this.currentTabIndex = index;
|
|
|
|
|
if (mode === 'edit') {
|
|
|
|
|
this.currentTabData = {...this.tabs[index]};
|
|
|
|
|
} else {
|
|
|
|
|
this.currentTabData = {
|
|
|
|
|
title: '',
|
|
|
|
|
name: '',
|
|
|
|
|
dbType: '',
|
|
|
|
|
url: '',
|
|
|
|
|
username: '',
|
|
|
|
|
password: '',
|
|
|
|
|
driverClassName: ''
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
this.dialogVisible = true;
|
|
|
|
|
}
|
|
|
|
|
,
|
|
|
|
|
submit() {
|
|
|
|
|
/*this.$refs.form.validate((valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
if (this.currentTabIndex !== null) {
|
|
|
|
|
this.tabs[this.currentTabIndex] = {...this.currentTabData};
|
|
|
|
|
this.activeTab = this.currentTabIndex.toString();
|
|
|
|
|
} else {
|
|
|
|
|
this.tabs.push({...this.currentTabData});
|
|
|
|
|
this.activeTab = (this.tabs.length - 1).toString();
|
|
|
|
|
this.requestFun(this.currentTabData);
|
|
|
|
|
handlePageChange() {
|
|
|
|
|
},
|
|
|
|
|
removeTab(targetName) {
|
|
|
|
|
const tabs = this.tabs;
|
|
|
|
|
let activeName = this.localIndex;
|
|
|
|
|
|
|
|
|
|
if (activeName === targetName) {
|
|
|
|
|
tabs.forEach((tab, index) => {
|
|
|
|
|
if (tab.name === targetName) {
|
|
|
|
|
const nextTab = tabs[index + 1] || tabs[index - 1];
|
|
|
|
|
if (nextTab) {
|
|
|
|
|
activeName = nextTab.name;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
} else {
|
|
|
|
|
const errors = this.$refs.form.fields.filter(field => field.validateState === 'error').map(field => field.validateMessage);
|
|
|
|
|
this.$message.error(errors.join('；'));
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
});*/
|
|
|
|
|
}
|
|
|
|
|
,
|
|
|
|
|
cancel() {
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
this.$refs.form.resetFields();
|
|
|
|
|
}
|
|
|
|
|
,
|
|
|
|
|
removeTab(index) {
|
|
|
|
|
this.tabs.splice(index, 1);
|
|
|
|
|
if (this.activeTab === index.toString()) {
|
|
|
|
|
this.activeTab = Math.max(0, index - 1).toString();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
handleClose(done, event) {
|
|
|
|
|
if (typeof done === 'function') {
|
|
|
|
|
this.$confirm('确认关闭？')
|
|
|
|
|
.then(_ => {
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
done();
|
|
|
|
|
})
|
|
|
|
|
.catch(_ => {
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
,
|
|
|
|
|
handleUpdate(row) {
|
|
|
|
|
alert(row.id)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.localIndex = activeName;
|
|
|
|
|
this.$emit('update:index', activeName);
|
|
|
|
|
this.$emit('remove', targetName);
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.table-container {
|
|
|
|
|
height: calc(100vh - 250px); /* 调整高度以适应页面布局 */
|
|
|
|
|
overflow-y: auto; /* 添加垂直滚动条 */
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
1iyc
3 weeks ago