vue后台管理系统中，table表格页面使用mixins【混入自用】

mixins文件夹中的view-module.js

在此js中写一些公用的data配置如：查询条件，分页属性等和table表格有关的data属性

在此js中写一些公用的methods方法如：查询，分页，列表排序，删除，导出，导入方法等操作table表格的方法

import Cookies from 'js-cookie'
import qs from 'qs'
import { mapGetters } from 'vuex'
export default {data() {/* eslint-disable */return {// 设置属性mixinViewModuleOptions: {createdIsNeed: true, // 此页面是否在创建时，调用查询数据列表接口？activatedIsNeed: false, // 此页面是否在激活（进入）时，调用查询数据列表接口？getDataListURL: '', // 数据列表接口，API地址getDataListIsPage: false, // 数据列表接口，是否需要分页？deleteURL: '', // 删除接口，API地址deleteIsBatch: false, // 删除接口，是否需要批量？deleteIsBatchKey: 'id', // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...exportURL: '' // 导出接口，API地址},// 默认属性dataForm: {}, // 查询条件dataList: [], // 数据列表order: '', // 排序，asc／descorderField: '', // 排序，字段page: 1, // 当前页码limit: 10, // 每页数total: 0, // 总条数dataListLoading: false, // 数据列表，loading状态dataListSelections: [], // 数据列表，多选项addOrUpdateVisible: false // 新增／更新，弹窗visible状态}/* eslint-enable */},computed: {...mapGetters(['currentActiveTab'])},created() {if (this.mixinViewModuleOptions.createdIsNeed) {if (!this.mixinViewModuleOptions.specialSearch) {this.query()}}},activated() {if (this.mixinViewModuleOptions.activatedIsNeed) {if (!this.mixinViewModuleOptions.specialSearch) {this.query()}}},methods: {// 获取数据列表query() {this.dataListLoading = truethis.$http.get(this.mixinViewModuleOptions.getDataListURL, {params: {order: this.order,orderField: this.orderField,page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,...this.dataForm}}).then(({ data: res }) => {this.dataListLoading = falseif (res.code !== 0) {this.dataList = []this.total = 0return this.$message.error(res.msg)}this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.datathis.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0}).catch(() => {this.dataListLoading = false})},// 多选dataListSelectionChangeHandle(val) {this.dataListSelections = val},// 排序dataListSortChangeHandle(data) {if (!data.order || !data.prop) {this.order = ''this.orderField = ''return false}this.order = data.order.replace(/ending$/, '')this.orderField = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()this.query()},// 分页, 每页条数pageSizeChangeHandle(val) {this.page = 1this.limit = valthis.query()},// 分页, 当前页pageCurrentChangeHandle(val) {this.page = valthis.query()},getDataList: function() {this.page = 1console.log(1)this.query()},// 新增 / 修改addOrUpdateHandle(id) {this.activeAC = ''this.addOrUpdateVisible = trueif (id === 1) {this.activeAC = id}this.$nextTick(() => {this.$refs.addOrUpdate.dataForm.id = idthis.$refs.addOrUpdate.init()})// console.log(this.activeAC)},// 删除deleteHandle(id) {if (this.mixinViewModuleOptions.deleteIsBatch && !id && this.dataListSelections.length <= 0) {return this.$message({message: this.$t('prompt.deleteBatch'),type: 'warning',duration: 500})}this.$confirm(this.$t('prompt.info', { 'handle': this.$t('delete') }), this.$t('prompt.title'), {confirmButtonText: this.$t('confirm'),cancelButtonText: this.$t('cancel'),type: 'warning'}).then(() => {this.$http.delete(`${this.mixinViewModuleOptions.deleteURL}${this.mixinViewModuleOptions.deleteIsBatch ? '' : '/' + id}`,this.mixinViewModuleOptions.deleteIsBatch ? {'data': id ? [id] : this.dataListSelections.map(item => item[this.mixinViewModuleOptions.deleteIsBatchKey])} : {}).then(({ data: res }) => {if (res.code !== 0) {return this.$message.error(res.msg)}this.$message({message: this.$t('prompt.success'),type: 'success',duration: 500,onClose: () => {this.query()}})}).catch(() => {})}).catch(() => {})},// 导出exportHandle() {var params = qs.stringify({'token': Cookies.get('token'),...this.dataForm})window.location.href = `${window.SITE_CONFIG['apiURL']}${this.mixinViewModuleOptions.exportURL}?${params}`}}
}

在vue组件中混入view-module.js

<template><el-card class="aui-card--fill" id="suggestion-list" shadow="never"><div class="mod-product__course}"><el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"><el-form-item><el-select clearable placeholder="请选择科目" style="width:220px" v-model="dataForm.category"><el-option :key="'lesson'+index" :label="lesson.dictLabel" :value="lesson.dictValue"v-for="(lesson,index) in lessons" /></el-select></el-form-item><el-form-item><el-input clearable placeholder="请输入搜索内容" v-model="dataForm.content"></el-input></el-form-item><el-form-item><el-button @click="getDataList()">{{ $t('query') }}</el-button></el-form-item></el-form><el-table :data="dataList" @sort-change="dataListSortChangeHandle" border style="width: 100%;"v-loading="dataListLoading"><el-table-column align="center" header-align="center" label="用户" width="250"><template slot-scope="scope">{{scope.row.userEntity?scope.row.userEntity.username:''}}</template></el-table-column><el-table-column align="center" header-align="center" label="时间" prop="createDate" width="250"><template v-slot="{ row }">{{row.createDate | datetime}}</template></el-table-column><el-table-column align="center" header-align="center" label="内容" prop="content"></el-table-column><el-table-column align="center" header-align="center" label="解决状态" prop="solve" sortable="custom" width="200"><template slot-scope="scope"><span>{{scope.row.solve ? '是' : '否'}}</span></template></el-table-column><!-- <el-table-column prop="" label="知识点" header-align="center" align="center"><template slot-scope="scope"><span class="knowledge" @click="showTree(scope.row)">知识点</span></template></el-table-column>--><el-table-column :label="$t('handle')" align="center" fixed="right" header-align="center" width="200"><template v-slot="{ row }"><el-button @click="confirmSolution(row)" size="small" type="text" v-if="row.solve==0">确认解决</el-button><el-button size="small" type="text" v-if="row.solve==1">————</el-button></template></el-table-column></el-table><el-pagination :current-page="page" :page-size="limit" :page-sizes="[10, 20, 50, 100]" :total="total"@current-change="pageCurrentChangeHandle" @size-change="pageSizeChangeHandle"layout="total, sizes, prev, pager, next, jumper"></el-pagination></div><el-dialog :close-on-click-modal="false" :title="$t('course.KnowledgePoints')" :visible.sync="dialog.show"width="30%"><div><el-input placeholder="输入关键字进行过滤" v-model="tree.filterText"></el-input><div class="tree-box"><el-tree :data="tree.data" :filter-node-method="filterNode" :props="tree.defaultProps" class="filter-tree"default-expand-all ref="tree"></el-tree></div></div><span class="dialog-footer" slot="footer"></span></el-dialog></el-card>
</template><script>
import mixinViewModule from '@/mixins/view-module'
import {mapGetters,mapActions
} from 'vuex'
export default {mixins: [mixinViewModule],props: ['category'],data() {return {mixinViewModuleOptions: {getDataListURL: '/prod/product/courseSuggest/courseSuggestList',getDataListIsPage: true,deleteURL: '/prod/product/course',deleteIsBatch: true,createdIsNeed: false},dialog: {show: false},lessons: [],tree: {filterText: '',defaultProps: {children: 'children',label: 'label'},data: []},dataForm: {id: '',category: null},stage: 'stage'}},computed: {...mapGetters(['dictMap', 'dictValueMap'])},watch: {'tree.filterText'(val) {this.$refs.tree.filter(val)}// category(val) {//   if (val) {//     this.dataForm.category = val//     this.query()//   }// }},created() {this.getAllDicts().then(() => {this.lessons = [...this.dictMap['100'].dataList,...this.dictMap['200'].dataList,...this.dictMap['300'].dataList,...this.dictMap['spec'].dataList]})},mounted() {this.query()},methods: {...mapActions(['getAllDicts']),filterNode(value, data) {if (!value) return truereturn data.label.indexOf(value) !== -1},showTree(rowData) {this.dialog.show = true},confirmSolution(rowData) {let confirmSolution = Object.assign({ tbUserId: rowData.userEntity.id }, rowData)this.$http.put('/prod/product/courseSuggest/confirmSolve', confirmSolution).then(res => {if (res.data.code === 0) {this.$message({message: this.$t('prompt.success'),type: 'success'})this.query()} else {this.$message.error(res.data.msg)}})}}
}
</script>
<style lang='scss'></style>

vue后台管理系统中，table表格页面使用mixins【混入自用】相关推荐

后台管理系统中的登录页面
通常制作登录页面,主要有几方面内容: 1.登录页面要支持自适应,也就是手机登录和PC端登录,都可以根据分辨率或显示进行自动调整: 2.用户登录的方式:账号.手机验证码.微信扫码登录: 3.如何将登录信 ...
element-ui中table表格页面汇总固定在第一行
如图首先需要以下样式--注意加入/deep//deep/ .el-table {display: flex;flex-direction: column;}/deep/ .el-table__bod ...
vue+element后台管理系统(下载excel表格)
标题 vue后台管理系统下载excel表格 1.调用后台接口传入三个参数,url,data参数,第三个参数为一个对象,表格下载返回类型. 2.创建 Blob实列传入后台返回的数据和以对象形式声明类型参 ...
vue 后台系统中多页面标签
在后台开发中,常用一种页面标签工具,每次点击菜单栏时,会在页面区域上方增加一个[标签页]如下图,可关闭,可切换页面等功能,常见于后台管理系统中. 以前,我以为这个是利用tabs组件开发的,但是后来看了 ...
vue中table表格导出为图片格式
vue中table表格点击下载为图片格式实现思路:给页面中需要导出为图片的内容添加id名,调用封好的方法即可直接导出.以下是具体的实现方法 1.安装依赖 npm install --save htm ...
哔哩哔哩Allen前端vue后台管理系统笔记
哔哩哔哩Allen前端vue后台管理系统笔记 Element ui 引入全局引入按需引入嵌套路由左侧菜单栏的样式 Container布局,左侧菜单栏commonAside组件 commonAs ...
正确姿势开发vue后台管理系统
项目地址 vue-admin-webapp 欢迎star,fork 前言相信许多人和我一样刚接触 vue 时看文档都很枯燥,看完 vue,还有 vueRouter .vuex .vue-cli.es ...
vue后台管理系统搭建
vue后台管理系统搭建前提安装node.js 控制台安装yarn:npm install -g yarn 查看yarn版本:yarn --version 注:-g表示的是全局安装淘宝镜像安装:n ...
layui table 弹出层刷新_layui 关闭open弹出框刷新table表格页面的方法
layui 关闭open弹出框刷新table表格页面的方法如下所示: 保存后刷新table表格源码 //弹出框 layer.open({ type: 2, shadeClose: true, s ...

vue后台管理系统中，table表格页面使用mixins【混入自用】

vue后台管理系统中，table表格页面使用mixins【混入自用】相关推荐

最新文章

热门文章