Skip to content

C
center-finance
提交 71852390 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

feat: AppList Component 新增更多筛选

上级 eb56b09d
隐藏空白字符变更
内嵌 并排
正在显示 包含 193 行增加 和 93 行删除
src/components/base/AppList.vue
浏览文件 @ 71852390
...@@ -34,26 +34,38 @@ ...@@ -34,26 +34,38 @@
<el-form-item class="filter-buttons"> <el-form-item class="filter-buttons">
<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button> <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
<el-button icon="el-icon-refresh-left" @click="reset">重置</el-button> <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
<el-button @click="showMoreFilter" v-if="hasMoreFilter">更多筛选</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="table-list-hd-aside"><slot name="header-aside" /></div> <div class="table-list-hd-aside"><slot name="header-aside" /></div>
</div> </div>
<slot></slot> <slot></slot>
<!-- 主体 -->
<div class="table-list-bd"> <div class="table-list-bd">
<el-table :data="dataList" v-loading="loading" v-bind="$attrs" v-on="$listeners" style="height: 100%" ref="table"> <slot name="body" v-bind="{ data: dataList }">
<template v-for="item in columns"> <el-table
<el-table-column v-bind="item" :key="item.prop" v-if="visible(item)"> :data="dataList"
<template v-slot:default="scope" v-if="item.slots || item.computed"> v-loading="loading"
<slot :name="item.slots" v-bind="scope" v-if="item.slots"></slot> v-bind="$attrs"
<div v-html="item.computed(scope)" v-if="item.computed"></div> v-on="$listeners"
</template> style="height: 100%"
</el-table-column> ref="table"
</template> >
</el-table> <template v-for="item in columns">
<el-table-column v-bind="item" :key="item.prop" v-if="visible(item)">
<template v-slot:default="scope" v-if="item.slots || item.computed">
<slot :name="item.slots" v-bind="scope" v-if="item.slots"></slot>
<div v-html="item.computed(scope)" v-if="item.computed"></div>
</template>
</el-table-column>
</template>
</el-table>
</slot>
</div> </div>
<!-- 底部 -->
<div class="table-list-ft"> <div class="table-list-ft">
<div> <div style="padding: 10px 0">
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
<el-pagination <el-pagination
...@@ -70,6 +82,46 @@ ...@@ -70,6 +82,46 @@
> >
</el-pagination> </el-pagination>
</div> </div>
<!-- 更多筛选 -->
<el-drawer title="更多筛选" :visible.sync="moreFilterVisible" ref="drawer">
<div class="more-filter-drawer">
<div class="more-filter">
<el-form :model="params" ref="moreFilterForm">
<template v-for="item in moreFilters">
<el-form-item :label="item.label" :prop="item.prop" :key="item.prop">
<template v-if="item.slots">
<slot :name="item.slots" v-bind="{ params }"></slot>
</template>
<template v-else>
<!-- 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'"
style="width: 100%"
>
<template v-for="(option, index) in item.options">
<el-option
:label="option[item.labelKey] || option.label"
:value="option[item.valueKey] || option.value"
:key="index"
></el-option>
</template>
</el-select>
</template>
</el-form-item>
</template>
</el-form>
</div>
<div class="more-filter-buttons">
<el-button @click="cancelMoreFilter">取 消</el-button>
<el-button type="primary" @click="primaryMoreFilter">确定</el-button>
</div>
</div>
</el-drawer>
</div> </div>
</template> </template>
...@@ -81,6 +133,8 @@ export default { ...@@ -81,6 +133,8 @@ export default {
remote: { type: Object, default: () => ({}) }, remote: { type: Object, default: () => ({}) },
// 筛选 // 筛选
filters: { type: Array, default: () => [] }, filters: { type: Array, default: () => [] },
// 更多筛选
moreFilters: { type: Array, default: () => [] },
// 列表项 // 列表项
columns: { type: Array, default: () => [] }, columns: { type: Array, default: () => [] },
// 列表数据 // 列表数据
...@@ -95,7 +149,8 @@ export default { ...@@ -95,7 +149,8 @@ export default {
loading: false, loading: false,
params: this.remote.params || {}, params: this.remote.params || {},
dataList: this.data, dataList: this.data,
page: { total: 0, size: this.limit, currentPage: 1 } page: { total: 0, size: this.limit, currentPage: 1 },
moreFilterVisible: false
} }
}, },
watch: { watch: {
...@@ -115,6 +170,9 @@ export default { ...@@ -115,6 +170,9 @@ export default {
computed: { computed: {
table() { table() {
return this.$refs.table return this.$refs.table
},
hasMoreFilter() {
return !!this.moreFilters.length
} }
}, },
methods: { methods: {
...@@ -168,6 +226,8 @@ export default { ...@@ -168,6 +226,8 @@ export default {
reset() { reset() {
// 清空筛选条件 // 清空筛选条件
this.$refs.filterForm && this.$refs.filterForm.resetFields() this.$refs.filterForm && this.$refs.filterForm.resetFields()
// 清空更多筛选条件
this.hasMoreFilter && this.$refs.moreFilterForm && this.$refs.moreFilterForm.resetFields()
// 初始化页码 // 初始化页码
this.page.currentPage = 1 this.page.currentPage = 1
// 刷新列表 // 刷新列表
...@@ -185,6 +245,21 @@ export default { ...@@ -185,6 +245,21 @@ export default {
}, },
visible(item) { visible(item) {
return Object.prototype.hasOwnProperty.call(item, 'visible') ? item.visible : true return Object.prototype.hasOwnProperty.call(item, 'visible') ? item.visible : true
},
// 显示更多筛选
showMoreFilter() {
this.moreFilterVisible = true
},
// 取消更多筛选
cancelMoreFilter() {
this.moreFilterVisible = false
// 清空筛选条件
this.$refs.moreFilterForm && this.$refs.moreFilterForm.resetFields()
},
// 确定更多筛选
primaryMoreFilter() {
this.moreFilterVisible = false
this.search()
} }
}, },
beforeMount() { beforeMount() {
...@@ -221,4 +296,21 @@ export default { ...@@ -221,4 +296,21 @@ export default {
.el-table-column--selection .cell { .el-table-column--selection .cell {
padding: 0 14px !important; padding: 0 14px !important;
} }
.more-filter-drawer {
height: 100%;
display: flex;
flex-direction: column;
padding: 0 20px 20px;
box-sizing: border-box;
}
.more-filter {
flex: 1;
overflow-y: auto;
}
.more-filter-buttons {
display: flex;
.el-button {
flex: 1;
}
}
</style> </style>
src/modules/channel/api.js
浏览文件 @ 71852390
import httpRequest from '@/utils/axios' import httpRequest from '@/utils/axios'
/** /**
* 获取商品列表 * 获取渠道列表
*/ */
export function getGoodsList(data) { export function getChannelList(params) {
return httpRequest.post('/api/shop/commodity/spu/search', data).then({}) // return httpRequest.get('/api/finance/v1/channels/list', { params })
return new Promise((resolve, reject) => {
resolve({
data: [
{ channel_code: '渠道编码1', channel_name: '渠道名称1' },
{ channel_code: '渠道编码2', channel_name: '渠道名称2' },
{ channel_code: '渠道编码3', channel_name: '渠道名称3' }
]
})
})
}
/**
* 获取渠道详情
*/
export function getChannel(params) {
return httpRequest.get('/api/finance/v1/channels/details', { params })
}
/**
* 获取渠道列表
*/
export function changeChanelStatus(data) {
return httpRequest.post('/api/finance/v1/channels/confirm', data)
} }
src/modules/channel/views/List.vue
浏览文件 @ 71852390
<template> <template>
<app-card> <app-card>
<app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange"> <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
<template v-slot:table-x="{ row }"> <template #table-x="{ row }">
<router-link :to="{ name: 'invoiceView', params: { id: row.id } }"> <el-button type="text" @click="handleChangeStatus(row)">审核</el-button>
<el-button type="text">查看</el-button> <el-button type="text" @click="handleChangeStatus(row)">驳回</el-button>
</router-link> </template>
<template #footer>
已选中{{ selectionLength }}条
<el-button type="primary" size="small" @click="handleExport">导出</el-button>
</template> </template>
</app-list> </app-list>
</app-card> </app-card>
...@@ -15,111 +18,94 @@ ...@@ -15,111 +18,94 @@
import AppList from '@/components/base/AppList.vue' import AppList from '@/components/base/AppList.vue'
import AppCard from '@/components/base/AppCard.vue' import AppCard from '@/components/base/AppCard.vue'
// 接口 // 接口
// import { getGoodsList } from '../api' import { getChannelList } from '../api'
export default { export default {
components: { AppCard, AppList }, components: { AppCard, AppList },
data() { data() {
return {} return {
// 已选中的数据
multipleSelection: []
}
}, },
computed: { computed: {
// 列表配置 // 列表配置
tableOptions() { tableOptions() {
return { return {
// remote: { remote: {
// httpRequest: getGoodsList, httpRequest: getChannelList,
// params: { shop_id: this.shopId, spu_id: '', spu_name: '', group_id: '', price_min: '', price_max: '' }, params: { channel_code: '', channel_status: '', channel_type: '', contract_code: '', contract_status: '' }
// beforeRequest: this.beforeRequest },
// },
filters: [ filters: [
{
type: 'select',
prop: 'group_id',
options: this.groupList,
labelKey: 'group_name',
valueKey: 'group_id',
placeholder: '项目'
},
{
type: 'input',
prop: 'spu_name',
placeholder: '客户姓名'
},
{ {
type: 'input', type: 'input',
prop: 'spu_name', prop: 'channel_code',
placeholder: '手机号码' placeholder: '渠道编码'
}, },
{ {
type: 'select', type: 'select',
prop: 'group_id', prop: 'channel_status',
options: this.groupList, options: [
labelKey: 'group_name', { label: '待审核', value: '1' },
valueKey: 'group_id', { label: '已审核', value: '2' }
placeholder: '发票状态' ],
placeholder: '渠道状态'
}, },
{ {
type: 'select', type: 'select',
prop: 'group_id', prop: 'channel_type',
options: this.groupList, options: [
labelKey: 'group_name', { label: '线上', value: '1' },
valueKey: 'group_id', { label: '线下', value: '2' }
placeholder: '发票类型' ],
placeholder: '渠道类型'
} }
], ],
columns: [ moreFilters: [
{ label: '发票代码', prop: 'date', minWidth: 140 },
{ label: '发票号码', prop: 'name', align: 'center', minWidth: 140 },
{ label: '地址', prop: 'address', minWidth: 120 },
{ label: '操作', slots: 'table-x', align: 'right', width: 150 }
],
data: [
{
id: '1',
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{ {
id: '2', label: '合同编码',
date: '2016-05-04', type: 'input',
name: '王小虎', prop: 'contract_code',
address: '上海市普陀区金沙江路 1517 弄' placeholder: '合同编码'
},
{
id: '3',
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, },
{ {
id: '4', label: '合同状态',
date: '2016-05-03', type: 'select',
name: '王小虎', prop: 'contract_status',
address: '上海市普陀区金沙江路 1516 弄' options: [
{ label: '未上传', value: '1' },
{ label: '已上传', value: '2' }
]
} }
],
columns: [
{ type: 'selection', width: '55' },
{ type: 'index', label: '序号', width: '50', align: 'center' },
{ label: '渠道编码', prop: 'channel_code' },
{ label: '渠道名称', prop: 'channel_name' },
{ label: '渠道类型', prop: 'channel_type' },
{ label: '创建人', prop: 'creater' },
{ label: '渠道状态', prop: 'channel_status' },
{ label: '合同状态', prop: 'contract_status' },
{ label: '合同编码', prop: 'contract_code' },
{ label: '更新时间', prop: 'update_date' },
{ label: '操作', slots: 'table-x', align: 'right', width: 120 }
] ]
} }
},
// 已选中多少条数据
selectionLength() {
return this.multipleSelection.length
} }
}, },
methods: { methods: {
beforeRequest(params, isReset) {
// 重置
if (isReset) {
params.price_min = ''
params.price_max = ''
}
params.status = this.activeName === '0' ? '' : this.activeName
params.price_zone = `${params.price_min || ''},${params.price_max || ''}`
return params
},
// 编辑
handleUpdate(row) {
this.$router.push({ name: 'goodsEdit', params: { id: row.spu_id } })
},
// 选择 // 选择
handleSelectionChange(value) { handleSelectionChange(value) {
this.multipleSelection = value this.multipleSelection = value
},
// 导出
handleExport() {
console.log(this.multipleSelection)
} }
} }
} }
......
src/utils/axios.js
浏览文件 @ 71852390
...@@ -4,7 +4,8 @@ import { Message } from 'element-ui' ...@@ -4,7 +4,8 @@ import { Message } from 'element-ui'
const httpRequest = axios.create({ const httpRequest = axios.create({
timeout: 60000, timeout: 60000,
withCredentials: true withCredentials: true,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}) })
// 请求拦截 // 请求拦截
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论