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/desc
orderField: '', // 排序,字段
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 = true
this.$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 = false
if (res.code !== 0) {
this.dataList = []
this.total = 0
return this.$message.error(res.msg)
}
this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
this.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 = 1
this.limit = val
this.query()
},
// 分页, 当前页
pageCurrentChangeHandle(val) {
this.page = val
this.query()
},
getDataList: function() {
this.page = 1
console.log(1)
this.query()
},
// 新增 / 修改
addOrUpdateHandle(id) {
this.activeAC = ''
this.addOrUpdateVisible = true
if (id === 1) {
this.activeAC = id
}
this.$nextTick(() => {
this.$refs.addOrUpdate.dataForm.id = id
this.$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 true
return 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>