Skip to content

C
cms-admin
提交 87241788 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

add TableList

上级 a8b75bda
隐藏空白字符变更
内嵌 并排
正在显示 包含 429 行增加 和 43 行删除
src/components/TableList.vue 0 → 100644
浏览文件 @ 87241788
<template>
<div class="table-list">
<div class="table-list-hd">
<!-- 筛选 -->
<div class="table-list-filter" v-if="filters.length">
<el-form :inline="true" :model="params" size="mini" ref="filterForm">
<template v-for="item in filters">
<el-form-item :prop="item.prop" :key="item.prop">
<!-- input -->
<el-input v-model="params[item.prop]" v-bind="item" clearable v-if="item.type === 'input'" />
<!-- select -->
<el-select v-model="params[item.prop]" clearable v-bind="item" v-if="item.type === 'select'">
<template v-for="option in item.options">
<el-option
:label="option[item.labelKey] || option.label"
:value="option[item.valueKey] || option.value"
:key="option.value"
></el-option>
</template>
</el-select>
</el-form-item>
</template>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="fetchList">搜索</el-button>
<el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="table-list-hd-aside"><slot name="header-aside" /></div>
</div>
<slot></slot>
<div class="table-list-bd">
<el-table :data="dataList" size="mini">
<template v-for="item in columns">
<el-table-column v-bind="item" :key="item.prop">
<template v-slot:default="scope" v-if="item.slots">
<slot :name="item.slots" v-bind="scope"></slot>
</template>
</el-table-column>
</template>
</el-table>
<el-pagination
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, prev, pager, next, sizes, jumper"
:total="400"
class="table-list-pagination"
>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'TableList',
props: {
// 接口请求
remote: { type: Object, default: () => ({}) },
// 筛选
filters: { type: Array, default: () => [] },
// 列表项
columns: { type: Array, default: () => [] },
// 列表数据
data: { type: Array, default: () => [] }
},
data() {
return {
params: this.remote.params || {},
dataList: this.data
}
},
watch: {
'remote.params': {
immediate: true,
handler(data) {
this.params = data
}
},
data: {
immediate: true,
handler(data) {
this.dataList = data
}
}
},
methods: {
fetchList() {
/**
* @param function httpRequest api接口
* @param function beforeRequest 接口请求之前
* @param function callback 接口请求成功回调
*/
const { httpRequest, beforeRequest, callback } = this.remote
if (!httpRequest) {
return
}
// 接口请求之前
if (beforeRequest) {
this.params = beforeRequest(this.params)
}
httpRequest(this.params).then(res => {
this.dataList = callback ? callback(res) : res
})
},
// 重置
reset() {
// 清空筛选条件
this.$refs.filterForm.resetFields()
// 初始化页码
// 刷新列表
this.fetchList()
},
// 刷新
refresh(isForce) {
isForce ? this.reset() : this.fetchList()
}
}
}
</script>
<style lang="scss">
.table-list {
padding: 10px;
}
.table-list-hd {
display: flex;
}
.table-list-filter {
flex: 1;
}
.table-list-pagination {
padding: 20px 0;
text-align: right;
}
</style>
src/pages/content-manage/ads/index.vue
浏览文件 @ 87241788
<template> <template>
<div class="ads"> <div class="ads">
<div class="btn-bar"> <table-list v-bind="tableOptions" ref="tableList">
<el-select v-model="filter.project" placeholder="项目" size="mini" clearable> <template #header-aside>
<el-option v-for="item in projectList" :label="item.project_name" :value="item.project_id" :key="item.project_id"></el-option> <el-button type="primary" size="mini">新建广告</el-button>
</el-select> </template>
<el-input v-model="filter.id" placeholder="ID" size="mini" style="width:220px;" clearable/> <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
<el-select v-model="filter.type" placeholder="类型" size="mini" clearable> <el-tab-pane label="全部" name="0"></el-tab-pane>
<el-option v-for="item in typeList" :label="item.name" :value="item.id" :key="item.id"></el-option> <el-tab-pane label="待审核" name="1"></el-tab-pane>
</el-select> <el-tab-pane label="已驳回" name="2"></el-tab-pane>
<el-button type="primary" icon="el-icon-search" size="mini" @click="fetchList">搜索</el-button> <el-tab-pane label="已通过" name="3"></el-tab-pane>
<el-button icon="el-icon-refresh-left" size="mini" @click="reset">重置</el-button> </el-tabs>
</div> <!-- 图片 -->
<template v-slot:image="scope"><img :src="scope.row.image_url" height="40" /></template>
<!-- 审核状态 -->
<template v-slot:review-status="{ row }">
<el-switch v-model="row.review_status"></el-switch>
</template>
<!-- 发布状态 -->
<template v-slot:publish-status="{ row }">
<el-switch v-model="row.publish_status"></el-switch>
</template>
<!-- 置顶状态 -->
<template v-slot:top-status="{ row }">
<el-switch v-model="row.top_status"></el-switch>
</template>
</table-list>
</div> </div>
</template> </template>
<script> <script>
import TableList from '@/components/TableList'
export default { export default {
components: { TableList },
data() { data() {
return { return {
filter: { activeName: '0',
project: '',
id: '',
type: ''
},
projectList: [ projectList: [
{ project_id: '111', project_name: '官网' }, { project_id: '111', project_name: '官网' },
{ project_id: '222', project_name: 'kellet' } { project_id: '222', project_name: 'kellet' }
...@@ -33,25 +45,88 @@ export default { ...@@ -33,25 +45,88 @@ export default {
] ]
} }
}, },
computed: {
tableOptions() {
return {
remote: {
params: { id: '', type: '', project: '' },
beforeRequest: this.beforeRequest
},
filters: [
{
type: 'select',
placeholder: '项目',
prop: 'project',
options: this.projectList,
labelKey: 'project_name',
valueKey: 'project_id'
},
{ type: 'input', placeholder: 'ID', prop: 'id' },
{
type: 'select',
placeholder: '类型',
prop: 'type',
options: this.typeList,
labelKey: 'name',
valueKey: 'id'
}
],
columns: [
{ prop: 'image_url', label: '图片', slots: 'image' },
{ prop: 'ad_id', label: '广告ID' },
{ prop: 'title', label: '标题' },
{ prop: 'start_time', label: '开始时间' },
{ prop: 'end_time', label: '结束时间' },
{ prop: 'project_name', label: '项目' },
{ prop: 'type', label: '类型' },
{ prop: 'top', label: '权重' },
{ prop: 'author', label: '创建人' },
{ prop: 'review_status', label: '审核状态', slots: 'review-status' },
{ prop: 'publish_status', label: '发布状态', slots: 'publish-status' },
{ prop: 'top_status', label: '置顶状态/权重', slots: 'top-status' },
{ prop: 'create_time', label: '创建时间' }
],
data: [
{
image_url: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
ad_id: '20210425001',
title: '专业化的紫荆',
start_time: '2020-01-23 14:23:34',
end_time: '2020-01-23 14:23:34',
project_name: 'sofia项目站',
type: 'banner广告',
top: '100',
author: '作者',
review_status: '1',
publish_status: '1',
top_status: '1',
create_time: '2020-01-23 14:23:34'
}
]
}
}
},
methods: { methods: {
reset() { beforeRequest(params) {
Object.keys(this.filter).map(key => { this.filter[key] = '' }) params.status = this.activeName
this.fetchList() return params
}, },
fetchList() { handleTabClick() {
// true 强制刷新
this.$refs.tableList.refresh(true)
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.ads{ .ads {
width:calc(100% - 20px); width: calc(100% - 20px);
height:calc(100% - 20px); height: calc(100% - 20px);
margin:10px; margin: 10px;
background:#fff; background: #fff;
border-radius:5px; border-radius: 5px;
} }
.btn-bar{ .btn-bar {
padding:10px; padding: 10px;
} }
</style> </style>
\ No newline at end of file
src/pages/settings/project/index.vue
浏览文件 @ 87241788
<template> <template>
<div>项目管理</div> <div class="ads">
<table-list v-bind="tableOptions" ref="tabList">
<template #header-aside>
<el-button type="primary" size="mini">新建项目</el-button>
</template>
<!-- 状态 -->
<template v-slot:status="{ row }">
<el-switch v-model="row.review_status"></el-switch>
</template>
</table-list>
</div>
</template> </template>
<script> <script>
import TableList from '@/components/TableList'
export default { export default {
components: { TableList },
data() { data() {
return {} return {
activeName: '0',
projectList: [
{ project_id: '111', project_name: '官网' },
{ project_id: '222', project_name: 'kellet' }
],
roleList: [
{ id: '111', name: '超级管理员' },
{ id: '222', name: '数据管理员' }
]
}
},
computed: {
tableOptions() {
return {
remote: {
params: {}
},
filters: [
{
type: 'select',
placeholder: '项目',
prop: 'project',
options: this.projectList,
labelKey: 'project_name',
valueKey: 'project_id'
},
{ type: 'input', placeholder: '项目ID', prop: 'id' },
{
type: 'select',
placeholder: '角色',
prop: 'type',
options: this.roleList,
labelKey: 'name',
valueKey: 'id'
}
],
columns: [
{ prop: 'id', label: '项目ID' },
{ prop: 'title', label: '项目名称' },
{ prop: 'subtilte', label: '项目简称' },
{ prop: 'type', label: '项目类型' },
{ prop: 'url', label: '项目网址' },
{ prop: 'author', label: '创建人' },
{ prop: 'create_time', label: '创建时间' },
{ prop: 'status', label: '状态', slots: 'status' }
]
}
}
} }
} }
</script> </script>
<style scoped> <style scoped>
</style> </style>
\ No newline at end of file
src/pages/settings/staff/index.vue
浏览文件 @ 87241788
<template> <template>
<div>员工管理</div> <div class="ads">
<table-list v-bind="tableOptions" ref="tabList">
<template #header-aside>
<el-button type="primary" size="mini">新建员工</el-button>
</template>
<!-- 发布状态 -->
<template v-slot:status="{ row }">
<el-switch v-model="row.status"></el-switch>
</template>
<!-- 操作 -->
<template v-slot:tools="{ row }">
<el-button type="text" @click="changePassword(row)">重置密码</el-button>
<el-button type="text" @click="changePhone(row)">更换手机号</el-button>
</template>
</table-list>
</div>
</template> </template>
<script> <script>
import TableList from '@/components/TableList'
export default { export default {
components: { TableList },
data() { data() {
return {} return {
activeName: '0',
projectList: [
{ project_id: '111', project_name: '官网' },
{ project_id: '222', project_name: 'kellet' }
],
roleList: [
{ id: '111', name: '超级管理员' },
{ id: '222', name: '数据管理员' }
]
}
},
computed: {
tableOptions() {
return {
remote: {
params: {}
},
filters: [
{
type: 'select',
placeholder: '项目',
prop: 'project',
options: this.projectList,
labelKey: 'project_name',
valueKey: 'project_id'
},
{ type: 'input', placeholder: '手机号/邮箱', prop: 'id' },
{
type: 'select',
placeholder: '角色',
prop: 'type',
options: this.roleList,
labelKey: 'name',
valueKey: 'id'
}
],
columns: [
{ prop: 'name', label: '姓名' },
{ prop: 'role', label: '角色' },
{ prop: 'phone', label: '手机号' },
{ prop: 'email', label: '邮箱' },
{ prop: 'proejct_name', label: '项目' },
{ prop: 'author', label: '创建人' },
{ prop: 'create_time', label: '创建时间' },
{ prop: 'status', label: '状态', slots: 'status' },
{ prop: 'x', label: '操作', slots: 'tools' }
],
data: [{ name: 'a', role: '超级管理员', phone: '123812312321', email: 'dsfdsxxx' }]
}
}
},
methods: {
// 重置密码
changePassword(data) {
console.log(data)
},
// 更换手机号
changePhone(data) {
console.log(data)
}
} }
} }
</script> </script>
<style scoped> <style scoped>
</style> </style>
\ No newline at end of file
src/pages/settings/type/index.vue
浏览文件 @ 87241788
<template> <template>
<div>类型管理</div> <div class="ads">
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="项目类型" name="0" lazy>
<table-list v-bind="projectTableOptions" ref="tabList"></table-list>
</el-tab-pane>
<el-tab-pane label="内容类型" name="1" lazy>
<table-list v-bind="contentTableOptions" ref="tabList"></table-list>
</el-tab-pane>
</el-tabs>
</div>
</template> </template>
<script> <script>
import TableList from '@/components/TableList'
export default { export default {
components: { TableList },
data() { data() {
return {} return {
} activeName: '0',
// 项目类型
projectTableOptions: {
remote: {
params: {}
},
columns: [
{ prop: 'id', label: '项目类型ID' },
{ prop: 'type', label: '项目类型' },
{ prop: 'author', label: '创建人' },
{ prop: 'create_time', label: '创建时间' },
{ prop: 'status', label: '状态' }
]
},
// 内容类型
contentTableOptions: {
remote: {
params: {}
},
columns: [
{ prop: 'id', label: '内容ID' },
{ prop: 'type_name', label: '类型名称' },
{ prop: 'type', label: '内容类型' },
{ prop: 'author', label: '创建人' },
{ prop: 'create_time', label: '创建时间' },
{ prop: 'query_id', label: '参数ID' },
{ prop: 'status', label: '状态' }
]
}
}
},
methods: {}
} }
</script> </script>
<style scoped> <style scoped>
</style> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论