效果图:
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="职位管理" name="post">
<list-table :head="head.post" :operate="operate" mode="post" @click-item="edit" ref="tableDom">
<div slot="header" class="header">
<el-button type="primary" size="mini" @click="dialogFormVisible = true">
新建
</el-button>
</div>
</list-table>
</el-tab-pane>
<el-tab-pane label="车辆类型管理" name="train-type">
<list-table :head="head.train_type" :operate="operate" mode="train-type" @click-item="edit" ref="tableDom">
<div slot="header" class="header">
<el-button type="primary" size="mini" @click="dialogFormVisible = true">
新建
</el-button>
</div>
</list-table>
</el-tab-pane>
<el-dialog :title="dialog.title" :visible.sync="dialogFormVisible" width="500px" @close="resetForm()">
<el-row>
<el-col :offset="4" :span="16">
<el-form :model="form" label-width="100px">
<el-form-item v-for="item in dialog.form" :key="item.label" :label="item.label">
<el-input v-if="item.type == 'input'" v-model="form[item.key]" :placeholder="'请输入' + item.label" />
<el-slider v-if="item.type == 'slider'" v-model="form[item.key]" />
<el-select v-if="item.type == 'select'" v-model="form[item.key]" :placeholder="'请选择' + item.label">
<el-option v-for="item in item.select" :key="item.value" :label="item" :value="item" />
</el-select>
</el-form-item>
</el-form>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">
取 消
</el-button>
<el-button type="primary" @click="submit()">
确 定
</el-button>
</div>
</el-dialog>
</el-tabs>
<script>
computed: {
dialog () {
let typeName = this.type == 'edit' ? '编辑' : '新增'
let urlName = this.type == 'edit' ? 'EDIT_' : 'NEW_'
if (this.activeName == 'post') {
return {
title: `${typeName}职位`,
form: [{
label: '职位名称',
key: 'name',
type: 'input',
},],
url: `${urlName}` +
this.activeName.toLocaleUpperCase().replace(/-/g, '_'),
}
} else if (this.activeName == 'train-type') {
return {
title: `${typeName}车辆类型`,
form: [{
label: '车辆类型名称',
key: 'name',
type: 'input',
},
{
label: '车辆出厂厂家',
key: 'manufacturer',
type: 'input',
},
],
url: `${urlName}` +
this.activeName.toLocaleUpperCase().replace(/-/g, '_'),
}
}
}
}
</script>