|
|
|
@ -14,9 +14,8 @@
|
|
|
|
|
<el-menu-item v-for="(tab, index) in tabs"
|
|
|
|
|
:key="index"
|
|
|
|
|
:index="index.toString()"
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
|
<span>{{ tab.title }}{{ index }}</span>
|
|
|
|
|
<span>{{ tab.title }}</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
</el-menu>
|
|
|
|
|
</el-card>
|
|
|
|
@ -34,14 +33,42 @@
|
|
|
|
|
>
|
|
|
|
|
<el-tab-pane v-for="(tab, index) in tabs"
|
|
|
|
|
:key="index"
|
|
|
|
|
:label="tab.title"
|
|
|
|
|
:name="index.toString()"
|
|
|
|
|
:label="tab.title"
|
|
|
|
|
>
|
|
|
|
|
<el-button type="text" @click.stop="showDialog('edit', index)">修改</el-button>
|
|
|
|
|
<el-button type="text" @click.stop="disconnectTab(index)">断开</el-button>
|
|
|
|
|
<el-button type="text" @click.stop="disconnectTab(index)">打开</el-button>
|
|
|
|
|
|
|
|
|
|
<!-- 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
|
|
|
|
@ -62,10 +89,32 @@
|
|
|
|
|
:width="column.width"
|
|
|
|
|
:align="column.align"
|
|
|
|
|
:show-overflow-tooltip="column.tooltip"
|
|
|
|
|
>
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
@ -132,15 +181,30 @@ export default {
|
|
|
|
|
name: 'TabComponent',
|
|
|
|
|
initMenuItem: {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: () => []
|
|
|
|
|
default: () => [{
|
|
|
|
|
title: '数据库',
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
callBackSelect: {
|
|
|
|
|
type: Function,
|
|
|
|
|
default: () => ({})
|
|
|
|
|
},
|
|
|
|
|
initForm: {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: () => [{
|
|
|
|
|
type: 'input',
|
|
|
|
|
label: '表名',
|
|
|
|
|
prop: 'tableName',
|
|
|
|
|
placeholder: '请输入表名',
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
initColumns: {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: () => []
|
|
|
|
|
default: () => [{
|
|
|
|
|
type: 'id',
|
|
|
|
|
width: 55,
|
|
|
|
|
align: 'center'
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
initTableData: {
|
|
|
|
|
type: Array,
|
|
|
|
@ -156,6 +220,7 @@ export default {
|
|
|
|
|
return {
|
|
|
|
|
active: this.initActive,
|
|
|
|
|
tabs: this.initMenuItem,
|
|
|
|
|
form: this.initForm,
|
|
|
|
|
columns: this.initColumns,
|
|
|
|
|
tableData: this.initTableData,
|
|
|
|
|
loading: false,
|
|
|
|
@ -175,7 +240,8 @@ export default {
|
|
|
|
|
total: 0,
|
|
|
|
|
queryParams: {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 10
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
activeTab: {},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -183,24 +249,52 @@ export default {
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
/* 选中菜单 */
|
|
|
|
|
onSelect(index) {
|
|
|
|
|
this.active = index
|
|
|
|
|
this.loading = true
|
|
|
|
|
this.callBackSelect(this.active, this.queryParams)
|
|
|
|
|
this.loading = false
|
|
|
|
|
this.queryParams.activeTab = this.tabs[index]
|
|
|
|
|
this.callBackSelect(this.queryParams)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/* tabs 单击实践 */
|
|
|
|
|
/* tabs 单击事件 */
|
|
|
|
|
onClick(tab) {
|
|
|
|
|
this.active = tab.name;
|
|
|
|
|
this.loading = true
|
|
|
|
|
this.callBackSelect(this.active, this.queryParams)
|
|
|
|
|
this.loading = false
|
|
|
|
|
this.queryParams.activeTab = this.tabs[tab.name]
|
|
|
|
|
this.callBackSelect(this.queryParams)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/* 加载表格数据*/
|
|
|
|
@ -210,9 +304,19 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getList() {
|
|
|
|
|
this.callBackSelect(this.active, this.queryParams)
|
|
|
|
|
this.callBackSelect(this.queryParams)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
handleQuery() {
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
resetQuery() {
|
|
|
|
|
this.resetForm("queryForm");
|
|
|
|
|
this.handleQuery();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
showDialog(mode, index = null) {
|
|
|
|
|
this.dialogTitle = mode === 'add' ? '新建标签页' : '修改标签页';
|
|
|
|
|
this.currentTabIndex = index;
|
|
|
|
@ -265,10 +369,6 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
,
|
|
|
|
|
disconnectTab(index) {
|
|
|
|
|
console.log(`断开标签页 ${index}`);
|
|
|
|
|
}
|
|
|
|
|
,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
handleClose(done, event) {
|
|
|
|
@ -285,6 +385,9 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
,
|
|
|
|
|
handleUpdate(row) {
|
|
|
|
|
alert(row.id)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|