Skip to content

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

feat: 新增表头设置

上级 b10f132c
隐藏空白字符变更
内嵌 并排
正在显示 包含 156 行增加 和 17 行删除
package-lock.json
浏览文件 @ ef6c7525
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
"query-string": "^7.0.1", "query-string": "^7.0.1",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-router": "^3.5.2", "vue-router": "^3.5.2",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2", "vuex": "^3.6.2",
"xlsx": "^0.17.1" "xlsx": "^0.17.1"
}, },
...@@ -26,7 +27,7 @@ ...@@ -26,7 +27,7 @@
"eslint-plugin-node": "^11.1.0", "eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0", "eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^7.16.0", "eslint-plugin-vue": "^7.16.0",
"sass": "^1.38.0", "sass": "^1.32.13",
"vite": "^2.5.0", "vite": "^2.5.0",
"vite-plugin-vue2": "^1.8.1", "vite-plugin-vue2": "^1.8.1",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "^2.6.14"
...@@ -5276,9 +5277,9 @@ ...@@ -5276,9 +5277,9 @@
"dev": true "dev": true
}, },
"node_modules/sass": { "node_modules/sass": {
"version": "1.38.1", "version": "1.32.13",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.38.1.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
"integrity": "sha512-Lj8nPaSYOuRhgqdyShV50fY5jKnvaRmikUNalMPmbH+tKMGgEKVkltI/lP30PEfO2T1t6R9yc2QIBLgOc3uaFw==", "integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"chokidar": ">=3.0.0 <4.0.0" "chokidar": ">=3.0.0 <4.0.0"
...@@ -5448,6 +5449,11 @@ ...@@ -5448,6 +5449,11 @@
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true "dev": true
}, },
"node_modules/sortablejs": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
"integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
},
"node_modules/source-map": { "node_modules/source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
...@@ -6171,6 +6177,14 @@ ...@@ -6171,6 +6177,14 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true "dev": true
}, },
"node_modules/vuedraggable": {
"version": "2.24.3",
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
"integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
"dependencies": {
"sortablejs": "1.10.2"
}
},
"node_modules/vuex": { "node_modules/vuex": {
"version": "3.6.2", "version": "3.6.2",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz", "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
...@@ -10460,9 +10474,9 @@ ...@@ -10460,9 +10474,9 @@
"dev": true "dev": true
}, },
"sass": { "sass": {
"version": "1.38.1", "version": "1.32.13",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.38.1.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
"integrity": "sha512-Lj8nPaSYOuRhgqdyShV50fY5jKnvaRmikUNalMPmbH+tKMGgEKVkltI/lP30PEfO2T1t6R9yc2QIBLgOc3uaFw==", "integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
"dev": true, "dev": true,
"requires": { "requires": {
"chokidar": ">=3.0.0 <4.0.0" "chokidar": ">=3.0.0 <4.0.0"
...@@ -10585,6 +10599,11 @@ ...@@ -10585,6 +10599,11 @@
} }
} }
}, },
"sortablejs": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
"integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
},
"source-map": { "source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
...@@ -11163,6 +11182,14 @@ ...@@ -11163,6 +11182,14 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true "dev": true
}, },
"vuedraggable": {
"version": "2.24.3",
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
"integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
"requires": {
"sortablejs": "1.10.2"
}
},
"vuex": { "vuex": {
"version": "3.6.2", "version": "3.6.2",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz", "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
......
package.json
浏览文件 @ ef6c7525
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
"query-string": "^7.0.1", "query-string": "^7.0.1",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-router": "^3.5.2", "vue-router": "^3.5.2",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2", "vuex": "^3.6.2",
"xlsx": "^0.17.1" "xlsx": "^0.17.1"
}, },
...@@ -31,7 +32,7 @@ ...@@ -31,7 +32,7 @@
"eslint-plugin-node": "^11.1.0", "eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0", "eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^7.16.0", "eslint-plugin-vue": "^7.16.0",
"sass": "^1.38.0", "sass": "^1.32.13",
"vite": "^2.5.0", "vite": "^2.5.0",
"vite-plugin-vue2": "^1.8.1", "vite-plugin-vue2": "^1.8.1",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "^2.6.14"
......
src/api/base.js
浏览文件 @ ef6c7525
...@@ -27,3 +27,12 @@ export function uploadFile(data) { ...@@ -27,3 +27,12 @@ export function uploadFile(data) {
headers: { 'Content-Type': 'multipart/form-data' } headers: { 'Content-Type': 'multipart/form-data' }
}) })
} }
// 获取表头
export function getTableColumns(params) {
return httpRequest.get('/api/finance/v1/payments/title-list', { params })
}
// 更新表头
export function updateTableColumns(data) {
return httpRequest.post('/api/finance/v1/payments/update-title', data)
}
src/assets/theme/index.css deleted 100644 → 0
浏览文件 @ b10f132c
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/theme/style.scss 0 → 100644
浏览文件 @ ef6c7525
$--color-primary: #3276fc;
/* 改变 icon 字体路径变量，必需 */
$--font-path: 'element-ui/lib/theme-chalk/fonts';
@import 'element-ui/packages/theme-chalk/src/index';
src/components/base/AppList.vue
浏览文件 @ ef6c7525
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
<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-button @click="showMoreFilter" v-if="hasMoreFilter">更多筛选</el-button>
<el-button @click="showColumnsOptions" v-if="hasColumnsOptions">表头</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -52,7 +53,7 @@ ...@@ -52,7 +53,7 @@
style="height: 100%" style="height: 100%"
ref="table" ref="table"
> >
<template v-for="item in columns"> <template v-for="item in currentColumns">
<el-table-column v-bind="item" :key="item.prop" v-if="visible(item)"> <el-table-column v-bind="item" :key="item.prop" v-if="visible(item)">
<template v-slot:default="scope" v-if="item.slots || item.computed"> <template v-slot:default="scope" v-if="item.slots || item.computed">
<slot :name="item.slots" v-bind="scope" v-if="item.slots"></slot> <slot :name="item.slots" v-bind="scope" v-if="item.slots"></slot>
...@@ -122,12 +123,35 @@ ...@@ -122,12 +123,35 @@
</div> </div>
</div> </div>
</el-drawer> </el-drawer>
<!-- 表头 -->
<el-dialog title="表头设置" :visible.sync="columnsOptionsVisible" width="500px" :close-on-click-modal="false">
<p class="tips">上下拖动表头名称可调整表头顺序</p>
<ul class="column-options-list">
<li>
<div class="name">表头名称</div>
<div class="actions">隐藏/显示</div>
</li>
<draggable v-model="editableColumns">
<li v-for="(item, index) in editableColumns" :key="index">
<div class="name">{{ item.label }}</div>
<div class="actions"><el-switch v-model="item.visible"></el-switch></div>
</li>
</draggable>
</ul>
<template #footer>
<el-button type="text" @click="cancelColumnsOptions">取消</el-button>
<el-button type="primary" @click="primaryColumnsOptions">保存</el-button>
</template>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import draggable from 'vuedraggable'
import { getTableColumns, updateTableColumns } from '@/api/base.js'
export default { export default {
name: 'AppList', name: 'AppList',
components: { draggable },
props: { props: {
// 接口请求 // 接口请求
remote: { type: Object, default: () => ({}) }, remote: { type: Object, default: () => ({}) },
...@@ -142,7 +166,9 @@ export default { ...@@ -142,7 +166,9 @@ export default {
// 是否含有翻页 // 是否含有翻页
hasPagination: { type: Boolean, default: true }, hasPagination: { type: Boolean, default: true },
// 每页多少条数据 // 每页多少条数据
limit: { type: Number, default: 20 } limit: { type: Number, default: 20 },
// 列表项配置
columnsOptions: { type: Object, default: () => ({}) }
}, },
data() { data() {
return { return {
...@@ -150,7 +176,10 @@ export default { ...@@ -150,7 +176,10 @@ export default {
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 moreFilterVisible: false,
columnsOptionsVisible: false,
editableColumns: [], // 可编辑表头
customColumns: [] // 用户自定义表头
} }
}, },
watch: { watch: {
...@@ -171,8 +200,24 @@ export default { ...@@ -171,8 +200,24 @@ export default {
table() { table() {
return this.$refs.table return this.$refs.table
}, },
// 是否有更多筛选
hasMoreFilter() { hasMoreFilter() {
return !!this.moreFilters.length return !!this.moreFilters.length
},
// 是否有表头设置
hasColumnsOptions() {
return this.columnsOptions ? !!Object.keys(this.columnsOptions).length : false
},
// 当前列表项
currentColumns() {
if (this.hasColumnsOptions && this.customColumns.length) {
return this.columns.map(column => {
const found = this.customColumns.find(item => item.prop === column.prop)
return { ...column, visible: found ? found.visible : true }
})
} else {
return this.columns
}
} }
}, },
methods: { methods: {
...@@ -197,11 +242,11 @@ export default { ...@@ -197,11 +242,11 @@ export default {
if (beforeRequest) { if (beforeRequest) {
params = beforeRequest(params, isReset) params = beforeRequest(params, isReset)
} }
// for (const key in params) { for (const key in params) {
// if (params[key] === '' || params[key] === undefined || params[key] === undefined) { if (params[key] === '' || params[key] === undefined || params[key] === undefined) {
// delete params[key] delete params[key]
// } }
// } }
this.loading = true this.loading = true
httpRequest(params) httpRequest(params)
.then(res => { .then(res => {
...@@ -260,9 +305,44 @@ export default { ...@@ -260,9 +305,44 @@ export default {
primaryMoreFilter() { primaryMoreFilter() {
this.moreFilterVisible = false this.moreFilterVisible = false
this.search() this.search()
},
// 显示表头设置
showColumnsOptions() {
this.editableColumns = this.currentColumns
.filter(item => item.label && item.prop)
.map(item => {
return { ...item }
})
this.columnsOptionsVisible = true
},
// 取消表头设置
cancelColumnsOptions() {
this.columnsOptionsVisible = false
},
// 保存表头设置
primaryColumnsOptions() {
const { key } = this.columnsOptions
updateTableColumns({ key, value: JSON.stringify(this.editableColumns) }).then(res => {
this.$message.success('保存成功')
this.columnsOptionsVisible = false
this.customColumns = this.editableColumns
})
},
// 获取用户设置的列表项
getCustomColumns() {
const { key } = this.columnsOptions
getTableColumns({ key }).then(res => {
const { value } = res.data
try {
this.customColumns = value ? JSON.parse(value) : []
} catch (error) {
console.log('解析列表项错误', error)
}
})
} }
}, },
beforeMount() { beforeMount() {
this.hasColumnsOptions && this.getCustomColumns()
this.fetchList() this.fetchList()
} }
} }
...@@ -313,4 +393,20 @@ export default { ...@@ -313,4 +393,20 @@ export default {
flex: 1; flex: 1;
} }
} }
.column-options-list {
// padding: 20px 0;
list-style: none;
li {
padding: 10px 0;
display: flex;
justify-content: space-between;
background-color: #fff;
// border: 1px solid rgba(0, 0, 0, 0.125);
// margin-bottom: -1px;
cursor: move;
// &:hover {
// background-color: #ebf1ff;
// }
}
}
</style> </style>
src/main.js
浏览文件 @ ef6c7525
...@@ -9,7 +9,7 @@ import beforeEnter from '@/utils/beforeEnter' ...@@ -9,7 +9,7 @@ import beforeEnter from '@/utils/beforeEnter'
// Element-UI // Element-UI
import ElementUI from 'element-ui' import ElementUI from 'element-ui'
import '@/assets/theme/index.css' import '@/assets/theme/style.scss'
Vue.use(ElementUI) Vue.use(ElementUI)
// 注册模块 // 注册模块
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论