发现使用
import { mapGetters } from 'vuex'
获取数据
与此种方法获取数据得到的结果不一样。
import { createNamespacedHelpers } from 'vuex'
const { mapActions, mapState } = createNamespacedHelpers('my')
大概是js文件写法的问题,,有时间再研究。
还是要会自己写代码,存粹照搬别人代码bug简直百出。。。
my.js
import {
AddDepartment
} from '@/api/search'
import axios from 'axios'
// eslint-disable-next-line no-irregular-whitespace
// export default {
const my = {
namespaced: true, // 命名空间
// state: {
// ceshi: 1
// },
// mutations: {
// CESHI_NUM: (state, data) => {
// state.ceshi += data
// }
// },
// actions: {
// ceshi({
// commit,
// state
// }, data) {
// commit('CESHI_NUM', data)
// }
// }
state: {
// deparments: []
AddDepartmentData: []
},
actions: {
AddDepart(context) {
// AddDepartment()
axios.get('/departments')
.then(res => {
debugger
context.commit('AddDepart', res)
console.log(res.data.data.list)
alert('888')
})
.catch(error => {
console.log(error)
})
}
},
mutations: {
AddDepart(state, res) {
state.AddDepartmentData = res.data.data.list
console.log(state.AddDepartmentData)
}
}
}
export default my
html页面
<template>
<div>
<div v-show="isShow" class="content">
<div class="title">
<h3 class="tab-title">部门列表</h3>
<el-button
type="primary"
:class="{'selected':tab === 1,'testTitle':true}"
@click="toTab('deparapment')"
>部门添加</el-button>
</div>
<div>原stor中注册的为:{{ AddDepartmentData }}</div>
<!-- <el-button type="primary" icon="el-icon-search" @click="change_vuex">测试vuex</el-button>
<el-button type="primary" icon="el-icon-search" @click="change_vuex_ansnc">异步测试vuex</el-button> -->
<el-table
:data=" tableData "
class="tab"
row-key="departmentId"
border
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="departmentId" label="ID" width="180" />
<el-table-column prop="departmentName" label="部门名称" width="480" />
<el-table-column prop="userCount" label="职员数量" width="180" />
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="info" plain @click="toTab('DepartmentModify')">
<!-- @click="handleEdit(scope.$index, scope.row)" -->
<i class="el-icon-edit-outline" />
</el-button>
<el-button size="mini" type="info" plain @click.prevent="del(scope.$index, scope.row)">
<!-- @click="remove(scope.$index, scope.row)" -->
<i class="el-icon-delete" />
</el-button>
</template>
</el-table-column>
</el-table>
<!--弹窗-->
<el-dialog :title="dialogTitle" width="50%" :visible.sync="iconFormVisible">
<el-form :inline="true" :model="userInfo" class="demo-form-inline">
<el-form-item label="部门名称">
<el-input v-model="userInfo.date" placeholder="部门名称" />
</el-form-item>
<el-form-item label="职员数量">
<el-input v-model="userInfo.number" placeholder="职员数量" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="iconFormVisible = false">取 消</el-button>
<el-button type="primary" @click="submitUser()">确 定</el-button>
</div>
</el-dialog>
</div>
<deparapment ref="deparapment" @gohome="gohome" />
<DepartmentModify ref="DepartmentModify" @gohome="gohome" />
</div>
</template>
<script>
// import { searchApi } from '../../api/search'
import * as searchApi from '@/api/search'
import deparapment from './components/deparament'
import DepartmentModify from './components/DepartmentModify'
import { createNamespacedHelpers } from 'vuex'
const { mapActions, mapState } = createNamespacedHelpers('my')
// console.log(mapState(['AddDepartmentData']), '----')
export default {
components: {
deparapment,
DepartmentModify
},
data() {
return {
name: 'ExportExcel',
isShow: true,
tableData: [],
treeDate: [],
tab: '',
iconFormVisible: false,
userInfo: {},
dialogTitle: '增加',
rowIndex: null,
tableData1: [
{
id: 1,
date: '深圳市中鹏教育科技股份有限公司',
number: '1',
hasChildren: true
}
],
menu_list: [{
id: '1',
menu_name: '设置',
menu_url: 'setting',
parent_id: 0
}, {
id: '1-1',
menu_name: '权限设置',
menu_url: 'setting.permission',
parent_id: '1'
}, {
id: '1-1-1',
menu_name: '用户管理列表',
menu_url: 'setting.permission.user_list',
parent_id: '1-1'
}, {
id: '1-1-2',
menu_name: '用户管理新增',
menu_url: 'setting.permission.user_add',
parent_id: '1-1'
}, {
id: '1-1-3',
menu_name: '角色管理列表',
menu_url: 'setting.permission.role_list',
parent_id: '1-1'
}, {
id: '1-2',
menu_name: '菜单设置',
menu_url: 'setting.menu',
parent_id: '1'
}, {
id: '1-2-1',
menu_name: '菜单列表',
menu_url: 'setting.menu.menu_list',
parent_id: '1-2'
}, {
id: '1-2-2',
menu_name: '菜单添加',
menu_url: 'setting.menu.menu_add',
parent_id: '1-2'
}, {
id: '2',
menu_name: '订单',
menu_url: 'order',
parent_id: 0
}, {
id: '2-1',
menu_name: '报单审核',
menu_url: 'order.orderreview',
parent_id: '2'
}, {
id: '2-2',
menu_name: '退款管理',
menu_url: 'order.refundmanagement',
parent_id: '2'
}]
}
},
computed: {
...mapState(['AddDepartmentData'])
},
mounted() {
this.getAllList()
console.log(this.$store)
this.AddDepart()
console.log(this.AddDepartmentData, '----')
},
methods: {
...mapActions([
'AddDepart' // 触发actions里的 getInfo 函数,调动接口
]),
gohome(obj) {
console.log('子组件传过来', obj)
this.isShow = true
},
getAllList() {
// searchApi.AddDepartment()
// .then(response => {
// // console.log('tst')
// // console.log(response)
// const l = response.data
// // this.treeDate2 = this.buildTree(l.list)
// // console.log([this.treeDate2])
// // this.treeDate.push(this.treeDate2)
// // console.log(this.treeDate)
// this.tableData = response.data.list
// }).catch(error => {
// console.log(error)
// })
},
buildTree(list) {
const temp = {}
const tree = {}
for (const i in list) {
temp[list[i].departmentId] = list[i]
}
for (const i in temp) {
if (temp[i].parentId) {
if (!temp[temp[i].parentId].children) {
// eslint-disable-next-line no-new-object
// eslint-disable-next-line no-array-constructor
temp[temp[i].parentId].children = new Array()
}
temp[temp[i].parentId].children[temp[i].departmentId] = temp[i]
} else {
tree[temp[i].departmentId] = temp[i]
}
}
return tree
},
del(index, row) { // 删除
// debugger
this.$http.delete('/department/' + index).then(result => {
// console.log(index)
// console.log(result)
this.li = this.tableData[index].departmentId
this.li = index
this.name = this.tableData[index].departmentName
this.$confirm(`确定删除【${this.name}】部门吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error'
}).then(() => {
if (result.data.code === 2000) {
// 删除成功
// this.tableData.forEach(function(item, index, arr) {
console.log(666)
// console.log(index)
// console.log(this.index)
console.log(this)
// console.log(this.tableData[index].departmentId)
this.tableData.splice(this.li, 1)
console.log(this.tableData)
// })
console.log('删除成功')
// this.getAllList()
} else {
alert('删除失败!')
// his.$message.error(errMsg)
}
})
}).catch(error => {
console.log(error)
})
},
load(tree, treeNode, resolve) {
setTimeout(() => {
resolve([
{
id: 31,
date: '董事会',
number: '5'
},
{
id: 32,
date: '行业工作事业部',
number: '10'
}
])
}, 1000)
},
// 删除行
handleDelete(index, rows) {
rows.splice(index, 1)
},
// 增加
add() {
this.dialogTitle = '增加'
this.userInfo = {}
this.iconFormVisible = true
},
// 编辑
handleEdit(index, row) {
this.dialogTitle = '编辑'
this.userInfo = row
this.iconFormVisible = true
this.rowIndex = index
},
// 弹窗确定
submitUser() {
if (this.dialogTitle === '编辑') {
this.tableData1.splice(this.rowIndex, 1, this.userInfo)
this.iconFormVisible = false
return
}
this.tableData1.splice(0, 0, this.userInfo)
this.iconFormVisible = false
},
// 删除
remove(index, row) {
// debugger
// console.log(row)
// console.log(row.date)
this.$confirm(`确定删除${row.date}吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error'
}).then(() => {
this.tableData1.splice(index, 1)
})
},
toTab(name, subname) {
// this.$refs[subname].isShow = false;
this.isShow = false
this.$nextTick(() => {
this.$refs[name].isShow = true
})
}
}
}
</script>
<style lang="scss" scoped>
>>>.el-button--medium {
padding: 8px 13px;
font-size: 12px;
float: right;
margin-top: 8px;
}
.title {
width: 99%;
height: 32px;
line-height: 35px;
margin: 0 auto;
padding-bottom: 5px;
}
.content {
width: 98%;
border: 1px solid #b3cdda;
margin: 0 auto;
margin-top: 10px;
padding-bottom: 20px;
border-radius: 5px;
}
.tab {
width: 99%;
// border: 1px solid #fff;
margin: 0 auto;
margin-top: 10px;
}
.tab-title {
color: #525759;
display: contents;
}
.main-footer {
height: 60px;
line-height: 40px;
position: fixed;
float: right;
z-index: 10;
right: 0;
bottom: 0;
width: 86.5%;
color: #525759;
margin: 0; /*很重要*/
}
.main-footer span{
margin-left: 10px;
}
.versions{
float: right;
margin-right: 10px;
}
>>> .el-table thead {
color: #131314 !important;
}
>>> .el-button--medium {
margin-top: 5px!important;
margin-left: 20px!important;
}
</style>
结果打印出来了: