ListTable.vue
<template>
<div>
<slot name="header" :scope="{ form, search, create }" />
<el-table :data="tableData" style="width: 100%">
<el-table-column align="center" :key="item.key" :label="item.label" :width="item.width ? item.width : ''"
v-for="item in head">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row[item.key] }}</span>
</template>
</el-table-column>
<el-table-column v-if="operate.length > 0" label="操作" :width="operate.length * 80" align="center">
<template slot-scope="scope">
<div style="display: flex; flex-direction: row;">
<template v-for="(item, index) in operate">
<div :key="index" style="margin: 0 5px">
<el-button v-if="item.type == 'edit'" size="mini" :title="item.name" type="primary"
@click="handleEdit(scope.row)">
{{ item.name }}
</el-button>
<el-button v-else-if="item.type == 'delete'" size="mini" :title="item.name" type="danger"
@click="handleDelete(scope.row.id, scope.$index)">
{{ item.name }}
</el-button>
<el-button v-else-if="item.type == 'detail'" size="mini" :title="item.name"
@click="handleDetail(scope.row)">
{{ item.name }}
</el-button>
<el-button v-else size="mini" :title="item.name"
@click="$emit('click-item', { data: scope.row, index: scope.index, event: item.type })">
{{ item.name }}
</el-button>
</div>
</template>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'ListTable',
props: {
mode: {
type: String,
required: true,
default: '',
},
head: {
type: Array,
required: true,
default: function () {
return []
}
},
operate: {
type: Array,
required: true,
default: function () {
return []
}
}
},
data () {
return {
page: 1,
pageSize: 30,
list: [],
total: 0,
form: {},
loading: true,
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
computed: {
//请求的接口地址
getUrl () {
let UpperCaseMode = this.mode.toUpperCase()
return UpperCaseMode.replace(/-/g, '_') + '_LIST'
},
deleteUrl () {
let UpperCaseMode = this.mode.toUpperCase()
return 'DELETE_' + UpperCaseMode.replace(/-/g, '_')
},
//跳转的表单路径
editPath () {
let path = ''
switch (this.mode) {
case 'user':
path = 'user-edit'
break
case 'department':
path = 'department-edit'
break
case 'device':
path = 'device-edit'
break
case 'train-device':
path = 'train-device-edit'
break
case 'track':
path = 'track-edit'
break
case 'train':
path = 'train-edit'
break
case 'route':
path = 'route-edit'
break
}
return path
},
},
created () {
//获取表格数据
this.getData(this.page, this.pageSize)
},
mounted () { },
methods: {
// 获取表格数据
getData (page, pageSize) {
console.log('getData进来了', this.getUrl);
let params = {
page: page,
pageSize: pageSize,
}
params = {
...params,
...this.form,
}
this.$request(this.getUrl, params)
.then(({ data }) => {
this.loading = false
const { list, totalSize } = data
console.log('mode', this.mode);
this.list = list;
this.total = parseInt(totalSize)
})
.catch(error => {
this.loading = false
})
},
//新建
create () {
if (!this.editPath) {
return
}
this.$router.push({ path: this.editPath, query: { mode: 'new' } })
},
//点击表格的编辑按钮
handleEdit (data) {
localStorage.setItem('dataForm', JSON.stringify(data))
if (!this.editPath) {
return
}
this.$router.push({
path: this.editPath,
query: { id: data.id, mode: 'edit' },
})
},
handleDetail (data) { },
handleDelete (id, index) { },
search () {
console.log('调用了search方法');
},
}
}
</script>
调用封装的table组件
<template>
<list-table
:head="head"
:operate="operate"
mode="user"
>
<div
slot="header"
slot-scope="{scope}"
class="header"
>
<el-button
type="primary"
size="mini"
@click="scope.create()"
>
新建
</el-button>
</div>
</list-table>
</template>
<script>
export default {
name: 'UserManage',
data() {
return {
head: [
{
label: '用户名',
key: 'username',
},
{
label: '年龄',
key: 'age',
},
{
label: '工号',
key: 'nfc',
},
{
label: '职位',
key: 'post_name',
},
{
label: '真实姓名',
key: 'name',
},
{
label: '角色',
key: 'role_name',
},
],
operate: [
{
name: '编辑',
type: 'edit',
},
{
name: '删除',
type: 'delete',
},
],
}
},
}
</script>
跳转到编辑/新建的form表单页面
<template>
<div class="new-user">
<el-form ref="dataForm" :model="dataForm" label-width="100px" :rules="rules">
<el-row>
<el-col :offset="5" :span="7">
<el-form-item label="用户名" prop="username">
<el-input v-model="dataForm.username" />
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="dataForm.name" />
</el-form-item>
<el-form-item label="工龄" prop="age">
<el-input v-model="dataForm.age" />
</el-form-item>
<el-form-item label="工号" prop="number">
<el-input v-model="dataForm.number" />
</el-form-item>
<el-form-item label="部门" prop="department_id">
<el-select v-model="dataForm.department_id" placeholder="请选择部门">
<el-option v-for="dep in departments" :key="dep.id" :label="dep.dep_name" :value="dep.id" />
</el-select>
</el-form-item>
<el-form-item label="职位" prop="post_id_list">
<el-select v-model="dataForm.post_id_list" multiple placeholder="请选择职位">
<el-option v-for="post in posts" :key="post.id" :label="post.name" :value="post.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item v-if="mode == 'new'" label="密码" prop="password">
<el-input v-model="dataForm.password" type="password" />
</el-form-item>
<el-form-item label="电话号码" prop="phone_number">
<el-input v-model="dataForm.phone_number" />
</el-form-item>
<el-form-item label="人员状态" prop="status">
<el-select v-model="dataForm.status">
<el-option v-for="item of stateList" :key="item.id" :label="item.label" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="站点" prop="station_id">
<el-input v-model="dataForm.station_id" />
</el-form-item>
</el-col>
<el-col :offset="5" :span="14">
<el-form-item>
<el-button type="primary" @click="submit('dataForm')">
{{ modeName }}
</el-button>
<el-button @click="$router.back()">
返回
</el-button>
<el-button @click="resetForm('dataForm')">
重置
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
data () {
return {
modeName: '',
mode: '', //new或者edit
dataForm: {
username: '',
password: '',
name: '',
phone_number: '',
number: '',
department_id: '',
post_id_list: [],
role_id: [],
age: '',
entry_time: '',
avatar: '',
station_id: '106',
status: 1,
},
}
},
created () {
let mode = this.$route.query.mode
this.mode = mode
this.modeName = mode == 'edit' ? '修改' : '新增'
},
methods: {
submit (formName) {
this.$refs[formName].validate(async (valid) => {
if (valid) {
let data = this.dataForm
data = {
...data,
post_id_list: data.post_id_list.join(','),
}
//密码加密
data = Object.assign(data, {
password: md5(data.password)
})
const url = this.mode === 'new' ? 'NEW_USER' : 'EDIT_USER'
const options = {
params: pick(data, [
'id',
'username',
'password',
'phone_number',
'email',
'number',
'age',
'department_id',
'post_id_list',
'status',
'station_id',
'name',
]),
...(this.avatarForm ? {
data: this.avatarForm
} : null),
}
this.$request(url, options)
.then(res => {
this.$message({
message: `${this.modeName}成功`,
showClose: true,
duration: 2000,
type: 'success',
})
this.$router.push(`/system/user`)
})
.catch(error => {
console.log('新增用户error', error);
this.$message({
message: `${this.modeName}失败`,
showClose: true,
duration: 2000,
type: 'error',
})
this.$router.push(`/system/user`)
})
} else {
console.log('error submit!!')
return false
}
})
},
resetForm (formName) {
this.$refs[formName].resetFields()
},
}
}
</script>
