项目后台首页之项目总览，
一、需求如下：
- 当点击Select全部项目下拉框选中某一项时，触发事件渲染表格，同时状态默认回到进行中状态。
- 新建分组，新建成功后同时出现在Select全部项目下拉框中。
- 点击表格中状态下的图片给每行项目上锁/解锁。
- 移动状态：每行项目在进行中/已完成/已过期三种状态中自由切换，当前项目状态停留在某一种时(如: 进行中)，那么你在移动到下一个状态时(如: 已完成)，需要把当前停留的状态(进行中)给排除掉，也就是说只显示已完成/已过期两种状态。
- 移动分组：这里分为默认分组和自定义分组两种。如当前项目位置在默认分组下，那这个项目只能移到自定义分组中去，并且在选择移动时，还要把默认分组给排除掉；如当前项目位置在自定金分组下，那这个项目只能移到自定义分组中去，并且在选择移动时，不仅把默认分组给排除掉，还要把当前所在自定义组也给排除掉。
附最终效果图：
image.png
二、页面布局：
链接：https://element.eleme.cn/#/zh-CN/component/select
<template>
<div class="wrap">
<div>
<div class="all_div">
<el-select v-model="value" placeholder="全部项目" @change="currentProject($event)"> //@change是下拉框点击事件
<el-option
v-for="item in totalProjectList"
:key="item.andr_project_user_group_id" // 当前选中某项的项目id
:label="item.user_custom_group_name" // 当前选中某项的项目名称
:value="item.andr_project_user_group_id">{{item.user_custom_group_name}}
<span><el-badge type="primary" :value="item.counts"></el-badge></span> //el-badge是效果图上的蓝色圈圈，item.counts 是数量
</el-option>
</el-select>
</div>
<div class="btn_div">
<el-button type="primary" size="medium" @click="addStageClick">新建分组</el-button>
</div>
</div>
<div class="title_div">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="进行中" name="first">
<span slot="label">进行中<el-badge :value="num.ing" type="primary"></el-badge></span> //:value="num.ing" 是进行中右上方显示的数量
</el-tab-pane>
<el-tab-pane label="已完成" name="second">
<span slot="label">已完成<el-badge :value="num.ending" type="primary"></el-badge></span>
</el-tab-pane>
<el-tab-pane label="已过期" name="third">
<span slot="label">已过期<el-badge :value="num.exp" type="primary"></el-badge></span>
</el-tab-pane>
</el-tabs>
</div>
<!--新建分组对话框-->
<div>
<el-dialog :visible.sync="dialogFormAdd" width="20%">
<el-form :model="form">
<el-form-item label="新建分组">
<el-input v-model="form.add" autocomplete="off" clearable placeholder="请输入分组名称"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormAdd = false">取 消</el-button>
<el-button type="primary" @click="addGroupClick">确 定</el-button>
</div>
</el-dialog>
</div>
<!--表格-->
<div class="table" >
<el-table :data="tableData"
:default-openeds="['1']"
border
height="500"
style="width: 100%">
<el-table-column prop="is_block" label="状态" width="80">
<template slot-scope="scope">
<el-image
:src="scope.row.is_block_url" @click="modifyProject(scope.row)"> // :src是表格中渲染的图片
</el-image>
</template>
</el-table-column>
<el-table-column prop="groupName" label="团队名称" width="260"></el-table-column>
<el-table-column prop="name" label="项目名称"></el-table-column>
<el-table-column prop="number" label="项目编号" width="260"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" size="mini" icon="el-icon-view" @click="lookClick(scope.row)">查看</el-button>
<el-button type="warning" size="mini" icon="el-icon-date" @click="lookContract(scope.row)">合同</el-button>
<el-button type="success" size="mini" icon="el-icon-folder-add" @click="removeClick(scope.row)">移动状态</el-button>
<el-button type="success" size="mini" icon="el-icon-folder-add" @click="removeProjectClick(scope.row)">移动分组</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!--移动状态对话框-->
<div>
<el-dialog :visible.sync="dialogFormRemove" width="25%">
<el-form :model="form">
<el-form-item label="移动区域">
<el-select v-model="form.region" placeholder="请选择移动区域" @change="changeStateClick($event)">
<el-option v-for="(item,index) in stateList" :label=item.label :value=item.value></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormRemove = false">取 消</el-button>
<el-button type="primary" @click="move">确 定</el-button>
</div>
</el-dialog>
</div>
<!--移动分组对话框-->
<div>
<el-dialog :visible.sync="dialogFormVisible" width="25%">
<el-form :model="form">
<el-form-item label="移动分组">
<el-select v-model="form.area" placeholder="移动至其它分组" @change="chooseGroup($event)">
<el-option
v-for="item in moveProjectList"
:key="item.andr_project_user_group_id"
:label="item.user_custom_group_name"
:value="item.andr_project_user_group_id">{{item.user_custom_group_name}}
<span><el-badge type="primary" :value="item.counts"></el-badge></span>
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="moveOtherClick">确 定</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
三、代码分解如下：
// api引入进来
import { createCustomGroup, getUserGroupCounts, getProjects, modifyProject, moveProjectIntoCustomGroup, moveProjectIntoOtherCustomGroup } from '@/api/home/home'
import qs from 'Qs'
export default {
data () {
return {
activeName: 'first', //默认进来是定位在进行中状态
input: '',
userId: '',
tableData: [], //定义一个空的数组
andr_project_user_group_id: 'all', //默认进来是查询全部项目
state: '0', //默认进来是查询全部项目中的进行中状态
form: {
region: '',
add: '',
otherGroup: '',
area: ''
},
num: '',
value: '',
totalProjectList: [],
dialogFormRemove: false, //移动状态对话框
dialogFormAdd: false, // 新建分组对话框
getProjectId: '',
getGroupId: '',
// 默认的移动三种状态
stateList: [{label: '移动至进行中', value: '0'}, {label: '移动至已完成', value: '1'}, {label: '移动至已过期', value: '2'}],
changeState: '',
changeGroupState: '',
dialogFormVisible: false, //移动分组对话框
moveProjectList: []
}
},
methods: {
// 选择全部项目里的某一项查询
currentProject ($event) {
this.andr_project_user_group_id = $event //当前选中的某一项赋值给id
this.activeName = 'first' //每次点击不同项目时，始终切换到进行中
this.state = '0' //每次点击不同项目时，始终切换到进行中
this.getProjectsByStateAndGroupId(this.state, $event) //每次点击时的不同状态和点击的项目id
},
// 进行中/已完成/已过期切换
handleClick (tab, event) {
if (tab.name === 'first') {
this.state = 0
} else if (tab.name === 'second') {
this.state = 1
} else if (tab.name === 'third') {
this.state = 2
}
//初始化
this.stateList = [{label: '移动至进行中', value: '0'}, {label: '移动至已完成', value: '1'}, {label: '移动至已过期', value: '2'}]
this.getProjectsByStateAndGroupId(this.state, this.andr_project_user_group_id)
},
// 登录成功后进入后台首页(表格)
getProjectsByStateAndGroupId (state, id) {
var params = {
state: state,
andrProjectUserGroupId: id
}
// 同一接口个别参数不同，但请求后端时里的代码一样，合并
this.getProjectByApi(params)
},
// 登录成功后进入后台首页
getProjectByApi (params) {
getProjects(qs.stringify(params)).then(response => {
if (response.data.retcode === 2000) {
this.tableData = response.data.data.projects
this.num = response.data.data.counts
if (this.tableData) {
this.tableData.forEach(function (row) {
if (row.is_block === 0) {
row.is_block_url = require('@/assets/img/unlock.png')
} else if (row.is_block === 1) {
row.is_block_url = require('@/assets/img/lock.png')
}
})
}
this.$message.success(response.data.retmsg)
} else {
this.$message.error(response.data.retmsg)
}
})
},
// 点击项目上锁解锁
modifyProject (row) {
var block = row.is_block === 0 ? 1 : 0
var projectState = {
userId: this.userId,
projectId: row.andr_project_id,
groupId: row.groupId,
isBlock: block,
type: '0'
}
modifyProject(qs.stringify(projectState)).then(response => {
if (response.data.retcode === 2000) {
this.$message.success(response.data.retmsg)
// 更改锁定状态后，刷新页面
this.getProjectsByStateAndGroupId(this.state, this.andr_project_user_group_id)
} else {
this.$message.error(response.data.retmsg)
}
})
},
// 搜索
searchClick () {
var params = {
state: this.state,
andrProjectUserGroupId: this.andr_project_user_group_id,
condition: this.input
}
// 同一接口个别参数不同，但请求后端时里的代码一样，合并
this.getProjectByApi(params)
},
// 查询下拉框全部项目
getUserGroupCounts () {
var params = {
token: '' // 登陆成功后一直有携带token,这里可直接查询
}
getUserGroupCounts(qs.stringify(params)).then(response => {
if (response.data.retcode === 2000) {
this.totalProjectList = response.data.data
this.$message.success(response.data.retmsg)
} else {
this.$message.error(response.data.retmsg)
}
})
},
// 显示新建分组对话框
addStageClick () {
this.dialogFormAdd = true
},
// 新建分组
addGroupClick () {
if (!this.form.add) {
this.$message.error('新建分组名称不能为空')
return
}
var addGroup = {
token: '', // 登陆成功后一直有携带token,这里可直接查询
customName: this.form.add
}
createCustomGroup(qs.stringify(addGroup)).then(response => {
if (response.data.retcode === 2000) {
this.dialogFormAdd = false
this.$message.success(response.data.retmsg)
// 这里新建分组成功之后，再调用一次更新全部项目接口
this.getUserGroupCounts()
} else {
this.$message.error(response.data.retmsg)
}
})
},
// 显示移动状态对话框
removeClick (row) {
this.dialogFormRemove = true
this.getProjectId = row.andr_project_id
this.getGroupId = row.groupId
// 每一种状态移动时,把自身状态过滤掉,显示其它两种状态
var list = this.stateList.filter(function (state) {
return state.value != row.state
})
console.log(list)
// 当初始过滤时stateList数组里还是3种状态,list数组过滤后只有两种状态,把它赋值给stateList
this.stateList = list
//另一种实现方法
// if (row.state === 0) {
// this.stateList = [{label: '移动至已完成', value: '1'}, {label: '移动至已过期', value: '2'}]
// } else if (row.state === 1) {
// this.stateList = [{label: '移动至进行中', value: '0'}, {label: '移动至已过期', value: '2'}]
// } else if (row.state === 2) {
// this.stateList = [{label: '移动至进行中', value: '0'}, {label: '移动至已完成', value: '1'}]
// }
},
// 选中的移动状态
changeStateClick ($event) {
this.changeState = $event //即将要移动的状态赋值,下面调接口需要
},
// 移动状态(进行中/已完成/已过期)
move () {
if (!this.changeState) {
this.$message.error('移动区域不能为空')
return
}
var moveProject = {
userId: this.userId,
type: 1,
state: this.changeState,
projectId: this.getProjectId,
groupId: this.getGroupId
}
modifyProject(qs.stringify(moveProject)).then(response => {
if (response.data.retcode === 2000) {
this.dialogFormRemove = false
this.$message.success(response.data.retmsg)
this.getProjectsByStateAndGroupId(this.state, this.andr_project_user_group_id)
} else {
this.$message.error(response.data.retmsg)
}
})
},
// 显示移动分组对话框
removeProjectClick (row) {
this.dialogFormVisible = true
this.getProjectId = row.andr_project_id
// 过滤移动分组中默认的3项(全部项目/我负责的/我参与的)
// 以及从自定义分组移动至另自定义分组时，把当前所处在全部项目中的自己也要过滤掉
var _this = this // 把全局this赋值给局部
var groupList = this.totalProjectList.filter(function (project) {
return project.andr_project_user_group_id !== 'all' &&
project.andr_project_user_group_id !== 'charge' &&
project.andr_project_user_group_id !== 'joined' &&
project.andr_project_user_group_id !== _this.andr_project_user_group_id
})
this.moveProjectList = groupList
},
// 选中的移动分组状态
chooseGroup ($event) {
this.changeGroupState = $event
},
// 移动分组
moveOtherClick () {
if (this.andr_project_user_group_id === 'all' ||
this.andr_project_user_group_id === 'charge' ||
this.andr_project_user_group_id === 'joined') {
// 从默认分组移动至自定义分组中
var params = {
projectId: this.getProjectId,
andrProjectUserGroupId: this.changeGroupState
}
moveProjectIntoCustomGroup(qs.stringify(params)).then(response => {
if (response.data.retcode === 2000) {
this.dialogFormVisible = false
this.$message.success(response.data.retmsg)
this.getProjectsByStateAndGroupId(this.state, this.andr_project_user_group_id)
} else {
this.$message.error(response.data.retmsg)
}
})
} else {
// 从自定义分组移动至另自定义分组中
var custom = {
userId: this.userId,
projectId: this.getProjectId,
andrProjectUserGroupIdFrom: this.andr_project_user_group_id,
andrProjectUserGroupIdTo: this.changeGroupState
}
moveProjectIntoOtherCustomGroup(qs.stringify(custom)).then(response => {
if (response.data.retcode === 2000) {
this.dialogFormVisible = false
this.$message.success(response.data.retmsg)
this.getProjectsByStateAndGroupId(this.state, this.andr_project_user_group_id)
} else {
this.$message.error(response.data.retmsg)
}
})
}
}
},
created () {
this.getProjectsByStateAndGroupId(this.state, this.andr_project_user_group_id)
this.getUserGroupCounts()
}
}
四、相关效果图如下：
-
4.1 新建分组
image.png -
4.2 移动状态
image.png -
4.3 移动分组(从默认项移动到自定义分组)
image.png -
4.4 移动分组(从自定义分组移动到另一个自定义分组)
image.png
